ReactJS – Environment Setup

Pre-requirements: 

Nodejs: We will need nodejs to setup reactjs environment. If you have not installed yet, please download and install it from  https://nodejs.org/en/download/

React Setup:

Once you installed nodejs, Install Reactjs using the command prompt(cmd)

npm install -g create-react-app

Above cmd will install reactjs globally in our system (-g for global).

Create react project:

After successful installation of reactjs, now we can create our reactjs project using

npx create-react-app my-app

npx is a package runner tool that comes with npm 5.2+.

After creating reactjs project npm automatically trigger the installation of react-scripts, rect-dom and react packages. if not you can install it manually using below command(go to project root for manual installation, cmd cd my-app).

npm install react react-dom react-scripts –save

–save parameter will save npm package in package.json file.

When everything went smoothly then we just need to start our reactjs project using,

npm start

It will start our development server on default port 3000, i.e. http://localhost:3000. the application will open in our default browser. whatever changes your doing on files after save it compile automatically and reflect changes on a browser without manual reloading.

When we have done with our development, we need to deploy our project on a server for this we require production build for deployment.

We create our production build using

npm run build

It will create a build folder in our project root folder. for deployment, we just need to move that folder on our server as it is.

I hope you understood all of the above steps.

All the above steps are with default configuration. if you want to add some custom configuration you can use cmd.

npm run eject

It will copy all the configuration files and the dependencies (Webpack, Babel, ESLint, etc) in your root folder(config).

Note: this is a one-way operation. Once you eject you can’t go back!

 

Thats all !!!!. Hopes this will help you to set up your reactjs environment and create your reactjs application.

Best Luck….


 

 

Leave a Reply

Your email address will not be published. Required fields are marked *