Chapter 4

Getting Started with React

To use React in your project, you need two packages:

react is the core React library.
react-dom provides DOM-specific methods that enable you to use React with the DOM.

Rather than installing them, you'll load them from a CDN called esm.sh. Modern browsers can import ES modules straight from a URL, and an import map lets you refer to those URLs by a short package name.

Add an import map to the <head> of your index.html file:

index.html

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@latest?dev",
          "react-dom/client": "https://esm.sh/react-dom@latest/client?dev"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

Good to know: The ?dev suffix loads React's development build, which prints helpful warnings and errors to the browser console while you're learning.

The import map only tells the browser where to find React — you still need to use it. Remove the DOM methods you added previously, and add the createRoot() method to target a specific DOM node and create a root to display your React components in. Then, add the root.render() method to render your React code to the DOM.

Because you're now using import, the <script> has to be an ES module, so change its type to module.

index.html

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@latest?dev",
          "react-dom/client": "https://esm.sh/react-dom@latest/client?dev"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
 
      const domNode = document.getElementById('app');
      const root = createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

This will tell React to render our <h1> title inside our #app element.

If you try to run this code in the browser, you will get a syntax error:

Terminal

Uncaught SyntaxError: Unexpected token '<'

This is because <h1>...</h1> is not valid Javascript. This piece of code is JSX.

What is JSX?

JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. The nice thing about JSX is that apart from following three JSX rules, you don't need to learn any new symbols or syntax outside of HTML and JavaScript.

But browsers don't understand JSX out of the box, so you'll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.

Adding Babel to your project

To add Babel to your project, load it from a CDN in the <head> of your index.html file:

index.html

<script src="https://unpkg.com/@babel/standalone@latest/babel.min.js"></script>

Next, tell Babel which script to compile by changing the script's type to text/babel, and add two attributes: data-presets="react" enables the JSX transform, and data-type="module" keeps the script an ES module so your import statements keep working.

index.html

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@latest?dev",
          "react-dom/client": "https://esm.sh/react-dom@latest/client?dev"
        }
      }
    </script>
    <!-- Babel Standalone -->
    <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module" data-presets="react">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
 
      const domNode = document.getElementById('app');
      const root = createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Open the file again and you'll see a different error:

Terminal

Uncaught TypeError: Failed to resolve module specifier "react/jsx-runtime"

When Babel compiles your JSX, it turns each tag into a call to a small helper that it imports from react/jsx-runtime. The browser doesn't know where that is, so add it to your import map:

index.html

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@latest?dev",
          "react-dom/client": "https://esm.sh/react-dom@latest/client?dev",
          "react/jsx-runtime": "https://esm.sh/react@latest/jsx-runtime?dev"
        }
      }
    </script>
    <!-- Babel Standalone -->
    <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel" data-type="module" data-presets="react">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
 
      const domNode = document.getElementById('app');
      const root = createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

To confirm it's working correctly, open your HTML file in the browser. You should see your <h1> title rendered by React.

Comparing the declarative React code you just wrote:

index.html

<script type="text/babel" data-type="module" data-presets="react">
  import React from 'react';
  import { createRoot } from 'react-dom/client';
 
  const domNode = document.getElementById('app');
  const root = createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

to the imperative JavaScript code you wrote in the previous section:

index.html

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

You can start to see how using React enables you to cut down a lot of repetitive code.

And this is exactly what React does, it's a library that contains reusable snippets of code that perform tasks on your behalf - in this case, updating the UI.

Additional Resources:

You don't need to know exactly how React updates the UI to start using it, but if you'd like to learn more, here are some additional resources:

UI trees

Writing markup with JSX

react-dom/server sections in the React Documentation.

Essential JavaScript for React

While you can learn JavaScript and React at the same time, being familiar with JavaScript can make the process of learning React easier.

In the next sections, you will be introduced to some core concepts of React from a JavaScript perspective. Here's a summary of the JavaScript topics that will be mentioned:

While this course does not dive into JavaScript, it's good practice to stay up to date with the latest versions of JavaScript. But if you don't feel proficient in JavaScript yet, don't let this hinder you from starting to build with React!

Getting Started with React

What is JSX?

Adding Babel to your project

Essential JavaScript for React

You've Completed Chapter 4