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.
First create a folder for your react development and then initialize it with NPM
Now let’s begin by install webpack and webpack-dev-server
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
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:
Next we are going to put the following into our index.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.
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:
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
Now if you go to the project folder in terminal and enter ‘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
Next we will create a config file for Babel. In our application root create .babelrc and enter in our presets as follows:
We now need to edit our webpack config file so that it uses Babel when dealing with js and jsx files.
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:
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
Then in our app.js file lets add our component:
Checking our dev server browser you should now see our component rendering.
And that’s it.
*The source is up on my git repo.