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

module.exports = {
	
	entry: {
		app: './src/app.js'
	},
	output: {
		path: __dirname,
		filename: "public/build/app.bundle.js"
	}

}

The important parts here are entry and output. Entry is the entrypoint to the application and output contains the keys regarding where our bundle were will be created.

Next let’s create a src folder in our root, and within there create 2 files, app.js and index.html. For now leave these blank. After that, create the folders public/build , as in the config file

So you should now have:

/public
/build
/src
- app.js
- index.html
package.json
webpack.config.js

Next we are going to put the following into our index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Demo</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

The div tag with id root is going to be where our React root component goes. This will be clearer further on.

Here we need to install another node package.

npm install html-webpack-plugin --save

This package simplifies the means by which our bundle will be integrated into our HTML file.

After it has installed, alter webpack.config.js to include the following:

const HtmlWebpackPlugin = require('html-webpack-plugin');


const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
})


module.exports = {
	
    entry: [
        "./src/app.js"
    ],
	output: {
		path: __dirname,
		filename: "public/build/app.bundle.js"
	},
	plugins: [HtmlWebpackPluginConfig]

}

You will see we have configured the plugin, told it which html file we intend to use and then added it to module.exports.

To test everything is working, enter the following into /src/app.js

alert('GA GARRR!')

Now if you go to the project folder in terminal and enter ‘Webpack’…

webpack

Checking the root folder you will now see an index.html file has been created which contains our src/index.html template file, but with an inserted script tag referencing our bundle.

If you run this index.html file you should get the alert box indicating that our JS is being bundled correctly.

The next thing we need is Babel. Although everyone should be using ES2015 and above, older browsers may not support it. To get around this we can use Babel to transpile our modern JS into older JS.

Let’s install the Babel packages we need

npm install babel-loader babel-core babel-preset-env babel-preset-react 

Next we will create a config file for Babel. In our application root create .babelrc and enter in our presets as follows:

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

We now need to edit our webpack config file so that it uses Babel when dealing with js and jsx files.

...
module.exports = {
    entry: [
        "./src/app.js"
    ],
	output: {
		path: __dirname,
		filename: "public/build/app.bundle.js"
	},
	plugins: [HtmlWebpackPluginConfig],
    module: {
    	loaders: [
      		{ test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ }
    	]
  	},
    resolve: {
        extensions: ['.js', '.jsx'],
    }  	
}

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.

Next we will create our React component..

First let’s install react

npm install react react-dom --save

Then in our app.js file lets add our component:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

export default class ReactDemo extends Component {

	render(){
		return (
			<div><h1>HELLO! - THIS IS MY REACT COMPONENT</h1></div>
		);
	}
}

ReactDOM.render(<ReactDemo />, document.getElementById('root'));

Checking our dev server browser you should now see our component rendering.

reactdone

And that’s it.

*The source is up on my git repo.