Learn TypeScript 3 by Building Web Applications

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