Getting Started with JSX

 Print   4 min read  
29 Aug 2022
Beginner
3.64K Views

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.

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 means, 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 using JSX syntax, we can write concise and similar to the  HTML & XML structures in the same file as we write native JavaScript code along with all the desired expressions, then the Babel will transform those expressions into actual native JavaScript codebase. Instead of putting JavaScript into HTML markup, JSX allows us to put HTML into the JavaScript codebase effectively.

By default, JSX isn’t supported as an official syntax of JavaScript (but it is a way to use it for React development). So we need to make use of babel to transpile JSX syntax into plain native 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 the JSX transpilation. Webpack serves as our javascript bundler while babel serves as our transpiler and convert JSX to plain native javascript codebase. When we do that, here’s what 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

We can also nest of the HTML elements similar to what we’re doing in regular HTML syntax as given below:

Attributes

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:

JavaScript Expressions

JSX is an expression too. What this means is JSX becomes a regular javascript expression call and evaluates 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 after the transpilation so it would be easier to write the JavaScript along with HTML markup at the same time.

Let’s take a look at this example:

In this snippet, we make use of conditional statements to decide what elements should we render on 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 the javascript, we can use all the 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

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.

Learn to Crack Your Technical Interview

Accept cookies & close this