
The Minimal React Project Setup using Webpack and Babel
There are a good number of starter kits available for creating React projects. Starter kits are useful, but most of them are black boxes, they improve productivity once the developers have an understanding of how they work. For large scale applications, we want to create the application from scratch and want full control over it.
The goal of this blog post is to explain how to create minimal React project using Webpack and Babel from scratch step by step.
Step 1: Create project folder, and package.json file in the folder
mkdir react-minimal-project
cd react-minimal-project
npm init -y
Step 2: Install React and React DOM packages
npm install --save react react-dom
Step 3: Install Webpack, Webpack CLI and Webpack Dev Server
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
Step 4: Install Babel
npm install --save-dev @babel/core babel-loader
npm install --save-dev @babel/preset-env @babel/preset-react
The@babel/core
is the babel compiler. Thebabel-loader
is the webpack plugin for babel. The@babel/preset-env
is the Babel preset for converting ES6, ES7 and ES8 code to ES5. The@babel/preset-react
is the Babel preset for all React plugins.
We have all the required npm packages, let’s write some code. First, we need to create Babel configuration in .babelrc
file to tell Babel how to transpile our ES6, ES7, ES8 and JSX code.
Step 5: Create Babel configuration file .babelrc
.babelrc
touch .babelrc
Add the following configuration to .babelrc
file.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step 5: Create Webpack configuration file webpack.config.js
touch webpack.config.js
Step 6: Add the below configuration to webpack.config.js
file
webpack.config.js
module.exports = {
entry: './src/app',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
Step 7: Let’s write a hello world React component
src/helloworld.js
import React, { Component } from 'react';
class HelloWorld extends Component {
render() {
return (<h1>Hello World, React!</h1>);
}
}
export default HelloWorld;
Step 8: Let’s display the <HelloWorld /> React component on the page using react-dom render() method
src/app.js
import React from 'react';
import { render } from 'react-dom';
import HelloWorld from './helloworld';
render(<HelloWorld />, document.getElementById('app-root'));
Step 9: Let’s create index.html page to render our react application
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Hello World</title>
</head>
<body>
<div id="app-root"></div>
<script src="bundle.js"></script>
</body>
</html>
Step 10: Let’s update scripts section in package.json file to run our application using webpack dev server
"scripts": {
"start": "webpack-dev-server --mode development --open --hot"
}
Go to project folder in terminal run npm start
command, this will start webpack dev server, opens the browser and display the result of <HelloWorld /> component.
You can find the sample code here.
Thank you writing for this post Shravan. It has been the easiest example to follow since I'm trying to learn how to create a React application from the start.
Thank you so much for this clean guide.