What is JSX? Understand JSX Component in Brief

In this article, we are going to learn what is JSX? Understand JSX in brief with JSX element and Component. In the previous article, we had learned what is a declarative and imperative statement. In this article, we will understand what is JSX. We are going to understand what is the benefit of Jsx. Jsx is crucial in react.

what is JSX

In my opinion, this is a very important thing to understand before working with react application. In the previous article, we had learned what is react element and a component. where the process of creating react element and component is really very messy.

When creating a nested element using create element method it is very complicated to understand how the output should look like.

Now let’s look at the following example.

Now if you read this code then you will find there are two elements. That they are nested And have some properties. So how readable is this code? Compared to the standard HTML. Do you think this code is eloquent? isn’t it. The standard HTML is more comfortable comparing to this code.


So to solve this problem react introduce JSX. JSX is a JavaScript extension that provides syntactic sugar for function calls and object construction. It may look like a template engine or HTML, but it isn’t. The benefit of using JSX is this. Jsx make Code more easier to read and eloquent.  Using JSX you can modify your code easily If you are familiar with the standard HTML language. The most important benefit of using jsx is to write less code. which means they make fewer mistakes and are less likely to develop repetitive-stress injuries.

In essence, JSX is a small language with an XML-like syntax; but it has changed the way people write UI components. Previously, developers wrote HTML—and JS code for controllers and views—in an MVC-like manner, jumping between various files. That stemmed from the separation of concerns in the early days. This approach served the web well when it consisted of static HTML, a little CSS, and a tiny bit of JS to make text blink.

This is no longer the case; today, we build highly interactive UIs, and JS and HTML are tightly coupled to implement various pieces of functionality. React fixes the broken separation of concerns (SoC) principle by bringing together the description of the UI and the JS logic; and with JSX, the code looks like HTML and is easier to read and write.

Working with JSX

JSX is compiled by various transformers (tools) into standard ECMAScript (see figure 3.1). You probably know that JavaScript is ECMAScript, too; but JSX isn’t part of the specification, and it doesn’t have any defined semantics. So as I said earlier jsx is not a specification of ECMAScript. We are using Babel 2 compile the Jsx into JavaScript. You can also call this process As trans compiling.

so let me first describe what is the meaning of Trans compiling. Transcompiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language.”

So here we are using jsx syntax and trans compile this Syntax into ECMAScript.

Let me show me the process.


so first we will type jsx code on the document.

The code written in jsx is trans compiled to the JavaScript code. And then the browser will execute this JavaScript code easily.

Now you know the process of jsx so we will take a small example to understand jsx.

In the previous article, we had learned what is Babel and how to use it.  so we are using same to of Babel and create jsx code and trans compile it into JavaScript. so the Babel tool will do the heavy lifting for us.

This code will transfer the jsx into pure ECMAScript code.

So I will just open the Babel tool and write some jsx code.

This code looks like the standard HTML but it is a jsx code On the right side you will get your ECMAScript code. as you know react use a pure JavaScript code to build their component. So you can see we have a pure ECMAScript code on the right side.

So using the Babel we will Trance compile jsx into pure react code. Now you tell me which code is easier to understand and read left-hand side or right-hand side. Of course the left-hand side. because of most of the developer familiar with the HTML syntax. Now we understand what is JSX. The time is to learn JSX element.


React Element Using JSX

Just like the standard HTML Syntax you can create react element. So we are going to create this fruit list.  we will create a container division tag and put a ul tag with the class fruits.  in this ul tag, we will create two li element with a class item and specify some text.

So if you are using create element method to create the nested fruit list using unordered list then the code should look like this.

if you read this code and just create an output in your mind then the result would be possibly correct. Because this code is very complicated to read and understand. Till now we know that what is JSX and how to create react element using JSX. let’s understand React Component Using JSX.

React Component Using JSX

we already learn how to create a component with a simple create element method. but this method is more complicated to understand and read the code. So now we have JSx to create a component.

When working with the react component the syntax of JSX is the same as used in the previous example. But the only difference is that the component class must start with the capital letter. 

So let’s consider the following example and understand how to create a component using JSX. Suppose if you wanted to create the fruit list in different 10 projects. then you want to use the same code again and again in the different files. to solve this problem we have a component class. we know that the component class help us to create a reusable component. 

now let’s create a fruit list using component class.

In the previous example, we had created this fruit list now will just convert this react element into react component.

Now let’s see if you want to print a variable with the JSX code then you can do that as well. Now let’s understand how to output variable data using JSX. as you know if you want to print any variable in JavaScript you can concatenate this variable with the string or you can just print the standalone variable. in the JavaScript tutorial series, we learned how to use backtick to print a variable on the document.

The JSX is also used as the same mechanism to print a variable. Using the curly braces you can print variable on the document.

I Will show you how you can do that.

So in the example, we had created a property of component and specified to the li tag. From the next article, we will understand how to create our first react application using create react app. We also understand how to set up the first react project.

I hope you understand What is JSX.