The Minimal React Project Setup using Webpack 2 and Babel

There are a good number of starter kits available for creating React projects. Starter kits are useful but most of them are black boxes, they improve the productivity once the developers have the understanding of how the stuff works.

The goal of this blog post is to explain how to create basic React project using Webpack 2 and Babel from scratch step by step.

Create project folder


mkdir react-basic-project
cd react-basic-project
npm init

Install React and React DOM packages


npm install --save react
npm install --save react-dom

Install Webpack 2 and Webpack Dev Server


npm install --save-dev webpack@2
npm install --save-dev webpack-dev-server@2

Install Babel Core and Babel Loader


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

  • babel-core is the Babel compiler
  • babel-loader is the Webpack plugin for Babel

Install Babel presets for ES2015 and React


npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

  • babel-preset-es2015 is the Babel preset for all ES2015 plugins
  • babel-preset-react is the Babel preset for all React plugins

We have all the required npm packages, let’s write some code. First, we need to create Babel configuration in .babelrc file to tell Babel how to transpile our ES2015 and JSX code.


touch .babelrc

Add the following configuration to .babelrc file.


{
  "presets": ["react", ["es2015", { "modules": false }]]
}

Lets create Webpack configuration file webpack.config.js.


touch webpack.config.js

Add the following configuration to webpack.config.js file.


module.exports = {
  entry: './src/app',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Here is the hello world React code.

src/helloworld.js


import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (<h1>Hello, React World!</h1>); 
  } 
} 

export default HelloWorld;

src/app.js


import React from 'react';
import { render } from 'react-dom';

import HelloWorld from './helloworld';

render(<HelloWorld />, document.getElementById('app-root'));

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Hello World</title>
</head>
<body>
  <div id="app-root"></div>
  <script src="bundle.js"></script>
</body>
</html>

You can find the sample code here.

How to use Node and NPM without installation or admin rights

There are a lot of blog posts explaining this already, but most of them didn’t work for me. They miss one critical step, in this blog post I am going to provide instructions step by step how to use Node and NPM without installation or admin rights. I am going to provide the instructions for windows; we can follow the same process for other operating systems (macOS, Linux).

Step 1: Get node binary (node.exe) from nodejs.org site

  • Go to https://nodejs.org/en/download/ site, then from the downloads table download the Windows Binary 32-bit or 64-bit depending on your operating system.
  • Now copy the file node.exe to your favourite location. In my case, I created a folder named nodejs under the Tools folder in the root of my C drive (C:\Tools\nodejs\).

Step 2: Get the NPM

  • Go to https://github.com/npm/npm/releases site, then download the latest stable version of NPM. You can find the zip file under downloads section at the bottom of the page.
  • Extract the zip file and rename the extracted folder to npm.
  • Now go to C:\Tools\nodejs\ (in your case which ever the folder you copied the node.exe file), create a folder called, node_modules then copy the entire folder npm folder from the previous step the node_modules folder.

Step 3: Copy npm.cmd beside the node.exe

  • This is the very important step everyone misses, go to C:\Tools\nodejs\node_modules\npm\bin\ folder. Under the bin folder you will find the npm.cmd file.
  • Copy the npm.cmd file and place it beside the node.exe from step 1. In my case I am copying the npm.cmd file to C:\Tools\nodejs\ folder.

Step 4: Configure the PATH

  • We need add the node.exe and npm.cmd to system path, so that we can access them from any where.
  • Now append the path C:\Tools\nodejs; to PATH variable in Environment Variables.
  • We can access the Environment Variables dialog, by right clicking on the Computer > Properties > Advanced system settings > Advanced tab > Environment Variables.
  • Incase if you don’t have permission to access Environment Variables dialog, simply type the following command in Run dailog rundll32 sysdm.cpl,EditEnvironmentVariables, this will open the Environment Variables dialog.

Step 5: Verify the nodejs and npm setup

  • Go to command line then type node -v then npm -v. These commands should display the currently configured nodejs and npm versions respectively.

command prompt

We configured the node and npm without installation or admin rights, now you can happily use them.

Running Gulp Tasks from Visual Studio Code

I recently started running my gulp tasks directly from Visual Studio Code instead of command line, I am going to explain how to do that.

Step1: Make sure your project has Gulpfile.js or gulpfile.babel.js

Step2: In Visual Studio Code once you open the project, press CMD + SHIFT + P (CTRL + SHIFT + P in Windows), this open the Command Pallet.

command palette

Step3: In Command Pallet type Configure Task Runner or CTR then select Configure Task Runner.

command palette tasks

Step4: Above step will show the list of task runners supported by Visual Studio Code, select Gulp form list.

gulp task

Step5: Above step will create a tasks.json file under .vscode folder in your project.

tasks json

Step6: Now launch Command Pallet once again by by pressing CMD + SHIFT + P (CTRL + SHIFT + P in Windows), type Run Task and select it.

command palette run task

Step7: Above step will display the list of task in your Gulp file.

gulp tasks

Step8: You can select any task from the list. I am select the default task from gulp tasks, you can see the default task running below.

gulp default task

If you want stop any currently running task in Visual Studio Code, go to command pallet then select Terminate Running Task. We follow the same process to run the tools like Ant, Gulp, Make, Maven, MSBuild, NPM, Jake or any tool we can run from command line in Visual Studio Code.

Destructuring in ECMAScript 2015

Destructuring is a new feature in ECMAScript 2015. Destructuring allows binding a set of variables to a corresponding set of values (objects and arrays) anywhere we can bind a value to a single variable. Today we are already doing destructuring (extracting values) almost in every JavaScript program, but we do it manually. To understand destructuring in ECMAScript 2015 completely, let’s look at an example how are we doing destructuring today (pre ES2015).

Destructuring manually

We can destructure (extract values) from person object manually using dot notation or array notation.


var person = { name: 'Shravan', age: 27 };
var name = person.name;
var age = person.age;


We can destructure (extract values) from numbers array manually using indexes.


var numbers = [1, 2, 3, 4, 5];
var one = numbers[0];
var two = numbers[1];


We construct objects using {} (object literal syntax) and arrays using [] (array literal syntax), on the right hand side of assignment operation. We can use same syntax on left hand side of assignment operation for destructuring objects and arrays.

(more…)