In this tutorial you will learn about React JS. This is the first tutorial for environment setting. If you wanted to develop a web based application by React JS. Then follow this tutorial.

If you start first-time for project wanted to starts. then you must be needed Nodejs ennvironment. So, goto the nodejs.org is a official website. download and install the environment.

After install you can check your environment. Open Terminal from Linux and MacOS. Or if you are using Windows then you can open command prompt. Use this syntax for check environment.

node -v
// v14.17.3
npm -v
// 6.14.13

After this you can setup reactjs project environments for creating the application.

npx create-react-app e-commerce --template=typescript
cd e-commerce
npm start

Here we are create typescript based application. After this we need to setup bootstrap5 for template designing. Also we are using SASS for advanced css.

Boostrap Setup Process:

npm install bootstrap

You can see the details in video. After then we can setup SASS.

SASS setup process: 

npm install node-sass --save-dev

It install as dev dependency. Also you can see the details in the video.

Now we needs one more package for building sass to css conversion. So you can use bellow command in your project directory.

npm install npm-run-all

This process used for parallel process.  Here I am using node-sass package for dynamic css building that we need sass to css converting process. after then also needs to building react packages for web application buildings. So we need this package also. After it instal we needs some setup in the package.json file.

package.json setup codes

...
"scripts": {
    "build-css": "node-sass src -o src",
    "watch-css": "npm run build-css && node-sass src -o src --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
}
...

This setup is required for paralal processes. you can see the details in the video.

Also we need some bootstrap setup for template designing you can see that details in the video.

So, it is the all about video. I hope you enjoy the video and articles. 

If you like my article. then subscribe your self for more updates. happy coding...