3.1 What is React?

Nested Elements

Work in pairs for this practice exercise. 10 mins

# Background

When creating a React Element, the children can be any plain text string or another React Element (generated by another React.createElement() call), which can in turn have children elements of their own.

# Requirements

Using what you have learned about React.createElement(), write the JavaScript to create this nested HTML markup and mount it to the rootElement.

<div class="container">
  <h1>Hello React</h1>
  <main>
    <p>I am <span style="color: green;">one of</span> the grand-children</p>
  </main>
</div>

TIP

You may want to refresh your memory on manipulating a DOM element's style property with JavaScript. See Styles and classes | JavaScript.info

Starter Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React</title>
    <style>
      .container {
        font-size: 2rem;
        margin: 0 auto;
        width: 90vw;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById('root')

      // Your code goes here ...

      ReactDOM.render(element, rootElement)
    </script>
  </body>
</html>

Solution Code

The solution code will be posted after class. ¯\(ツ)/¯

← Convert to React What is JSX? →