Learning React

Chapter 5. React with JSX

In the last chapter, we looked at how the virtual DOM is a set of instructions that React follows when creating and updating a user interface. These instructions are made up of JavaScript objects called React elements. So far, we’ve learned two ways to create React elements: using React.createElement and using factories.

An alternative to typing out verbose React.createElement calls is JSX, a JavaScript extension that allows us to define React elements using syntax that looks similar to HTML. In this chapter, we are going to discuss how to use JSX to construct a virtual DOM with React elements.

React Elements as JSX

Facebook’s React team released JSX when they released React to provide a concise syntax for creating complex DOM trees with attributes. They also hoped to make React more readable, like HTML and XML.

In JSX, an element’s type is specified with a tag. The tag’s attributes represent the properties. The element’s children can be added between the opening and closing tags.

You can also add other JSX elements as children. If you have an unordered list, you can add child list item elements to it with JSX tags. It looks very similar to HTML (see Example 5-1).

Example 5-1. JSX for an unordered list

<ul>
    <li>1 lb Salmon</li>
    <li>1 cup Pine Nuts</li>
    <li>2 cups Butter Lettuce</li>
    <li>1 Yellow Squash</li>
    <li>1/2 cup Olive Oil</li>
    <li>3 cloves of Garlic</li>
</ul>

JSX works with components as well. Simply define the component using the class name. ...