The best article for basic setting up react web app with Babel + React + Webpack.
I always love to to write about React anytime in my free time. Personally I bootstrapped a lot of React projects in the recent time. I always had to setup the project from scratch. Eventually I have created my own https://github.com/vishalvishalgupta/react-webpack-babel-setup. As you might know, uncountable React boilerplate projects and repositories were created that way. But the article is not my attempt to advertise yet another React boilerplate project. I had several reasons why I extracted the setup process from another article of mine.
Before you can get started, you should make sure to have an installed editor and terminal on your machine. In addition, you will need an installed version of node with npm. Make sure to have setup everything of it before you continue to read.
mkdir react-boilerplate
cd react-boilerplatenpm init -ymkdir dist
cd dist
touch index.html
The whole served application contains only of two files: a .html and a .js file. While the .js file will be generated automatically from all of your JavaScript source files (via Webpack) later, you can already create the .html file manually as an entry point for your application.
<!DOCTYPE html>
<html>
<head>
<title>The React Webpack Babel Setup by Vishal Gupta</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>Webpack Setup
You will use Webpack as module bundler and build tool. Moreover you will use webpack-dev-server to serve your bundled app in a local environment. Otherwise you couldn’t see it in the browser to develop it. Last but not least, you need the webpack-cli node package to configure your Webpack setup in a configuration file later on. Let’s install all three node packages by using npm.
npm install --save-dev webpack webpack-dev-server webpack-cliScript for running the webpack based project:-
...
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
...
},
...Let’s create the required webpack.config.js file.
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};What is missing in our project is the src/index.js file.
mkdir src
cd src
touch index.jsindex.js:-
console.log('My React Webpack Babel Setup');Now you should be able to start your webpack-dev-server.
npm startBabel Setup
Babel enables you writing your code in with JavaScript which isn’t supported yet in most browser. Perhaphs you have heard about JavaScript ES6 (ES2015) and beyond. With Babel the code will get transpiled back to vanilla JavaScript so that every browser, without having all JavaScript ES6 and beyond features implemented, can interpret it. In order to get Babel working, you need to install two of its main dependencies.
npm install --save-dev @babel/core @babel/preset-envMoreover, in order to hook it up to Webpack, you have to install a so called loader:
npm install --save-dev babel-loaderAs last step, since you want to use React, you need one more configuration to transform the React’s JSX syntax to vanilla JavaScript.
From root folder:
npm install --save-dev @babel/preset-reactwebpack.config.js
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};You can start your application again. Nothing should have changed except for that you can use upcoming ECMAScript functionalities for JavaScript now.
Either set up the babel presets in .bablerc like below
…
{
“presets”: [
“@babel/preset-env”,
“@babel/preset-react”
]
}
…
or you can also set the content in your package.json like below.
……
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},……
Babel enables you to use future JavaScript in your browser, because it transpiles it down to vanilla JavaScript. Now you are set up to build your first React component now.
React Setup in a Webpack + Babel Project
In order to use React, you need two more node packages. The react and react-dom packages should fix your npm start.
From root folder:
npm install --save react react-domIn your src/index.js you can implement your first hook into the React world.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';const title = 'My React Webpack Babel Setup';ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
Hot Module Replacement in React
A huge development boost will give you react-hot-loader (Hot Module Replacement). It will shorten your feedback loop during development. Basically whenever you change something in your source code, the change will apply in your app running in the browser without reloading the entire page.
npm install --save-dev react-hot-loaderYou have to add some more configuration to your Webpack configuration file.
webpack.config.js
const webpack = require('webpack');module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
};
Additionally in the src/index.js file you have to define that hot reloading is available and should be used.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';const title = 'My React Webpack Babel Setup';ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);module.hot.accept();
Now you can start your app again.
From root folder:
npm startBest Of Luck BYE BYE. Happy React….
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >