Check out React 18: Introducing JSX

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

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

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

Getting started with JSX

The best way to familiarize yourself with JSX is to convert our code Country component of the previous tutorial in JSX. Here is the original code we wrote:

function Country(props) {
    return React.createElement('div', {
        className: "container"
    }, React.createElement('h2', {
        className: "country-name"
    }, `Country Name: ${props.name}`), React.createElement('p', {
        className: "capital"
    }, `Capital: ${props.capital}`), React.createElement('p', {
        className: "population"
    }, `Population: ${props.population}`));
}

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

function Country(props) {
    return (
        <div className="container">
            <h2 className="country-name">Country Name: {props.name}</h2>
            <p className="capital">Capital: {props.capital}</p>
            <p className="population">Population: {props.population}</p>
        </div>
    );
}

It is evident that we have had to write a lot less code and it is much easier to understand the overall structure of the components now. The JSX inside our function also returns a React element just like our original pure JavaScript version.

We can now make ours Country component within the browser using the following code:

let countryElement = (
  <Country
    name="United States"
    capital="Washington, D.C."
    population="332 million"
  />
);

let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);

Try adding US area information to this component. You will find that it is much easier to do this with JSX.

Important things to remember

There are some rules 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 XML rules when composing the component structure. This means that you have to close each element you add to the component. Items with children will need to have an opening and a closing tag. Items that have no children will require a self-closing tag.

2. double quotes! = single quotes

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

3. JavaScript expressions within JSX

You can embed any valid JavaScript expression within JSX code as long as it is enclosed in curly brackets. This is what we have used in ours Country component when we had access to values such as capital and population.

4. Tags are case-sensitive

Regular HTML elements must have lowercase tags. This means that we could not 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 have to be explicit that we want HTML div element specifying it all in lowercase.

4. Beware of reserved keywords in JSX

You cannot use reserved keywords within the JSX you are writing. This is why we had to use className to specify the value of class attribute. Likewise, for it’s a reserved keyword, so we’ll have to use it htmlFor to specify a value for the for attribute in HTML.

5. One item at a time

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

Final thoughts

We’ve reached the end of this tutorial, and I hope you’re comfortable enough to start using JSX when building React apps. In the next tutorial we will learn the separation of JSX and JavaScript when defining our components.

Source link