Setting up React with Webpack & Babel

This is going to be a quick tutorial on how to setup Webpack and Babel manually in order to make a working React environment.
Although usually I use boiler plates or create-react-app, understanding how these actually work is important.

To begin..

First create a folder for your react development and then initialize it with NPM

mkdir reactdemo
cd reactdemo
npm init

Now let’s begin by install webpack and webpack-dev-server

npm install webpack webpack-dev-server --save

Webpack is a build tool/bundler that will take our assets such as source code, images, css and turn them into a bundle for our client browser

With webpack installed we need to create a config file for it

In our reactdemo folder create a webpack.config.js and bung in the following

Using the regex specified , any js/jsx files (excluding those in /node_modules) will go through babel.

Next let’s begin using the webpack-dev-server

In package.json add the following section in scripts:

...
"scripts": {"start": "webpack-dev-server"}
...

Now if you run in the root ‘npm start’, it should start up the webpack dev server. This will make our client available on http://localhost:8080, recompiling each time we make alterations to our source files.