There are a lot of reference guides that are well documented than mine. The reason behind publishing the guide is, am using this guide as a primary reference point for my future react projects. Before this, I use to keep it as a raw list with some side notes written by hand in a 180-page notebook bought from my nearby store. But is not understandable in any way to my brother when I teach him react.js. and I decide to make one of such useful guides which will also be helpful for my brother in a more useful and meaningful way that any other brother in the world can read and follow.

Disclaimer: I will constantly update this guide when needed. This guide is a blend of best practices and standards that I recommend following.

Things to know and do before creating a React.js project?

1. Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine.
2. NPM - The official Node.js Package Manager.
3. NPX - A Node.js command-line tool that enables npm to execute command-line Node.js tools without having them be installed globally.
4. create-react-app - An NPM package, which is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. also, the easiest way to integrate React into an existing website.

What are the basic setup needs to include other than react project?

1. VS Code - A code editor which is fast, powerful, scalable, and popular.
2. GIT - Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.
3. A Github Account - A social platform for developers, It offers the distributed version control and source code management functionality of Git, plus its own features.

How to Verify my requirement is satisfied or not?

It looks simple, but I encourage everyone to repeat these steps in every project that you create. which I believe is a good practice. The steps may change with the nature of a project, but the key is "Keep your workflow consistent and up to date".

Now am excluding the installation section from here for a while, because he needs to learn how to solve his own problem without my help. so I say the link for every requirement is mentioned in this guide, go and install it by searching on google or watch some youtube videos and see how to install or set up those things.

1. Check GIT version
   git --version

2. Check VS Code editor version
   code --version

3. Create a GitHub account

   github.com/join

4. Checking Nodejs version
   node --version

5. Checking NPM Version
   npm --version

Install create-react-app NPM package globally

npm install -g create-react-app

Create the first project using create-react-app

Here am showing two methods that are helpful in long-term

1. React Project in an empty directory

   npx create-react-app mainproject
   

   

2. React Project in a non-empty directory
   

   My plan: Make a sub project and name it as subproject my mainproject directory. also using an alternative command which is worth learning.
   Why: Maybe in the future, I can use my second project called "subproject" for experimental purposes. That check some features of react or other technologies without touching my mainproject and run the subproject in a different port so I can view both "mainproject" and "subproject" in to save a lot of time in future.
   

Important notes

1. My current directory position is X:/studies/react
2. Am not setting up multiple ports right now and will set up whenever I need my subproject.
3. Can exclude this step. but is good to understand it in the beginning when scaling + learning in mind
4. In production, mostly you don't need a react project inside a react project, you can exclude the directory and files inside by using a .gitignore file. ( In the .gitignore file just add a new line /subproject, that's it ).

cd mainproject
mkdir subproject
cd subproject
npx create-react-app .

OR

cd mainproject
npx create-react-app subproject

Result: subproject created using create-react-app package.

Run the mainproject and see what create-react-app provided as a starting point

In order to run the mainproject in our development environment, create-react-app provides the start command and run it inside our mainproject directory using our terminal.

npm run start

OR

npm start

inside mainproject directory

Now you can view your result by goto localhost:3000 in your browser