Learning React, 2nd Edition

Chapter 5. React with JSX

In the last chapter, we dove deep into how React works, breaking down our React applications into small reusable pieces called components. These components render trees of elements and other components. Using the createElement function is a good way to see how React works, but as React developers, that’s not what we do. We don’t go around composing complex, barely readable trees of JavaScript syntax and call it fun. In order to work efficiently with React, we need one more thing: JSX.

JSX combines the JS from JavaScript and the X from XML. It is a JavaScript extension that allows us to define React elements using a tag-based syntax directly within our JavaScript code. Sometimes JSX is confused with HTML because they look similar. JSX is just another way of creating React elements, so you don’t have to pull your hair out looking for the missing comma in a complex createElement call.

In this chapter, we’re going to discuss how to use JSX to construct a React application.

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 ...