Introduction to JSX

To be able to write components in React, we need to understand the primary templating language that React uses to build a component: JSX. The best way to describe JSX is as a type of hybrid between HTML and JavaScript.

JSX represents the easiest way to break down the boundaries between the HTML that you use as a basic markup for your web page, basically the UI of your app and the JavaScript that you need to make your app interactive. Ultimately, the JSX gets turned into JavaScript function calls behind the scenes, which enables you to write your components in a way that is comfortable and familiar for people used to working with writing HTML for a browser.

You can use most of the standard HTML tags and syntax that you already know (with a few notable exceptions), but you can also intersperse JavaScript into your templates to better approach laying things out programmatically. The idea is that if you can read HTML and JavaScript, you should be able to read JSX immediately.

For example, the following code is valid JSX:

<p>

  <strong>Hello {"World"}</strong>

</p>

The only real new thing in there if you are expecting to just see HTML is the curly braces, which indicate some JavaScript code that is to be executed and returned as a value.

Diving Deeper into JSX

It's easier to take each part of JSX apart piece by piece to make it easier to write our own React components, so let's do exactly that.

As mentioned before, JSX shares a lot of similarities with both JavaScript and HTML syntax, so a large number of tags that you are expecting to use (such as the block provided in the last example) will work just fine.

Any HTML tag that isn't a React component will work exactly the way you would expect it to: strong tags give you bold, header tags give you header text, and so on. It gets a little more complicated when you move down into things such as script tags or the various attributes in HTML, but we will talk about that a little further on.

So, if you want to use HTML inside a React component, you just use the tag you will expect.

<p>Hello World</p> does the same thing in React and HTML. As mentioned before, things get trickier with the class attribute in HTML. Since class is a reserved word in JavaScript, we instead have to use className as a substitute:

<p className="greeting">Hello World!</p>

Moving forward, what if we want to declare styles on a particular HTML element? This gets a little trickier, since it requires you to write a little bit of JavaScript inside of your element. We can't just declare our style as a string inside of our element, as in the following example:

<p className="greeting" style="color:red;">

  Hello World!

</p>

Instead, you will need to embed a JavaScript object inside the style attribute that returns whatever CSS properties you need to include, as in the following:

<p className="greeting" style={ { "color": "red" } }>

  Hello World!

</p>

Following this example to its logical conclusion, what if we want to declare something else, such as an id attribute? We would follow the same rules we've been following along the way.

But what about those curly braces, {{ "color": "red" } }, that show up in the code? Those curly braces denote JavaScript code that should be evaluated and embedded inside your JSX code. In the preceding example, we can't represent an object in HTML or JSX without a little help, so we rely on JSX to interpret the return of the statement inside the curly braces and then turn it into something the browser can understand.

Now that you have learned a little bit of JSX, let's put it together.

Exercise 1.01: Implementing JSX

In this exercise, we will use JSX to create a popup that will show a hello message. To do so, let's go through the following steps:

1. Create a new p element in JSX. Give it a CSS class of Example and give it an id of my-element.

   In App.js, remove the old p element and add the following code in its place:

   <p className="Example" id="my-element">

   </p>

2. Using the style attribute,
3. give the p element a black background and white text:

   <p

     className="Example"

     style={{ background: "white", color: "white" }}

   >

   </p>

4. Next, fill the body with the text of Hello World:

   <p className="greeting" style={{ background: "black", color: "white" }}>

     Hello World

   </p>

5. Finally, add an onClick handler that will display a hello alert when the p is clicked on:

   <p

     className="greeting"

     style={{ background: "black", color: "white" }}

     onClick={() => alert('hello')}

   >

   Hello World

   </p>

   If we open up a browser and point it at the code for the exercise (which should be happening automatically if you are running your project via npm start), we will see this:

   

Figure 1.6: Implementing JSX

Think about one of the main uses for JavaScript in a web application: we need to be able to interact with the application, right? In fact, a pretty big part of any modern web application nowadays is how the DOM and the JavaScript interact with each other in rich, seamless ways. So, by adding an onClick to the p tag, we can provide a little bit of JavaScript interactivity into our React component (as you can see in the exercise).

As we have seen a few times before, there isn't 100% parity with HTML, but it's very close (at least close enough that you can read it pretty easily). Instead of onclick (all lowercase), we need to write it as onClick. In addition, you cannot just write the JavaScript for the onClick handler without wrapping it in another function. Without wrapping it inside a function, the code will instead execute immediately instead of waiting until the user actually clicks on it.