Steps to setup React, Webpack and Babel from scratch(Beginner)
Steps that we are going to follow
- Initial project setup.
- How to install and configure webpack, babel.
- How to install React.
- How to include the resulting bundle into an HTML page.
- How to install and configure webpack dev server.
- Additional rules for assets, sass…
1- Initial project setup…
Create a directory for the project and run command step by step:
mkdir react-webpack
cd react-webpack
npm init -y
2- How to install and configure webpack, babel...
webpack is a static module bundler for modern JavaScript applications. Learning webpack is valuable not only for working with React, but for configuring every front-end project as well. Here webpack will take raw React components for producing JavaScript code that (almost) every browser can understand.
Let’s install webpack and webpack-cli by running command:
npm i webpack webpack-cli --save-dev
Now add the webpack build script command inside package.json:
"scripts": {
"build": "webpack --mode production"
}Older webpack versions would automatically look for a configuration file. Since version 4 that is no longer the case.
Babel…
Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).
It makes available all the syntactical sugar that was added to JavaScript with the new ES6 specification, including classes, fat arrows and multi line strings.
Even React components are written in modern JavaScript syntax that’s why need to convert/transform into plain JavaScript. A webpack loader takes something as the input and produces an output, called bundle.
babel-loader is the webpack loader responsible for talking to Babel. Babel on the other hand must be configured to use presets. We need two of them:
- babel-core- Transforms your ES6 code into ES5.
- babel preset env- for compiling modern Javascript down to ES5.
- babel preset react- for compiling JSX and other stuff down to Javascript.
- babel-loader- Webpack helper to transform your JavaScript dependencies with Babel.
npm i @babel/core babel-loader @babel/preset-react @babel/preset-env --save-devCreate a new file named .babelrc inside the root folder and paste the code - react-webpack/.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}Create a new file named webpack.config.js inside root folder and paste the code - react-webpack/webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};This configuration is quite minimal. For every file with a .js or .jsx extension Webpack pipes the code through babel-loader.
3- How to install React…
npm i react react-domNow let’s create a simple react component for further step react-webpack/src/components/App.js
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
name: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({name:event.target.value})
}
render() {
const {name} = this.state; return (
<div>
<div>
<form>
<input
type="text"
value={name}
onChange={this.handleChange}
placeholder="Please Enter"/>
<h2>{name === "" ? "Start typing..." : name}</h2>
</form>
</div>
</div>
);
}
}
export default App;
create another component react-webpack/src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";ReactDOM.render(<App />, document.getElementById("app"));
Now we are ready to create our bundle by running command:
npm run buildCheck your root, It should have dist folder react-webpack/dist/main.js
Now It’s time to bring our experiment by including the bundle into an HTML page.
4-How to include the resulting bundle into an HTML page.
To display our React sample app we must tell webpack to produce an HTML page. The resulting bundle will be placed inside a <script> tag.
webpack needs two additional plugin for processing HTML: html-webpack-plugin and html-loader.
npm i html-webpack-plugin html-loader --save-devNow replace your react-webpack/webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};create index.html inside react-webpack/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React, Webpack and Babel setup</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Close and save the file. Now run the build again with:
npm run buildand take a look at the dist folder. You should see the resulting HTML. With webpack there's no need to include your JavaScript inside the HTML file- bundle is automatically injected into the page.
Open up dist/index.html in your browser and you should see the React App.
5- How to install and configure webpack dev server.
To set up webpack dev server install the package with:
npm i webpack-dev-server --save-devOpen up package.json and replace your scripts
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
}save and close the file for checking by running
npm startYay!!!…you should see webpack launching your application inside the browser window.
6- Additional rules for assets, sass…
for Assets install file-loader
npm i -D file-loaderadd rule to existing rules in react-webpack/webpack.config.js
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}for sass
npm i node-sass style-loader css-loader sass-loader mini-css-extract-pluginadd rule to existing rules in react-webpack/webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
create App.scss in /components/App.scss and paste
body {
margin: 0;
padding: 0;
}
$bg: #d3d3d34a;
$color: coral;
.sass-container {
background-color: $bg;
padding: 20px;
height: 100vh;
padding-top: 40px;
}
.sass-form {
width: 50%;
margin: 0 auto;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 2px solid coral;
box-sizing: border-box;
}.sass-text-color {
color: $color;
font-family: cursive;
font-size: 25px;
}
.apply-css {
border: 5px solid white;
width: 100%;
}
Add one image named theme in src/assets/theme.png and
import sass, image in your /components/App.js…
import React, {Component} from 'react';
import theme from "../assets/theme.png";
import "./App.scss";and replace your jsx
return (
<div className="sass-container">
<div className="sass-form">
<form>
<input
type="text"
value={name}
onChange={this.handleChange}
placeholder="Please Enter" />
<h2 className="sass-text-color">
{name === "" ? "Start typing..." : name}
</h2>
</form>
<img className="apply-css" src={theme} alt="theme-image"/>
</div>
</div>
);Check your application is running properly if not stop and do npm start again.
Now you are ready to work with assets, sass by adding rules. That’s all.
Hope it helps to start….. Thank you.
For reference you can clone repository from https://github.com/akhtarvahid/react-webpack-babel.git.
