React-Scripts from an empty directory
Tags: react, javascript, webdev
Published: 2022-06-09 20:53:00

---
canonical_url: https://faun.pub/react-scripts-from-an-empty-directory-7ef7c348cb16
---
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](https://nodejs.org/en/), [NPM](https://www.npmjs.com/), and [Yarn](https://yarnpkg.com/).

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

## Initial setup

I did the following steps to set up the project:

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

The **package.json** content.

```JSON
{
  "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:

```JS
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](https://github.com/srele96/react-app-setup/tree/initial-setup).

## 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
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:

```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:

```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](https://github.com/srele96/react-app-setup/tree/multi-root).
- [nested-root](https://github.com/srele96/react-app-setup/tree/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](https://github.com/srele96/react-app-setup/tree/css).

## The summarized content

The four examples this repository features:

- [Initial Setup](https://github.com/srele96/react-app-setup/tree/initial-setup).
- [Multi-Root](https://github.com/srele96/react-app-setup/tree/multi-root).
- [Nested Root](https://github.com/srele96/react-app-setup/tree/nested-root).
- [CSS](https://github.com/srele96/react-app-setup/tree/css).

Alternatively, you can open branches yourself. The examples are part of this [repository](https://github.com/srele96/react-app-setup/tree/main).