How I built my React app from the scratch with Webpack and Babel
Introduction
This is how I built a react app from the ground up for one of my academic projects. For this, I used babel and webpack. At first glance, one might wonder why build it from scratch when you can use one command to build a react app. However, while developing this app from the scratch, I realized the significance of developing your react app from the scratch.
Why build from scratch?
Even if you are an experienced developer, creating a React App is a difficult task. This resulted in the creation of
npx create-react-app my-appa Command Line Tool that simplifies the process of creating a React app. There are some advantages to using create-react-app, such as rapid prototyping and making React App development accessible to beginners, but there are also some disadvantages.
Because create-react-app aims to generate an all-purpose app, it generates a lot of unnecessary extra dependencies for any given case. Another disadvantage of using create-react-app is that it can be difficult to customize at times.
Building a react app from the ground up will result in clean code.
Lets get started
Configure project
First create a new directory
mkdir my-react-app -&& cd my-react-appInitialize the project using npm
npm init -ythis will create a package.json file in your project
Install react
npm install react react-domreact: react library.
react-dom: package to manage DOM elements.
Configure webpack
webpack is a powerful tool for configuring almost any front-end project, not just React. The core function of webpack is to take a collection of JavaScript files from our project and merge them into a single, minified file that can be served quickly.
npm install --save-dev webpack webpack-dev-server webpack-cliwebpack module — which contains all of the core webpack functionalitywebpack-dev-server — When our file is changed, this development server automatically reruns webpack.webpack-cli — Allows you to run webpack from the command line.
Now to run the webpack we have to add a script to package.json
"scripts": {
"start": "webpack-dev-server --mode development",
},Configure index files
create an index.html file in your root project folder
<!DOCTYPE html>
<html>
<head>
<title>My React Configuration Setup</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>Make a new directory called src, and then make a new index.js file inside it.
mkdir src && cd src && touch index.jsInside this index.js we write our react component
import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
render() {
return <h1>Hello World from React boilerplate</h1>;
}
}
ReactDOM.render(<Welcome />, document.getElementById("root"));Configure Babel
In order for class syntaxes to work, Webpack requires Babel to convert ES6 syntaxes to ES5 syntaxes.
So we need to install below packages
npm install --save-dev @babel/core @babel/preset-env \@babel/preset-react babel-loader@babel/core -The main dependency which includes the babel transform script.@babel/preset-env - is the default Babel preset for converting ES6+ code to valid ES5 code. Configures browser polyfills automatically if desired.@babel/preset-react - package is used to convert JSX and React class syntax into valid JavaScript code.babel-loader- is a webpack loader that integrates Babel. With this package, we will run Babel from webpack.
To integrate Babel into our webpack, we must first create a webpack.config.js file.
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
};This webpack configuration helps determine that the application’s entry point is from index.js, so pull everything required by that file, then place the output of the bundling process into the dist directory, named bundle.js. If we’re using webpack-dev-server, tell it to serve content from the contentBase config, which is in the same directory as this config. Use babel-loader to transpile all.js or.jsx files.
Now we create babel config file named .babelrc
touch .babelrcAdd following code to the file
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}Now we can now run the app using
npm run startWe have now successfully configured the react app we can add additional plugins and loaders
For example to enable CSS support to your app add following inside the webpack.config.js
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}Also you can additional configure Prettier and ESLint for better code formatting and error handling.
Check out the links below for more information!