<!DOCTYPE html>
<html>
  <head>
    <title>I'm a React app!</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@16.9.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script>
  </body>
</html>

This HTML file does two important things – it creates the div where your rendered content will live (with the id root), and it loads the two library files where React lives.

With that done, let’s move on to…

#Step 2

Type this script into a new <script> tag at the end of your HTML file.

Why type it out instead of copy and paste?

Typing forces you to process each of the individual commands, drilling them into your head in the process – while copying and pasting just gives you a short feeling of cleverness and a shot of dopamine. And if you just want dopamine, quit reading and play flappy bird or something.

// The `React` variable is set by the first `<script>` tag
// in the above HTML file.
let createElement = React.createElement

let rootElement =
  createElement('div', {}, 
    createElement('h1', {}, "Contacts"),
    createElement('ul', {},
      createElement(
        'li',
        {},
        createElement(
          'a',
          { href: 'mailto:james@frontarm.com' },
          "James Nelson",
        ),
      ),
      createElement(
        'li',
        {},
        createElement(
          'a',
          { href: 'mailto:me@example.com' },
          "Me"
        )
      )
    )
  )

// The `ReactDOM` variable is set by the second `<script>` tag
// in the above HTML file
let domNode = document.getElementById('root')
ReactDOM.render(rootElement, domNode)

Phew, that was a bit of work, wasn’t it? But, hopefully all the repetition will have given you an idea of what that createElement method does. If not, maybe step three will help.

#Step 3

Open your HTML file in a web browser, and check that the output looks like this:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>I'm a React app!</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16.6.3/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.6.3/umd/react-dom.production.min.js"></script>
    <script>
      // The `React` variable is set by the first `<script>` tag
      // in the above HTML file.
      let createElement = React.createElement

      let rootElement =
        createElement('div', {}, 
          createElement('h1', {}, "Contacts"),
          createElement('ul', {},
            createElement(
              'li',
              {},
              createElement(
                'a',
                { href: 'mailto:james@frontarm.com' },
                "James Nelson",
              ),
            ),
            createElement(
              'li',
              {},
              createElement(
                'a',
                { href: 'mailto:me@example.com' },
                "Me"
              )
            )
          )
        )

      // The `ReactDOM` variable is set by the second `<script>` tag
      // in the above HTML file
      let domNode = document.getElementById('root')
      ReactDOM.render(rootElement, domNode)
    </script>
  </body>
</html>

Build In Progress

Congratulations! You’ve made a simple React app, without even installing npm! And to celebrate, let’s have a look at how it works.

Progress to next section.