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-app

a 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-app

Initialize the project using npm

npm init -y

this will create a package.json file in your project

Install react

npm install react react-dom

react: 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-cli

webpack module — which contains all of the core webpack functionality
webpack-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.js

Inside 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 .babelrc

Add following code to the file

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

Now we can now run the app using

npm run start

We 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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Some topics we need to know which make javascript easier

TypeScript Best Practices -Useless Interfaces, Classes, and Promises

React By Example: Part 4

JSON, Async/Await & Hiding An API Key

Top Vue Packages for Adding a Datetime Picker and Virtual Scrolling

AngularJS vs. Node.Js- All You Need to Know about Top Frameworks

Best Practices for Structuring Express Apps

My Flatiron School JavaScript portfolio project: A digital vision board

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevinwijesooriya

Kevinwijesooriya

More from Medium

When learning about react, how useful is it to know about react hooks and components?

Solution for problem with useState and eventHandlers

Styling in React

React Hooks- Part 2