Learn JSX - ReactJS Lesson 2

What is a Complex JSX Element?

JSX allows rendering multiple nested elements, but they must be wrapped in a single parent element.

Example of valid JSX:

<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>
    

Task: Define a new constant JSX that renders a div containing:

• An h1 element
• A p element
• A ul element containing three li elements

const JSX = ( <div> <h1>Welcome to Lesson 2</h1> <p>This is a paragraph inside JSX.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> ); ReactDOM.render(JSX, document.getElementById('root'));