Getting Started with JSX

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.

So, what is JSX anyway? JavaScript XML (JSX) is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. So meaning, this JSX is just simply a javascript expression that is taking the structure of XML to make it look like an HTML format inside javascript.

By default, JSX isn’t supported as an official syntax of JavaScript. So we need to make use of babel to transpile JSX syntax into plain JavaScript using babel.

JSX Transpiler

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.

This is how JSX is transpiled to convert the code in acceptable javascript syntax. This makes use of babel and webpack to assist us in transpiling our code completely.

JSX Transpilation

As explained earlier, we make use of both webpack and babel to initiate JSX transpilation. Webpack serves as our javascript bundler while babel serves as our transpiler and convert JSX to plain javascript. When we do that, here’s how our code would look like after being transpiled:

JSX concepts

Elements

JSX produces react “elements” which in turn becomes an HTML element in DOM.

Ex.

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.

Nested elements

You can also nest the elements similar to what we’re doing in regular HTML syntax like so:

Attributes

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:

JavaScript Expressions

JSX is an expression too. What this means is JSX becomes a regular javascript expression calls and evaluate to javascript objects.

Meaning, you can still use your conventional javascript expressions such as using conditional statements like if-else, loops like for, while, do-while loops, and functions. JSX is just javascript.

Let’s take a look at this example:

In this snippet, we make use of conditional statements to decide if what elements should we render in the page. This is one powerful feature of jsx to take javascript expressions into account.

Comments

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

Just like javascript, we can put conditional statements and loops because JSX is still just javascript as we explained earlier in the topic.

So, let’s take a look at how we can use conditional and loops in JSX:

Conditional statements:

Loops

Summary

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.