Understanding React Fundamentals: JSX

Photo by Joan Gamell on Unsplash

What is JSX?

In the event that you’ve worked with React — and regardless of whether you haven’t — you’ve presumably known about JSX. It’s that odd html-in-javascript construct that causes everybody to flinch when they initially find it, however, that a great many people find it remarkable when they come to terms with the thought.

In React, the component approach means that both HTML and JavaScript code live in the same file. React’s secret weapon to accomplish this unholy alliance is the JSX language (where “X” stands for “XML”).

JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers.

JSX Example

This funny tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. It is recommended to use it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. Here a constant called element is declared which stores the string “Hello, world!”.

What is Babel?

ES2015 code which you and I like to write as developers, we do not ship it down directly to a user’s browser. This is because their browser might not have ES2015 or 16 or 17 fully supported. So in order to get around that we had said, we made use of a dependency called babel. This is where Babel comes into play! Babel is a tool that compiles all of your Javascript into an older version (ES5) that all browsers support.

This implies you can compose all the extravagant JavaScript that your heart wants, and you don’t need to stress over it not working on various browsers.

Can we write a react component without JSX ?

Yes.

JSX is nothing but a syntactic sugar.

“React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.” — reactjs.org

React, JSX and Babel

If you visit https://babeljs.io/repl, you can test out Babel by writing some Javascript in the left text field and see the resulting code after it has been compiled by Babel on the right.

Figure 2 — JSX with const and arrow function

Is converted to ..

Figure 3— Babel output

So as we can see the div gets converted to a Javascript function call. This is a call to react create element. The first argument is a string that indicates the type of element that we want to create. The second parameter defines any attributes such as id or style for the element. And the third parameter defines the text that we want to show inside the div.

So we understand that all the JSX we see or write is just for simplicity’s sake. At the end of the day, JSX just gets converted to a function call which is done using React’s createElement() function.

So you might be curious. Well if this JSX gets converted into a function call, why don’t we just write out a lot of function calls?

The answer is really simple.

Let’s take a slightly more complicated component than what you see right here.

Figure 4— JSX with an unordered list

Is converted to …

Figure 5— Babel output

When we look at this code in JSX form it’s pretty easy to tell what’s going on. If you are at least familiar with how HTML works you can take a glance at this over here and understand that this app component is going to create a div that has an unordered list with three allies. You also very quickly can see what text those allies are going to contain. However if we look at the converted results, it’s a lot harder to take a quick glance at that and understand the exact structure and content of what this component is creating. You can also imagine how ugly the code would get if you wanted a bunch of nested elements as you would have to call React.createElement inside of other React.createElements’… The code would get cumbersome.

So the entire purpose of JSX is just to be able to allow us to write out these different function calls that normally occur behind the scenes for us in a much easier to understand format much easier to read. Much easier to get a sense of what is going on when you make use of react.

It is not required to use JSX but it is highly recommended because if you try to write out all these different function calls you’ll end up writing out some code that is very challenging and difficult to maintain.

Limitations

With great power comes just a few limitations :)

JSX could be a hurdle, especially for new developers. Developers complain about its complexity in the learning curve.

Since we are using JSX, a JavaScript extension therefore we are limiting some of the norms of HTML. The common ‘class’ attribute used with every element is replaced with ‘className’. Similarly the ‘for’ attribute used in the label element is replaced with ‘htmlFor’ instead. You may be asking yourself why would the developers do such a mindless change? This is because, ‘for’ and ‘class’ are JavaScript keywords and therefore cannot be used in JSX.

Moreover, comments are no longer written as <! — comment -->, but instead are written like {/* comment */} or {// comment}.

I hope this gave you a better understanding of what JSX is, why is it used and how do we use it in React applications.