JSX has been a part of React and that’s what makes developers grown 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.
You can also nest the elements similar to what we’re doing in regular HTML syntax like so:
Just like HTML, each element contains attributes that enhances 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:
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.