Basic React Dev setup using npm or yarn and webpack

Setting Up ReactJS Environment

Heres a basic react js dev setup (Level : Beginner)

 Create a directory and go to the root of the directory

mkdir my-react-dir

cd my-react-dir

Install npm

brew install npm  // installs node

or  you can download it directly from NodeJS.org

If Yarn is what you like then ←

Install Yarn

brew install yarn  // installs node

brew install yarn --without-node

Initialize Package.json

npm init

OR

yarn init

Go with the default options.

cat package.json

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

Install webpack and webpack-dev-server using npm or yarn

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

OR

yarn add webpack webpack-dev-server  -D

Add an index.html

touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Environment Setup</title>
</head>
<body>
    <h3>Setting the React Env</h3>
    <div id='app'></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Add an index.js file

mkdir app

cd app

touch index.js

Add to index.js this single line

//index.js
console.log("Hello React");

Configure WebPack

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

Install and set Babel dependencies

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

OR

yarn add babel-core babel-loader babel-preset-env -D

  • babel-core and babel-loader is the dependency, which transpile the ES6 code to ES5
  • Use babel-preset-env instead of babel-preset-es2015. babel-preset-env let us use some advanced feature of ECMAScript in our web applications.

Update package.json

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

Update WebPack config:

module.exports = {
    entry: ['./app/index.js'],
    output: {
        filename: 'bundle.js'
    },
module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
devServer:{
port:9000
}
};

Run the dev server

npm run build

OR

yarn build

This will run the build script defined in package.json which internally will invoke web pack dev server . 

App will be up on http://localhost:9000/

Install and configure React and ReactDOM

We would also need to get the package called “babel-preset-react” and “babel-preset-stage-3” to use latest ES6 features and to write react code in ES6 syntax

npm install --save react react-dom

OR

yarn add react react-dom

npm install babel-preset-react babel-preset-stage-3 --save-dev

OR

yarn add babel-preset-react babel-preset-stage-3 -D

The package.json should look like this :

{
  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

Create a file .babelrc in root directory and add the following to it:

{
  "presets": ["env", "react", "stage-3"]
}

Create a component file App.js inside components folder 

cd app

mkdir components

touch app.js

Add the following to app.js

//app.js
import React, { Component } from 'react';
export default class MyApp extends Component {
    render(){
        return (
            <div>
                The React Env is now set. Served from react component.
            </div>
        );
    }
}

Import App.js file into index.js file

//index.js
//console.log("Hello React");
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));

 

Now just run the dev server (npm build or yarn build)  and launch http://localhost:9000 in your browser

This is a basic react dev setup to get started and going.

You could add rules to your web pack for minification, compression and all.

Personally I found Yarn (from Facebook) to be much faster than npm for installing node modules.

Posted in Generic, Web Technology

Leave a Reply

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

*