Illustrating React JSX!
By: Meghana Vadlapally
Tags: Front End Development, React, Web Development, React Jsx, JavaScript

Umm...

So what is JSX?

JSX is JavaScript XML with which we can write HTML in React.

Source: Image by Marina Vorontsova

Format

I will go over the topic in the following format:

A short example to get to JSX ( It’s about you 😃)

What is JSX?

Before the JSX era 😉

Why use JSX?

How to use it (The fun part 😍)

HTML VS JSX

Use cases

Conclusion

Brainstorming

If I ask you to write code to render the following content,

A heading ( your name)

A paragraph (your bio)

If I were you,

Me: What can I use? My Robot: I know!! use HTML (😉) Me: Alright! let’s get it done!

Used W3Schools editor

Robo: Yay!! done!! Me: Okay, but we are in the Third Decade of the 21st century AND we are in the React world right now, Mr. Robot. Upgrade yourself and help me solve this with something new! Robo: Here you go, use JSX!!

What is JSX again?

JSX is an HTML-like syntax that comes with the full power of JavaScript. It is used with React to describe what to render to the DOM.

It was released with ES6 in 2015.

Under the hood, JSX is compiled to HTML by Babel (If you are from a non-English speaking background, Babel is just like a translator that translates your mother tongue to English! It takes the latest version of JavaScript (ES6 and newer) and converts to older versions).

Before JSX

We can use React without JSX.

The above example without JSX,

Used codeSandbox

Yeah! before JSX, React.createElement() was used to create an element. And yeah! it was such a tedious task to create each element the above way.

React.createElement(type, [props], […children])

Let’s go through the arguments:

type : It is an HTML element or a react element (Here, h1, p, and main)

: It is an HTML element or a react element (Here, h1, p, and main) props : They are properties given to the elements such as attributes (Here, we didn’t give any attributes to the elements so, null)

: They are properties given to the elements such as attributes (Here, we didn’t give any attributes to the elements so, null) children: We can give any number of children. They are the content of the HTML element we create. (Here, <h1> has name, <p> has a bio, and both of them are children of main)

So, Why use JSX?

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code — reactjs.org

We came to a realization that using React.createElement() each time we create an element, doesn’t make much sense.

With JSX,

we can write less code with more readability

Optimized performance

It comes with the power of JavaScript (we will discuss more of it later in the post). Instead of separating markup and logic, React uses Components.

JSX allows React to show more useful errors and warning messages — reactjs.org

How to use JSX?

Here is the fun part 😃!

I will go over the above-mentioned example again.

After this, you will be able to use JSX to render whatever you want!

Tip: Try codeSandbox to practice React in the beginning. It is an online IDE to write code in React. To know how to set up the React project on codeSandbox. Click here.

An example of JSX

Line 1,2: we need to import React, ReactDOM bundles.

Line 4–12: This is the JSX part where you assign elements you want to render. You can nest any number of elements just like HTML. BUT, yeah it’s a loud but,

JSX elements must be wrapped in an enclosing tag!

ie..,

error example

This can’t be done. We must wrap all the elements in a single tag because, under the hood, we are still using React.createElement() when we write JSX. We can’t save two functions in a single variable.

Line 14, 16: ReactDOM.render(element, container)- It takes 2 arguments.

element : The element we want to render (Here, main). We always pass a single element into the function

: The element we want to render (Here, main). We always pass a single element into the function container: The container we would like to render the element into (Here, the container with the id ‘root’)

Here is how it renders,

inspected code

<React.Fragment>

We all are aware of the situations where we use <div> or <span> to wrap elements for the container's sake. <React.Fragment> is just like that. It serves the container’s purpose.

You don’t need to always think of an element to wrap JSX elements.

Also, it won’t appear on the DOM.

ie..,

<React.Fragment> example

When we inspect the above example,

Even though <h1> and <p> are wrapped by <React.Fragment>, it won’t appear.

Exercise: Try nesting JSX elements

HTML vs JSX

There are 3 main differences between HTML and JSX

1. We use JavaScript reserved Keywords with different names in JSX

For Example,

the class and for attributes will be written as className and htmlFor respectively

But, it still appears as class when we inspect the element.

For more supported attributes, browse

2. Property names are always written in camelCase

As we have seen in the above example, attributes/property names will be written in camelCase

HTML : <h1 class=’content-heading’> Meghana Vadlapally </h1> JSX: <h1 className=’content-heading’> Meghana Vadlapally </h1>

3. Every JSX element assigned to a variable must be closed.

For example, in HTML when we use <input > (it’s a self-closing tag), even though, it’s not closed, it will be rendered.

But React throws a SyntaxError.

It must be terminated.

Use Cases

Using variables inside the markup (Interpolating)

Using expressions

Interpolation

What if you want to use the same text at several different places?

We need to store that in a variable. Fine, but how to access the JS variable inside JSX?

For example,

You want to add a smiley on each line,

It is fine to repeat twice but, what if you have to use the same thing a LOT of times?

JSX let us interpolate values using {}.

interpolation example

We can even use variables to store class names and use them with JSX.

interpolating className

In the above example, we used nameOfClass variable with <b> tag

When we inspect the element,

className will be converted to class again.

When js encounters { }, it switches to normal JS evaluation and renders the result of evaluation into the view

Using Expressions

JSX takes any valid JavaScript type and evaluates it.

Here we go through the following examples,

Sum

Function usage

Conditional rendering

Sum

Let’s use an expression with JSX that sums values.

example of expression usage in JSX

Function usage

JSX function example

We use Arrow functions in JSX

We can pass parameters/props to the functions

passing parameters/props to the function

We used template literals to use parameters/props.

Conditional Rendering

We can conditionally render the text.

Let’s go over an example to check voter eligibility

voter eligibility

Here, we used ternary operator to conditionally render text.

We can conditionally render class names too

When we inspect the element, the right class name will be rendered.

Conclusion:

JSX is HTML-like syntax which is a JavaScript extension.

JSX solves the tedious task of using React.createElement() each time we need to create an element.

JSX comes with the power of JavaScript. We can insert JavaScript code into JSX.

Thanks to Almero Steyn, Ultimate Courses, and CodeSandbox!