React: Creating elements with nested JSX

This week we are learning React, and today we were covering the syntax for rendering HTML elements using JSX syntax.

If you want to render multiple elements in React, your JSX must return a single parent element that wraps the nested elements.

<!DOCTYPE html>
...
<main id="root"></main>
...
</html>

<script type="text/babel">
const root = document.getElementById("root");
const App = () => (
  <div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </div>
);

{/* Invalid JSX
const App = () => (
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
);
*/}
   
ReactDOM.render(<App />, root);
</script>