Creating React apps from scratch

starting a React app without create-react-app

notes2024-08-03 15:25

visit URL

Many tutorials mention create-react-app to beginners of React, which often includes redundancies and intimidating stuff on the side ... however, another way exists! For a more bare-bones approach, we can follow this "big bang to life" procedure:

  • initialize the project with a package.json file
  • install a few dependencies (including react)
  • create the foundational public/index.html file
  • create our foundational index.js entry point file
  • create our App file
  • create other component files

Initializing the project

This applies not only to React projects but to any web project!

On a new folder, e.g. jonotype, we will enter this following command on Terminal:

1$ npm init -y

This creates a file named package.json that describes our new web app:

1// jonotype/package.json
2
3{
4  "name": "jonotype",
5  "version": "1.0.0",
6  "description": "",
7  "main": "index.js",
8  "scripts": {
9    "test": "echo \"Error: no test specified\" && exit 1"
10  },
11  "keywords": [],
12  "author": "",
13  "license": "ISC"
14}

We can do a few modifications:

1// jonotype/package.json
2
3{
4  "name": "jonotype",
5  "version": "1.0.0",
6  "description": "",
7  /* here */
8  "main": "src/index.js", 
9  "scripts": { 
10    /* here */
11    "start": "react-scripts start", 
12    "build": "react-scripts build", 
13    "test": "react-scripts test --env=jsdom",
14    "eject": "react-scripts eject" 
15  },
16  /* here */
17  "browserslist": [
18    ">0.2%",
19    "not dead",
20    "not ie <= 11",
21    "not op_mini all"
22  ],
23  "keywords": [],
24  "author": "",
25  "license": "ISC"
26}

Updating the entry point

We update the main property from index.js to src/index.js just to keep our files more organized!

Adding npm run scripts

We then include our npm run scripts - these enable us to run a local version of our app (webpage)!

Adding browserslist

The browserslist property just excludes any ancient browsers like Internet Explorer!

Installing the dependencies

Now, we can install three dependencies (for now) which allow us to use the React library and family of scripts:

1npm install react react-dom react-scripts

Upon installation our package.json automatically updates to something like this:

1// jonotype/package.json
2
3{
4  "name": "jonotype",
5  "version": "1.0.0",
6  "description": "",
7  "main": "src/index.js",
8  "scripts": {
9    "start": "react-scripts start",
10    "build": "react-scripts build",
11    "test": "react-scripts test --env=jsdom",
12    "eject": "react-scripts eject"
13  },
14  "browserslist": [
15    ">0.2%",
16    "not dead",
17    "not ie <= 11",
18    "not op_mini all"
19  ],
20  "keywords": [],
21  "author": "",
22  "license": "ISC",
23  /* this got updated */
24  "dependencies": {
25    "react": "^18.2.0",
26    "react-dom": "^18.2.0",
27    "react-scripts": "^5.0.1"
28  }
29}

(The dependencies property adds in react + react-dom + react-scripts !)

Creating the foundational HTML file

Once we let those dependencies install, we can create a new folder called public, in which we can place our foundational index.html file:

1<!-- jonotype/public/index.html -->
2
3<!DOCTYPE html>
4<html lang="en">
5
6    <head>
7
8        <meta charset="utf-8">
9        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10        <title>React App</title>
11
12    </head>
13
14    <body>
15
16        <noscript>
17            y u no use javascript? 
18        </noscript>
19
20        <div id="root"></div>
21
22    </body>
23
24</html>

Briefly, this minimal HTML file consists of:

  • the <head> tag for technical meta data
    • character set
    • browser sizing
    • <title> bar text
  • the <body> tag which has
    • <noscript> warning because React apps require JavaScript (which everyone should have enabled on their browsers)
    • <div id="root"></div> the most important part here, where the React app lives!

Creating the foundational index.js file

Now, we will connect the foundational HTML file with a foundational JavaScript file; this src/index.js file also happens to import the React scripts:

1// jonotype/src/index.js
2
3/* dependencies */
4import { StrictMode } from "react"
5import { createRoot } from "react-dom/client"
6import App from "./App"
7
8/* manipulation of the index.html DOM */
9const rootElement = document.getElementById("root")
10const root = createRoot(rootElement)
11
12/* displaying the React virtual DOM */
13root.render(
14  <StrictMode>
15    <App />
16  </StrictMode>
17)

