1. Code
  2. JavaScript
  3. React

Learn React 18: Introducing JSX

Scroll to top
60+ min read

You can build a React app with pure JavaScript, but with JSX it's much easier. JSX is a special syntax that allows you to combine JavaScript and XML to quickly code components. In this lesson from our free full-length beginner course on React 18, you'll learn how. 

We created a country component at the end of our previous tutorial on creating a first React component, and it rendered as we expected. However, we wrote a lot of code to create a simple component.

This tutorial will teach you about JSX. JSX is short for JavaScript XML, and it allows us to write what looks like HTML inside JavaScript. This makes it a lot easier for us to define our components and create a complicated UI.

The JSX that we write is transpiled by a variety of tools into actual JavaScript code that browsers can understand.

Getting Started With JSX

The best way to get you familiarized with JSX is to convert the code of our Country component from the previous tutorial into JSX. Here is the original code that we wrote:

1
function Country(props) {
2
    return React.createElement('div', {
3
        className: "container"
4
    }, React.createElement('h2', {
5
        className: "country-name"
6
    }, `Country Name: ${props.name}`), React.createElement('p', {
7
        className: "capital"
8
    }, `Capital: ${props.capital}`), React.createElement('p', {
9
        className: "population"
10
    }, `Population: ${props.population}`));
11
}

We can write it as follows with the help of JSX:

1
function Country(props) {
2
    return (
3
        <div className="container">
4
            <h2 className="country-name">Country Name: {props.name}</h2>

5
            <p className="capital">Capital: {props.capital}</p>

6
            <p className="population">Population: {props.population}</p>

7
        </div>

8
    );
9
}

It is evident that we had to write a lot less code, and it is far easier to understand the overall component structure now. The JSX inside our function is also returning a React element, just like our original pure JavaScript version.

We can now render our Country component in the browser by using the following code:

1
let countryElement = (
2
  <Country
3
    name="United States"
4
    capital="Washington, D.C."
5
    population="332 million"
6
  />
7
);
8
9
let rootElement = document.getElementById("root");
10
ReactDOM.createRoot(rootElement).render(countryElement);

Try adding information about the area of the United States to this component. You will find it is much easier to do so with JSX.

Important Things to Remember

There are a few rules that you need to keep in mind when working with JSX.

1. It's XML, Not HTML!

I would like to repeat that the code we wrote above might look like HTML, but it is actually XML. This means that you will have to follow the rules of XML when composing the component structure. So you need to close every element that you add to the component. Elements with children will need to have an opening and a closing tag, and elements which don't have any children will require a self-closing tag.

2. Double Quotes != Single Quotes

Attribute values that have strings need to use double quotes. This is the reason we used double quotes when specifying the value of the className attribute above.

3. JavaScript Expressions Inside JSX

You can embed any valid JavaScript expression inside the JSX code as long as it is placed within curly brackets. This is what we used in our Country component when we accessed values like capital and population.

4. Tags Are Case-Sensitive 

Regular HTML elements need to have lowercase tags. This means that we couldn't use Div instead of div when creating our component. This is because we are basically working with JavaScript, and it is a case-sensitive language. We need to be explicit that we want an HTML div element by specifying it all in lowercase.

5. Watch Out for Reserved Keywords in JSX

You cannot use reserved keywords inside the JSX you are writing. This is why we had to use className to specify the value of the class attribute. Similarly, for is a reserved keyword, so we will need to use htmlFor to specify a value for the for attribute in HTML.

6. One Element at a Time

The return statement that you write for your components can only return one element. The element itself can have multiple children. This is why we returned a single container div above. It is also a nice idea to wrap your return statement within parentheses for proper formatting and readability. This also reduces the chances of JavaScript implicitly adding any unintended return values.

Final Thoughts

We have reached the end of this tutorial, and I am hoping that you are comfortable enough to start using JSX when creating any React apps. In the next tutorial, we will learn about the separation of JSX and JavaScript when defining our components.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.