Latest Code Tutorials

Beginner’s Guide To Setup React v15.4.2 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.

  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "KRUNAL LATHIYA",
  "license": "ISC"

Step 3: Install webpack and webpack-dev-server.

We need two things

  1. Webpack: to bundle all of our javascript files into one file and host that file on the server.
  2. Webpack Development Server: We need this server to recompile our main javascript file every time we change and provide us one server.

Install locally for our project type

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

Step 4: Create index.html file.

Create a new file in root folder called index.html

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>React v15.4.2 ES6 Environment</title>
    <script type="text/javascript"  data-src="bundle.js"></script>

Here we have included only one javascript file called bundle.js in our HTML page, which is bundled by Webpack.
Create a directory called app in the root folder.

In the app directory, create a new javascript file called app.js.

Write only one line of code in the main.js file.

// main.js

console.log('Inside app folder');

Step 5: Configure webpack.config.js file in a root directory.

In the webpack.config.js file, we need to export all the webpack settings by exporting javascript object.


module.exports = {
    entry: ['./app/main.js'],
    output: {
        filename: 'bundle.js'

Here we need some explanations right?

Basically, module.exports export an object, which describes our webpack configuration for our object.

The object contains two properties.

entry: – which represents our entry javascript file for the project. In our case It is  js6 > app > main.js

output: – the output bundled file, which we have to include in our main HTML file called bundle.js

Go to the package.json file and edit the following JSON property.

"scripts": {}

We add a new property  called “build” and value called “webpack-dev-server.”

  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  "author": "KRUNAL LATHIYA",
  "license": "ISC"

Go to the terminal in your root project folder and type following command.

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.

  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"

babel-core and babel-loader is the dependency, which transpile the ES6 code to ES5

babel-preset-es2015 let us use some advanced feature of ECMAScript in our web applications.

Update our webpack.config.js file.

webpack.config.js file looks like this.


module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    module: {
        loaders: [
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
    devServer: {
        port: 3000

Here we have added module object, which has loaders property.

It will accept an array of loader configuration, like which loader we want to use and which file we have to test with the extension .js and which file we need to exclude from transpiling from es6 to es5 like “node_modules” folder.

Also, I have added one optional attribute called devServer.

It includes the port number on which we need to host our app. by default webpack-dev-server provides port 8080.

But we can change it and put port 3000.

So now when you run again command

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 install --save-dev babel-preset-react babel-preset-stage-3

Your package.json file is updated and will look like this.

  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-3": "^6.22.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"

We need to create one file in root directory called .babelrc

This file contains one object configuration which includes which Babel configuration of the array we are using.

  "presets": ["es2015", "react", "stage-3"]

Step 8: Create a component file App.js inside components folder.

Create one directory inside an app folder called components

In that create one file called App.js (react-environment > app > components > App.js)


import React, { Component } from 'react';
export default class App extends Component {
        return (
                Hello From React v15.4.2

Step 9: Import App.js file into main.js file.

We need to import this file into our main.js file.


import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

Our final application directory structure looks like this.

Beginner's Guide To Setup React v15.4.2 Environment123


main.js  is the file, which will be transpile by Babel and bundled by webpack.

You can restart your server and type

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:

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.

  1. Scott says

    Couple of things.
    One: You mix up app.js and main.js when initially saying to create main.js
    Two: You never say to update index.html to include the app entry point, causing the following error
    bundle.js:311 Uncaught Error: _registerComponent(…): Target container is not a DOM element.

    For those reading, if you include this line below your bundle.js include it will become functional:

    Otherwise, if followed exactly these instructions do not end with a functional environment.

    1. Krunal says

      I guess, you completely don’t understand the point. App.js is our React component file. It is included in the main.js file. So both file needs to be separated for better components handling. After all, at last, we only need to compile a main.js file with the webpack.

  2. Scott says

    Err, my tags got trimmed.

    You need to add a div with the ID of ‘app’ ABOVE (I was incorrect saying below, otherwise your div will not be rendered when the JS file runs) the bundle.js include.

  3. baku says

    hello can’t resolve jsx extension.

  4. Gerik Peterson says

    This was great. Thanks. 🙂 I’ve been playing around with React for a while but keep jumping into full blown examples rather than examining the basics. This was very helpful.

    One typo I’ve noticed: you mix up the names between app.js and main.js at the point below. I think you’re intending to say main.js all throughout here as App.js is the component file you create later.

    Here is your text:

    In the app directory, create a new javascript file called app.js.

    Write only one line of code in the main.js file.

    console.log(‘Inside app folder’);

  5. Nelson says

    The other two comments regarding main.js and app.js are for step #4, which you thought are for step # 8.

    Step #4: index.html is missing div id=”app”, which is required for React later on.
    Step #5, I had error and install webpack-cli to fix it.
    Step #6, I had error: ‘configuration.module has an unknown property ‘loaders’ — I found that ‘loaders’ is no longer allowed. I replaced ‘loaders’ with ‘rules’ and kept the other code the same. (Note that it is loaders with an ‘s’ – loader without the ‘s’ on the next line is the same.) When I run npm run build. It works

    I got to the end of the tutorial to display the page, but with warning that bundle.js is exceeding file limit of 244 kib.

    1. Krunal says

      I guess, you need to check your current react version with my version. React js has currently 16.3.1 version. So it is better to use create-react-app CLI for generating React application.

    2. Nismeh says

      Thanks, I was wondering for loaders only.

      @Kunal : It helpeed a lot to do set up and start learning. Yes due to update versioning we need to do hit and run to get set up done as suggested by other users. But that’s file Not your fault at all.

  6. Abrar says

    Hey Krunal,

    Thanks for your great tutorial. I am seeing this after going exactly as you said.

    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
    Module not found: Error: Can’t resolve ‘./src’ in ‘C:\reactApp’
    @ multi (webpack)-dev-server/client?http://localhost:8080 ./src

    And see instead of mentioning in webpack.config.js file to use port 3000 its using 8080. So i think this is not reading this config file at all.

    Please help me with a solution.


    1. Krunal says

      Please refer my webpack 4 tutorial.

  7. Kenil Gandhi says

    some missing points are there but overall nice article.

  8. Durga says

    My node version is 11.8.0 V and my npm version is 6.5.0 V .Because of this version comparision ,is there any issue will get while executing the react program.

    I installed current version of node and started your steps to setup reactjs enivornment.But i am getting error is,
    Module build failed (from ./node_modules/babel-loader/lib/index.js):Error: Cannot find module ‘@babel/core’

  9. Jomy Luke Xavier says

    I am getting below Error. Pls help me how to sort out this

    > react-environment@1.0.0 build G:\Workspace\MyReactProjects\react-environment
    > webpack-dev-server

    i 「wds」: Project is running at http://localhost:3000/
    i 「wds」: webpack output is served from /
    i 「wds」: Content not from webpack is served from G:\Workspace\MyReactProjects\react-environment
    × 「wdm」: Hash: 5547e92bae66da4ff6a2
    Version: webpack 4.33.0
    Time: 742ms
    Built at: 06/05/2019 9:47:01 PM
    Asset Size Chunks Chunk Names
    bundle.js 357 KiB main [emitted] main
    Entrypoint main = bundle.js
    [1] multi (webpack)-dev-server/client?http://localhost:3000 ./app/main.js 40 bytes {main} [built]
    [./app/main.js] 1.53 KiB {main} [built] [failed] [1 error]
    [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
    [./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
    [./node_modules/html-entities/index.js] 231 bytes {main} [built]
    [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
    [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
    [./node_modules/webpack-dev-server/client/index.js?http://localhost:3000%5D (webpack)-dev-server/client?http://localhost:3000 4.29 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.04 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
    [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
    [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    + 19 hidden modules

    ERROR in ./app/main.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    Error: Plugin/Preset files are not allowed to export objects, only functions. In G:\Workspace\MyReactProjects\react-environment\node_modules\babel-preset-es2015\lib\index.js
    at createDescriptor (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
    at G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-descriptors.js:109:50
    at ()
    at createDescriptors (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (G:\Workspace\MyReactProjects\react-environment\node_modules\@babel\core\lib\config\partial.js:85:55)
    @ multi ./app/main.js main[0]
    i 「wdm」: Failed to compile.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.