Posted on • Edited on • Originally published atfaun.pub
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 installNodeJS,NPM, andYarn.
- Install NodeJS LTS versionhttps://nodejs.org/en/.
- Run
npm --versionto 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 filepackage.json.
- Run
yarn installin the directory you created. - Create a public directory andindex.html inside.
- Create an src directory and anindex.js inside.
Thepackage.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"]}}Theindex.js content:
import{createRoot}from'react-dom/client';functionApp(){return<h1>ReactAppSetup</h1>}createRoot(document.getElementById('root')).render(<App/>);The complete project setup with source code ishere.
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.htmlindex 6672ed0..b5ed2a2 100644--- a/public/index.html+++ b/public/index.html@@ -4,6 +4,8 @@ <title>React App Setup</title> </head> <body>- <div></div>+ <div></div>+ <div></div>+ <div></div> </body> </html>diff --git a/src/index.js b/src/index.jsindex 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><htmllang="en"><head><title>React App Setup</title></head><body><divid="foo"></div><divid="bar"></div><divid="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 --><divid="nested-root"></div></div></div></div></article></body></html>JS:
import{createRoot}from'react-dom/client';functionFoo(){return<h1>FooRoot</h1>}functionBar(){return<h1>Bar</h1>}functionBaz(){return<h1>Baz</h1>}// deeply nested authentication form// that lives with the regular htmlfunctionForm(){return(<formaction="#"><labelhtmlFor="username">Username:<inputtype="text"id="username"/></label><labelhtmlFor=""id="password">Password:<inputtype="password"id="password"/></label><buttontype="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:
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 ishere.
The summarized content
The four examples this repository features:
Alternatively, you can open branches yourself. The examples are part of thisrepository.
Top comments(1)
For further actions, you may consider blocking this person and/orreporting abuse
