Explaining React JSX in Depth

JSX stands for JavaScript Syntax Extension. It is a syntax for writing JavaScript and HTML together, or to be exact, writing HTML codes inside JavaScript code. in this article, we will understand JSX in Depth and some other things too related to React.

JSX is a template language that comes with the full power of JavaScript.

Syntax

const element = <h1>Hello World!</h1>;

As we can see in the above syntax, both HTML and JS code has been written in a single line. It is neither HTML nor JS code, it is JSX, the compilation of both languages in one code.

It is a great practice to write React codes in JSX, but it is not compulsory. We shall see in this article the difference between the two but first, let us discuss why JSX is preferred over the other method?

Here are some advantages of writing the code in JSX – 

1. Writing React code in JSX makes it easy to read and understand.
2. As discussed above, we can simply write HTML codes inside JS, and it will be called a React code.
3. Rendering of code is faster when compared to regular JavaScript
4. Writing code in JSX not only makes it clean and understandable but can even help with error sporting.

The main problem with JSX was that the browser cannot read its syntax as it uses ES6 classes and the browser can only understand the ES5 classes. So now if we want to use JSX, we first have to convert ES6 into ES5.

To solve this, Babel was introduced in 2014 that help the browsers read the JSX code by converting it into plain JS.

Babel is a JavaScript Compiler mainly used to convert ECMAScript2015 / ES6 and its newer versions into plain JavaScript that the browsers can understand.

ECMAScript 2015 or ES6 is the sixth version of JavaScript and is fully packed with new features that include arrow functions, let and const keywords, promises, classes, and more.

Let’s try understanding a bit more about Babel through an example.

Below is a photo that has JSX code on the left side while it’s the conversion into plain JS through Babel so that browsers can understand it more clearly.

The code on the right side is very complex and lengthy just for writing a simple “Hello World!”. 

Thus using JSX makes the code cleaner, easier to understand, and spot errors.

React code without JSX

At the beginning of this article, I have said that JSX is not the only way of writing code in React, but it is mostly used due to its simplicity. 

The other method of writing code in React is through createElement(). Before JSX, every code of React was written with this method, but this method was lengthy.

An example with the comparison between the two methods might help you understand things better

From the above image, we can easily see that for every HTML element we have to call the React.createElement() function for utilizing its predefined properties like in this case <h1>. 

Knowledge about their conversion and difference is a very important part of React and common for interviews.

React.createElement()

It is the purest form of code written in React without JSX and Babel, and every code written in JSX gets converted into React.createElement() as it is easier to understand by the browsers.

As we have seen in the code, the syntax for the React.createElement() is

React.createElement(“type”, props, “children”)

Where-

type – is the attribute type in HTML like div, h1, p, etc

props – is used for properties like id, class, onClick, etc

children – can either be a statement to render or can contain other attributes like in the above example.

 For more details about this topic, visit the official site.

Rules of Writing JSX

There are certain sets of rules that must be followed in order to get the most from it, and JSX is no exception. Let’s see some of them –

1. Every HTML tag must have its closing tag
2. We can write JS code with the HTML by wrapping it with {}
3. If we have huge chunks of HTML code, we will have to wrap it inside () & [] /<> </>
4. It uses camelCase notation for naming HTML attributes like onClick, tabIndex, and many more.
5. An error will occur in the console if any of the rules are missed or not followed.

Conclusion

1. JSX is a syntax for writing both HTML and JavaScript codes together with the help of parenthesis in one file.
2. With the help of JSX, we can write clean code which can be easily understood and edited.
3. It is not mandatory to write React code in JSX only. We have one more method of writing React code without JSX, but it becomes complex and sometimes lengthy.