Element trees

JSX code can also create element trees:

function FullName(props) { 
    return ( 
      <span>{props.givenName} {props.lastName}</span> 
    ) 
} 
 
const element = ( 
  <div id="root"> 
    <FullName givenName="Sebastien" lastName="Dubois" /> 
    <FullName givenName="Alexis" lastName="Georges" /> 
  </div> 
) 

The preceding React element has multiple children.

In the last example, we spread our JSX expression over multiple lines to keep the code readable. Notice that the JSX is surrounded by parentheses to avoid issues with Automatic Semicolon Insertion (ASI): http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion.

As you can see, JSX is quite clean and powerful!

For the security-concerned developers (you should be one!), it is important to know that values embedded in JSX code are automatically escaped, providing a good level of protection against injection attacks.

You can find the sources of this example in the code samples of this book, under Chapter11/02-react-element. Open it up in your web browser, go to the developer tools, and take a look at the React element.

We'll see this in practice in the next chapter but, for the transpiled JSX code to work, React must be imported and in scope for the JSX code. This is explained here: https://reactjs.org/docs/jsx-in-depth.html#react-must-be-in-scope.

We will learn some more about JSX throughout this chapter, but this should be enough to get you started!