Let’s create a React app from scratch

~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
npm -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…👏

Conclusion

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