Complete Guide to JSX

Reactjs is the most popular front-end framework for the web right now and is loved by the community. Hence, it’s a natural choice for most developers. But, if you search for a React crash course on YouTube, you will see that most of them tend to switch over the topic of JSX. Without doing so it would be like teaching chemistry but not teaching about atoms. JSX is the building block of Reactjs and today, in this article, we are going to explore it.

Further on in the article I will share a link that allows you to experiment with what you learned. Now, let’s focus on JSX.

Look at the following code as an example.

const element = <h1>Hello World!</h1>;

What is it? It does not look like HTML or JavaScript. This is JSX and it is what we use to build UI in React. JSX produces components that are rendered to the DOM by React and it comes with all the full power of Javascript.

Why JSX?

React development embraces the fact that design and logic are two important pieces of UI development. Instead of forcing developers to create separate files for design and logic, it gives us the liberty to do what we please. Putting design and logic in the same file might sound non-traditional to experienced developers. This talk may convince you otherwise.

Getting started with JSX:

Now that you know why you should be using JSX with React, let’s begin.

Since this is a beginner-friendly article you can follow along on the web as well. Go to this URL and replace the Javascript code with the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import ReactDOM from 'react-dom';

import "./styles.css";

class Cmp extends React.Component {
  render() {
    return (
      <h1>Hi</h1>
    );
  };
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Cmp />, rootElement);

You will see the following output.

I will explain the code later in the tutorial. For now, you only have to focus on whatever is written inside the h1 tags. But we could have done this with plain HTML as well. Let’s try to add logic to it. Make your h1 tags as follows:

<h1>{2+3}</h1>

Upon hitting run you can see 5, which means 2+3 was calculated. Anything that you write inside of the curly braces will be treated as Javascript. Another rule about JSX is that all of it should have only one parent element.
For example, the following code is invalid JSX.

<h1>Element 1</h1>
<h1>Element 2</h1>

You always have to wrap your JSX in one outer element, like this.

<>
<h1>Element 1</h1>
<h1>Element 2</h1>
</>

Even though the outer tags are empty, they make it valid JSX. We can even write functions or objects all within the same component in JSX. Paste the following code in the JSX file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from "react";
import ReactDOM from 'react-dom';

import "./styles.css";

class Cmp extends React.Component {
  render() {
    function formatName(user) {
      return user.firstName + ' ' + user.lastName;
    }

    const user = {
      firstName: 'Srajan',
      lastName: 'Kishor'
    };
    return (
      <h1>
          Hello, {formatName(user)}!
        </h1>
    );
  };
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Cmp />, rootElement);

You will see that your name is rendered. Now, lets see all this code that we have been writing and how it is rendered on screen.

How to render on screen:

Let’s see and analyze the code we have been writing so far and how it is rendering on screen.
First we will need two import statements.

1
2
import React from "react";
import ReactDOM from 'react-dom';

In the first statement we are importing React which has the functions a React app needs. The ReactDOM in the second line allows the app to interact with the DOM.
After that we declared a class called CMP, which extends React.Component. This is what we use to create a React element, which can be shown on the screen later on. Each React component has a render function which tells what code segments will be executed when the component renders on screen. Finally, the return statement returns a JSX which is on screen. Make sure that your JSX is always inside of a parenthesis if it’s a multi-line JSX.

In the final code snippet.

1
2
const rootElement = document.getElementById("root");
ReactDOM.render(<Cmp />, rootElement);

We have called the ReactDOM.render function, which takes two arguments.
What component to render,
Where to render; here it will be rendered inside the HTML element with id=”root” which can be found in index.html.

Using control statements inside JSX:

We can use conditions inside of JSX to render based on conditions. For example, modify your class like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Cmp extends React.Component {
  render() {
    if (Math.random() > 0.5) {
      return (
        <h1>
            More than 0.5
          </h1>
      );
    } else {
      return (
        <h1>
                  less than 0.5
              </h1>
      );
    }
  };
}

Our code will return different values depending on the random function. Here, we are using the conditions inside of JSX.

Accessing attributes:

Pass an attribute to your component like this:

ReactDOM.render(<Cmp value = "0.4" />, rootElement);

Now we have passed an attribute named value to our component. To access these attributes use the syntax this.props.attributeName. For example, here we will modify our component’s condition like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Cmp extends React.Component {
  render() {
    if (this.props.value > 0.5) {
      return (
        <h1>
            More than 0.5
          </h1>
      );
    } else {
      return (
        <h1>
                  less than 0.5
              </h1>
      );
    }
  };
}

You can pass different values in an attribute and see the changing output.