Setup

Setting up React

Without a build step

Install

No install is necessary when including the React and ReactDOM JavaScript libraries via HTML script tags.

Hello, world!

Create an index.html file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"/>
    <title>Technotes | React</title>
    <link rel="stylesheet" href="index.css"/>
    <script crossorigin
            src="https://unpkg.com/react@18/umd/react.production.min.js">
    </script>
    <script crossorigin
            src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js">
    </script>
    <script crossorigin
            src="https://unpkg.com/@babel/standalone@7/babel.min.js">
    </script>
</head>
<body>
<h1>Step 01 Hello, world!</h1>
<div id="s01"></div>
<script type="text/babel" src="s01.js"></script>
</body>
</html>

In the same folder, create the index.css file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


html {
  color-scheme: light;
}

body {
  font-family: system-ui;
  font-size: 1rem;
  line-height: 1.1;
}

h1 {
  font-size: 1.8rem;
  line-height: 1.4;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.2;
}

And also the s01.js file where we actually use the React library to display Hello, world! on the page.

1
2
3


const s01 = ReactDOM.createRoot(document.getElementById('s01'));
const element = <p>Hello, world!</p>;
s01.render(element);

Open index.html

How it all work

index.html loads React, ReactDOM, and Babel JavaScript libraries from the Unpkg CDN. This makes React, ReactDOM, and Babel objects available in the global scope.

In the brower JS console, try:

1
2
3


React.version
ReactDOM.version
Babel.version

The styles.css file- while really not necessary for this example, makes the output look a little bit nicer.

All the React bits are in the s01.js file.

Line 1 defines a JavaScript constant named s01 . Let’s break-up that line so the parts of the right-hand side is clearer.

1
2
3


const s01 = ReactDOM.createRoot(
                document.getElementById('s01')
            );

The createRoot method sets-up React to manage a section of the DOM

In this case, we want React to manage the DOM element with id s01 and all its children.
The document global object has nothing to do with React or ReactDOM - it is supplied by the JavaScript runtime in the web browser

After line 1 is executed, the s01 constant is set to “a React root object”- which is an object with a render method and an unmount method.

We use the render method in line 3 to render a React element (an in-memory representation of a DOM element) to an actual DOM element.

After this point, React is in charge of managing that DOM element. Later we can use s01.unmout() to tell React to stop doing it.

Both line 1 and line 3 are straight up JavaScript- but line 2 is special. It is not even valid JavaScript!

1

const element = <p>Hello, world!</p>

The <p>Hello, world!</p> expression uses the JSX syntax extension to declaratively define UI components. Intitutively, it is obvious that we are declaraing a p (paragraph) element.

The element constant doesn’t get initialized with a DOM element- instead its value is set to a “React element”.
The JSX syntax worked here because the “Babel library we included in our HTML file” transpiled this “JSX expression” to “plain JavaScript code” that the browser’s JS runtime could understand.

Notice that in our HTML, instead of the default text/javascript type for the script, we’ve used type="text/babel".

With a build step

Install

Hello, world!

Prepare a fresh React project and run it.

1
2
3
4


pnpm create vite hello --template react-swc
cd hello
pnpm install
pnpm run dev

Open the URL http://localhost:5173/ in a web browser.

Save the generated code in a new Git repository.

1
2
3


git init
git add .
git commit -m "Fresh React/JavaScript project with Vite/SWC"

First time using Git?
If this is the first time you are using Git in your machine, you may need to configure your user.name and user.email setting by running:

1
2


git config --global user.name "First Last"
git config --global user.email "[email protected]"

When using Github- as a best practice, use an email like: [email protected]

You can find your address at https://github.com/settings/emails
As an example, my email is [email protected]

Delete the files src/App.jsx and src/App.css

Create the file src/s01-hello.jsx with the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import sty from './s01-hello.module.css'

function S01Hello() {
    return (
        <div className={sty.les}>
            <h2>Step 01 Hello, world!</h2>
            <p>Hello, world!</p>
        </div>
    )
}

export default S01Hello

Create the file src/s01-hello.module.css with the following content:

1
2
3


.les p {
  color: chocolate;
}

Replace the content of src/main.jsx with the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import React from 'react'
import ReactDOM from 'react-dom/client'
import S01Hello from './s01-hello.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('main')).render(
    <React.StrictMode>
        <h1>Basics</h1>
        <p>Components. Properties. State. Side effects. Controlled components.</p>
        <S01Hello/>

        <h1>More ...</h1>
        <p>TODO</p>
    </React.StrictMode>,
)

Replace the content of src/index.css with the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


html {
  color-scheme: light;
}

body {
  font-family: system-ui;
  font-size: 1rem;
  line-height: 1.1;
}

h1 {
  font-size: 1.8rem;
  line-height: 1.4;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.2;
}

Replace the content of index.html with the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0"/>
  <title>Technotes | React</title>
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
</head>
<body>
<div id="main"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

ESLint error at the first line?

If your IDE gives an error at the <!DOCTYPE html> line, modify the .eslintrc.cjs file to add *.html to the list of ignorePatterns

1

ignorePatterns: ['dist', '.eslintrc.cjs', '*.html'],

How it all work

TODO