A 2-minute app

An app in one file

Have you worked with JavaScript, CSS and HTML before? Great! That means you can do this exercise!

The result of this exercise is a single HTML file, which contains your first React app. There are three steps, starting with:

Step 1

Copy this HTML into a new file and save it somewhere:

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

    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.1/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
New
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.

Mark as completed and progress to next section.