Let’s create a React app from scratch

Mihara Inuri
4 min readMay 13, 2022


~Welcome back with another post…

You can easily create a react app using following command

npx create-react-app [your project name]

But here we are going to create a react app from scratch so you can get a better understanding…

Before start creating, make sure you have installed node and npm.

you can check the installed versions using following commands..

node -v

Step 1: Create a folder & open that created folder from your favorite IDE. And then open the Terminal from that folder location.

Step 2: Initialize the npm directory using,

npm init -y

Here, we use -y in order to skip the initialization questions.

Now you have got the package.json file.

Step 3: Create a src directory inside the created folder to keep the source codes for the project.

Step 4: If you want to connect the project with the version controller, use the command,

git init            

Then create a .gitignore file to keep the files which won’t track by Git.

ex: node modules, .env

Step 5: Run the following command

npm install -D eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

eslint-plugin-import => to check imports for errors

eslint-plugin-jsx-a11y => helps to write accessible jsx for screen reader

eslint-plugin-react => to understand react syntax

Step 6: Create .eslintrc.json file and add following codes in it.

//the order of the "extends" array matters.
"extends": [
"eslint:recommended", //loads all of the eslint:recommended rules including white space rules.
"plugin:import/errors", //https://www.npmjs.com/package/eslint-plugin-import
"plugin:react/recommended", //https://www.npmjs.com/package/eslint-plugin-react
"plugin:jsx-a11y/recommended", //https://www.npmjs.com/package/eslint-plugin-jsx-a11y
"prettier" //turns off the eslint white space rules and other rules it knows how to handle specifically.
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
"react/prop-types": 0, //turns off props types '0' means turn off
"react/react-in-jsx-scope": 0 //turns off requiring to import react in every file
"parserOptions": {
"ecmaVersion": 2021, //use the most modern version.
"sourceType": "module", //we will be using ES Modules
"ecmaFeatures": {
"jsx": true //we will be using JSX
"env": {
//describe the environment this code will run in
"es6": true, //eslint won't throw error if we try to use es6 methods like map() or reduce().
"browser": true, //eslint won't throw errors if we use fetch() or the window object
"node": true //eslint won't throw erroes if we try to access things in a node environement like 'golbal' or 'process'.
"settings": {
"react": {
"version": "detect" //tells eslint to look at the package.json and figure it out
~By @RyanCahela

The above code includes the comments which explain the reason for each line of code.

Step 7: Run following command to install react & react-dom

npm install react react-dom

Step 8: Install parcel using following command

npm install -D parcel

Step 9: Add following script to package.json to point parcel to your project index file.

"scripts": {
"dev": "parcel src/index.html"
  • Note: If you don’t use parcel, you can use babel package.

Step 10: Inside src folder, create the following 3 files

  • index.html => Inside index.html, create a div with the id of root & a script tag pointing index.js with type module attribute
<div id="root"></div>
<script src="index.js" type="module"></script>
  • index.js => Inside index.js, import react-dom, import App from attach app to the root element by calling reactdom.render
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
  • App.js => Inside App.js, create a function called app that returns a jsx with what you want to return
function App() {
return <h1>Hello REACT</h1>;

Step 11: Save the project & run

npm run dev

Step 12: Go to the localhost 1234

Now You can see your react app working successfully…👏


We just briefly learned how to create a react app from scratch.

That’s it for now, and please press the clap button if you find this article helpful.

Special thanks to @RyanCahela



Mihara Inuri

A Software Engineering Undergraduate