Beginner’s Guide To Setup React v15.4.2 Environment

Like Tweet Pin it Share Share Email
Setup React Environment

Hello, Web Developers.  In today’s AppDividend Tutorial, I have briefly described Beginner’s Guide To Setup React Environment in our local machine.

React.js is an open-source JavaScript framework for building user interfaces developed at Facebook.

Airbnb, Instagram, Flipkart are using React.js for the frontend.

So Let’s Get Started!!

If you want to learn more about React and Redux then check out this React 16.6 – The Complete Guide (incl. React Router & Redux) course.

I  am assuming that you have already install node.js in your machines.

Setup React Environment

Step 1: Create a project folder in your directory.

mkdir react-environment

Navigate to that folder.

cd react-env

Step 2: Create a package.json file to manage all the node dependencies.

For initialization of this file, type following command in your terminal.

npm init

So, your package.json file looks like this.

npm install webpack webpack-dev-server --save-dev

Step 4: Create index.html file.

Create a new file in root folder called index.html

npm run build

It will create a bundled javascript file called “bundle.js.”

Next, we need to configure Babel.js in our webpack environment.

Step 6: Install and set Babel dependencies.

npm install babel-core babel-loader babel-preset-es2015 --save-dev

It will update our package.json file.

npm run buid

App will be running on http://localhost:3000/

Step 7: Install And Configure React and ReactDOM.

npm install --save react react-dom

We also need to use the package called “babel-preset-react” and “babel-preset-stage-3” to use latest ES6 features as well as we can write react code in ES6 syntax.

npm run build

Open the browser and go to this URL:  http://localhost:3000/

“Hello From React v15.4.2.”

This code you can find in Github URL: https://github.com/KrunalLathiya/react-v15.2.4-environment

Now your React Application is running on your port 3000 with all ECMAScript’s Latest features.

Note:  If you find any error during this small setup,

  1. First, check your Node and NPM versions
  2. Check off your dependencies version by comparing package.json file with yours because you might end up with downloading another version of that particular dependencies.

If you have any questions, please ask in a comment below. I am happy to help you out.

Comments (2)

Leave a Reply

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