Creating React Project from scratch

4 min readMay 5, 2021

You often use something like

npm create-react-app react-app

This is absolutely fine but it contains modules you dont need. What if we could make our own react project from scratch? Which takes few seconds to render? Which only contains the modules you need? Lets start!

Prerequisites

Node JS
A Code Editor ( I prefer Visual Studio Code)

Folder Structure

First we will create two folders:

public : which will contain the html file of our project
src : this will contain two sub folders which will have our project’s components and styling. This is a user preference so you can keep them in one folder or divide them.

Inside ‘src’ :

Now we will take a look at the files which we will be creating

Inside Public we have:

index.html //This will act as a main file which will take the react components.style.css //This will contain the styling of the index.html . But we will not touch it as we will be styling the components instead.

index.html will contain something like this

<!DOCTYPE html>
<html lang=”en”>
 <head>
  <meta charset=”UTF-8">
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  <meta name=”viewport” content=”width=device-width, initial-         scale=1.0">
  <title>Document</title> //Add your Website's Title
 </head>
 <body>
  <div id=”root”></div> //You can name this div anything.
  <script src=”../src/index.js”></script> //Necessary script for   react.
 </body>
</html>

[In VSC you can use emmet abbreviations. So the above code can be written just within seconds using ] :

html:5

Lets look at files in src:

as you can see we are running a script inside html , we will be creating that. index.js will render the react components using react-dom module. (Dont get it? will be understood soon.)

It will have something like:

import React from "react";import reactdom, { render } from "react-dom"; import App from "../Components/App"; //Will be created.render(<App />, document.getElementById("root")); //Here we are fetching the root div from the index.html and rendering App.js Component.

Now we will take a look at the Components folder :

This will contain our components (like we know each problem can be divided into subproblems , we divide a website into components so that we can have modularity and it is easier for user to edit/add new functions to the site.)

The main component will be App.js

Notice we have <App /> in index.js? we are rendering a single file which is containing multiple components so that our browser do not render each component each and every time we click something.

App.js will have something like this :

now in this <div> we can add Components according to our preference. For example

<div>
  <>
   <Header/>
   <Main Body/>
   <Footer />
  </>
</div>

[Dont forget to import them at the top.]

Styles Folder will contain all the styling files of each components.

Initializing npm project

Before installing the packages , we have to initialize the project. We will use

npm init -y

This will create npm project with default properties. You can also use this command without -y for modifying the properties.

Installing packages

We made all the files we need. Now lets take a look at the modules which we will use for starting the project.

First command will be

npm install react

Next we will install react-dom

npm install react-dom

The last command will be for running the website locally.

npm install -D react-scripts

This will install react-scripts as dev dependencies because we are using this package locally to test the website , we wont be needing it when we deploy the website somewhere.

Now we have to add few commands of react-scripts which we will use to start the project locally. Inside package.json