Note that errors will occur because we have not created the App code yet, which will do in the next section!

Also note:

  • StrictMode is a built-in component of React which outputs errors in the browser's console concerning any problems inside the <StrictMode></StrictMode> tag
  • createRoot builds upon the DOM in index.html

Creating the App.js file

Finally, let's get some real visible code going by starting a new file src/App.js:

1/* jonotype/src/App.js */
2
3export default function App() {
4  return (
5    <div>
6      <h1>Hello!</h1>
7      <h2>Let's begin our React App!</h2>
8    </div>
9  );
10}

Breaking that down:

  • export means we can use this file in other files
  • default means that when we import this file elsewhere we do not have to call it App :
1/* jonotype/src/index.js */
2
3import { StrictMode } from "react"
4import { createRoot } from "react-dom/client"
5
6/* instead of */
7// import App from "./App"
8
9/* we can do this because we used "default" in App.js */
10import Whatever from "./App"
11
12const rootElement = document.getElementById("root")
13const root = createRoot(rootElement)
14
15root.render(
16  <StrictMode>
17    <Whatever />
18  </StrictMode>
19)

Creating other component files

Creating child components keeps our code more organized and "modular", so let's give this a try with src/Component.js, with CamelCase as the convention for component files:

1/* jonotype/src/Component.js */
2
3export function Component() {
4  return (
5    <div>
6      <p>A child component!</p>
7    </div>
8  );
9}

Notice how we did not say export default function Component() there!

Then, going back to src/App.js we then import and render Component.js:

1/* jonotype/src/App.js */
2
3import { Component } from './Component.js'
4
5export default function App() {
6  return (
7    <div>
8      <h1>Hello!</h1>
9      <h2>Let's begin our React App!</h2>
10      <Component />
11    </div>
12  );
13}

Some things to notice here:

  • We use curly braces for { Component } to extract the function Component from src/App.js
  • We cannot replace Component with another name because we did not specify it as an export default back in src/Component.js
  • Sometimes, specifying a default in a child component helps if we wish to rename the child component later on

Aliasing the imported component

If we want an imported component to have a different name, then we could still give it an alias using the as operator in the import statement:

1/* jonotype/src/App.js */
2
3import { Component as Whatever } from './Component.js'
4
5export default function App() {
6  return (
7    <div>
8      <h1>Hello!</h1>
9      <h2>Let's begin our React App!</h2>
10      <Whatever />
11    </div>
12  );
13}

Oftentimes, we would need to do this if there exist naming conflicts!

Running our app

Finally, we can run our app! In Terminal, we would simply run the following command:

1npm start

We should see something like:

1Compiled successfully!
2
3You can now view jonotype in the browser.
4
5  Local:            http://localhost:3000
6  On Your Network:  http://192.168.0.153:3000
7
8Note that the development build is not optimized.
9To create a production build, use npm run build.
10
11webpack compiled successfully

Then, from our browser, we go to localhost:3000 and we should see the page!

Notice the relationship of components

  • "A child component!" lives in src/Component.js
  • src/Component.js gets imported by src/App.js
  • src/App.js gets imported by src/index.js
  • src/index.js builds upon public/index.html

Clearly, the powerful implications of React components already appear in this very basic static "app" in terms of:

  • re-usability
    • we could include <Component /> as many times in as many places as we wish, in src/App.js
  • division of labour
    • if we want to expand upon src/Component.js we could do so without affecting the rest of src/App.js
  • portability
    • keeping things in smaller components makes code easier to read

Moving on

We have covered quite a bit here, starting from nothing and ending with a basic static app - but more exciting topics lie ahead! More, such as:

  • building the app
  • deploying the app to the internet
  • creating dynamic components
  • building the illusion of a multi-page website through routes

Developers never get bored!

(By the way, you can see the final product in https://github.com/joncoded/jonotype)

moods :reactjavascriptoverviewsbeginnersbasicscodingcodex
newer post
On messaging
older post
The "ends" of web development