Create React App from Scratch in 2022

Building a React app from an empty directory using the latest Webpack and Babel.

3 min readMay 15, 2022

Nowadays, creating react app is as simple as typing ‘create-react-app’ command into the terminal. Create React App doesn’t handle backend logic or databases. it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and Webpack, but you don’t need to know anything about them.

However, it would be great learning experience to create react app from scratch on your own. Also, some universities advise to students do not use ‘create-react-app’ to create React app for their university projects. So, students had to create react app from scratch.

In this article there is step-by-step guide to set up a react app from and empty directory using Babel and Webpack.

Create Project Directory

First create project directory and change directory into it.

mkdir my-app
cd my-app

Next initialize the app with npm to manage all our dependencies. It will create package.json file

npm init

Install Dependencies

Webpack: bundles all our files into one file
babel-loader: works with Webpack to transpile ES6+ into ES5 which is supported by older browsers
@babel/preset-react: extends Babel support to JSX
html-webpack-plugin: “simplifies the creation of HTML files to serve your Webpack bundles” -https://webpack.js.org/plugins/html-webpack-plugin/
webpack-dev-server: allows you to use Webpack with a development server that provides live reloading.
webpack-cli: “webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom Webpack project.” -https://www.npmjs.com/package/webpack-cli
css-loader: allows Webpack to convert the CSS file into a JavaScript string.
style-loader: inserts the JavaScript string into HTML dom.
@babel/plugin-proposal-class-properties: “This plugin transforms static class properties as well as properties declared with the property initializer syntax” -https://www.npmjs.com/package/@babel/plugin-proposal-class-properties
react: JavaScript library
react-dom: “Serves as the entry point to the DOM and server renderers for React”
touch: For all your node touching needs.

To install above mentioned dependencies run below command on terminal.

npm i webpack babel-loader @babel/preset-react @babel/core babel-preset-react html-webpack-plugin webpack-dev-server css-loader style-loader @babel/plugin-proposal-class-properties webpack-cli touchnpm i react react-dom

Add ‘src’ Directory, index.js, and index.html Files

Your File Tree currently look like this:

Now add Some Codes

Add following code to index.html

<!doctype html>
<html lang=”en”>
<head>
 <meta charset=”utf-8">
 <title>My React App from Scratch</title>
</head>
<body>
 <div id=”app”></div>
</body>
</html>

Add following code to index.js

import ReactDOM from ‘react-dom’;
import React from ‘react’;const App = () => {
 return <h1>This is my React app!</h1>;
 }ReactDOM.render(<App />, document.getElementById(‘app’));

Configure Webpack and Babel

In the root directory, type these commands in terminal

touch .babelrc
touch webpack.config.js

Your File Tree currently look like this:

Add following code to webpack.config.js

const HtmlWebPackPlugin = require(“html-webpack-plugin”);
const htmlPlugin = new HtmlWebPackPlugin({
 template: “./src/index.html”,
 filename: “./index.html”
});
module.exports = {
mode: ‘development’,
  module: {
    rules: [{
   test: /\.js$/,
   exclude: /node_modules/,
   use: {
     loader: “babel-loader”
   }
 },
  {
   test: /\.css$/,
   use: [“style-loader”, “css-loader”]
  }
]},
 plugins: [htmlPlugin]
};

Add following code to .babelrc

{
 “presets”: [“@babel/preset-react”],
 “plugins”: [“@babel/plugin-proposal-class-properties”]
}

Add ‘start’ script to package.json

"start": "webpack serve --config webpack.config.js"

Test to See React App Running in the Browser

In the root directory, add following code in terminal

npm run start

You should see your app running at http://localhost:8080/ in the browser.

Now you successfully set up a React Application from scratch!