Step 1: Install Node.js

The build pipeline you will be building is based in Node.js so you must ensure in the first instance that you have this installed. For instructions on how to install Node.js you can checkout the SO docs for that here

Step 2: Initialise your project as an node module

Open your project folder on the command line and use the following command:

npm init

For the purposes of this example you can feel free to take the defaults or if you’d like more info on what all this means you can check out this SO doc on setting up package configuration.

Step 3: Install necessary npm packages

Run the following command on the command line to install the packages necessary for this example:

npm install --save react react-dom

Then for the dev dependencies run this command:

npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader

Finally webpack and webpack-dev-server are things that are worth installing globally rather than as a dependency of your project, if you’d prefer to add it as a dependency then that will work to, I don’t. Here is the command to run:

npm install --global webpack webpack-dev-server

Step 3: Add a .babelrc file to the root of your project

This will setup babel to use the presets you’ve just installed. Your .babelrc file should look like this:

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

Step 4: Setup project directory structure

Set yourself up a directory stucture that looks like the below in the root of your directory:

|- node_modules
|- src/
  |- components/
  |- images/
  |- styles/
  |- index.html
  |- index.jsx
|- .babelrc
|- package.json

NOTE: The node_modules, .babelrc and package.json should all have already been there from previous steps I just included them so you can see where they fit.