JSX has been a part of React and that’s what makes developers grow to love the library due to its HTML-ish syntax. React has been popular with developers for quite some time now with 108k stars on Github.
For the most part of using JSX in our react apps, we’re going to rely on transpilers. In case you’re wondering, transpiling stands for transform and compiling.
We’re going to rely on babel for the most part in transpiling our react apps.
JSX produces react “elements” which in turn becomes an HTML element in DOM.
As you can see, an element fully resembles how HTML syntax is declared. So it’s safe to say that you can catch up pretty quickly in using JSX syntax.
We can also nest of the HTML elements similar to what we’re doing in regular HTML syntax as given below:
Just like HTML, each element contains attributes that enhance the behavior, design, and provides additional information of a specific element where the attributes were applied. This is applied like so:
Let’s take a look at this example:
We can put comments in JSX syntax to put comments/suggestions or anything you would like to add in a comment. This is done by doing just like in this example:
Conditional Statements and Loops
So, let’s take a look at how we can use conditional and loops in JSX:
The JSX syntax is quite useful while developing React applications and it is not a default feature or compulsory for any means, but it has the feasibility to use expression while working with HTML markups at the same time which makes it easy for usability.
In this article, we’ve learned what is JSX, how it’s transpiled, the concepts, and how it influences React ecosystem in its structure that has been loved by tons of developers. I hope you guys enjoyed reading my article.