React-Scripts from an empty directory

We will set up everything from an empty directory using react-scripts. The setup supports up to medium-sized projects.

The create-react-app scripts

When I started learning ReactJS, the documentation suggested using create-react-app. The create react app is the fast way to set up our app. There is more to setting up with react scripts.

Requirements

You are familiar with Yarn and NPM package managers and NodeJS.
You will install NodeJS, NPM, and Yarn.

Install NodeJS LTS version https://nodejs.org/en/.
Run npm --version to verify that the installation succeeded.
Run npm install -g yarn.
Run yarn --version.

Initial setup

I did the following steps to set up the project:

Create an empty directory, and name it however you wish.
Create a file package.json.
Run yarn install in the directory you created.
Create a public directory and index.html inside.
Create an src directory and an index.js inside.

The package.json content.

{
  "name": "initial-setup",
  "version": "0.1.0",
  "description": "create-react-app initial setup",
  "scripts": {
    "start": "react-scripts start"
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  },
  "dependencies": {
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

The index.js content:

import { createRoot } from 'react-dom/client';

function App() {
  return <h1>React App Setup</h1>
}

createRoot(document.getElementById('root')).render(<App />);

The complete project setup with source code is here.

Multi-root setup

The multi-root is the fancy name for calling create root function multiple times.

Here is the simple set of changes to create a multi-root app:

diff --git a/public/index.html b/public/index.html
index 6672ed0..b5ed2a2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,8 @@
   <title>React App Setup</title>
 </head>
 <body>
-  <div id="root"></div>
+  <div id="foo"></div>
+  <div id="bar"></div>
+  <div id="baz"></div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
index 5521a9e..9bac9ba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,17 @@
 import { createRoot } from 'react-dom/client';

-function App() {
-  return <h1>React App Setup</h1>
+function Foo() {
+  return <h1>Foo Root</h1>
 }

-createRoot(document.getElementById('root')).render(<App />);
+function Bar() {
+  return <h1>Bar</h1>
+}
+
+function Baz() {
+  return <h1>Baz</h1>
+}
+
+createRoot(document.getElementById('foo')).render(<Foo />);
+createRoot(document.getElementById('bar')).render(<Bar />);
+createRoot(document.getElementById('baz')).render(<Baz />);

Understanding the term multi-root allows us to add react to existing web apps. Imagine the existing web app. That app is using a template engine or something else. We don't want to rewrite the whole app. What do we do? Create a div with an ID to serve as a root and mount a react tree.

An example that renders react tree in the nested HTML structure:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>React App Setup</title>
</head>
<body>
  <div id="foo"></div>
  <div id="bar"></div>
  <div id="baz"></div>
  <article>
    <h1>An existing title</h1>
    <p>An existing paragraph</p>
    <div>
      <div>
        <div>
          <h2>A form created by react lives here</h2>

          <!-- react can live anywhere inside our app -->
          <div id="nested-root"></div>
        </div>
      </div>
    </div>
  </article>
</body>
</html>

JS:

import { createRoot } from 'react-dom/client';

function Foo() {
  return <h1>Foo Root</h1>
}

function Bar() {
  return <h1>Bar</h1>
}

function Baz() {
  return <h1>Baz</h1>
}

// deeply nested authentication form
// that lives with the regular html
function Form() {
  return (
    <form action="#">
      <label htmlFor="username">
        Username:
        <input type="text" id="username" />
      </label>
      <label htmlFor="" id="password">
        Password:
        <input type="password" id="password" />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}

createRoot(document.getElementById('foo')).render(<Foo />);
createRoot(document.getElementById('bar')).render(<Bar />);
createRoot(document.getElementById('baz')).render(<Baz />);
createRoot(document.getElementById('nested-root')).render(<Form />);

The source code:

multi-root.
nested-root.

The good side of react-scripts

The react-scripts support every we need. The two requirements are src and public folders. If we try to start the dev-server, we will get a message that the public and src folders are missing.

The complete source code is here.

The summarized content

The four examples this repository features:

Alternatively, you can open branches yourself. The examples are part of this repository.

Blog