Browse Tutorials
Getting Started with JSX

Getting Started with JSX

29 Feb 2024
Beginner
6.18K Views
9 min read
Learn via Video Course & by Doing Hands-on Labs

ReactJS Course

Getting Started With JSX: An Overview

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. Feeling lost in the world of React, wasting time without progress? It's time for a change! Join our react js course, where we'll guide you on an exciting journey to master React efficiently and on schedule.

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. You can also consider doing our react certification from Dot Net Tricks to upskill your career.

Take our free react skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE

Share Article
About Author
Sonny Recio (Front-end Engineer and Fullstack Web Developer)

Experienced developer with a five-year track record of commended performance in modular and object-oriented programming. Well-versed in all phases of the software development lifecycle, with a strong working knowledge of algorithms and data structures. Proven success in engineering customized solutions improving business processes, operations, and profitability as well as improving employees productivity through developing a user-friendly System.
Accept cookies & close this