Create React App from Scratch like a Pro

5 min readAug 29, 2021

Creating a React App is a very difficult feat, even when you are an experienced developer. That led to the development of create-react-app, a Command Line Tool to streamline the process of creating a React app.

Using create-react-app comes with several added benefits such as rapid prototyping and making the development of React Apps accessible to beginners, but there are some disadvantages as well.

Since create-react-app aims to generate more or less an all-purpose app, leading to a lot of additional not-so-necessary dependencies for any given niche case. Another con for using create-react-app is customizing it might be a pain at times.

So let’s dive into how to create your React Apps from scratch that allow you to customize the app to your heart’s content

Step 0: Installing Node

This goes without saying, you need Node.js and npm or yarn (in this article I would be using npm). To test if you have them installed, run the following commands:

node -vnpm -v

In case you don’t have them installed, I trust you with being able to install them, so I am moving on to the next step.

Step 1: Initializing the project

Create a new folder and navigate into it. To initialize a node project use:

npm init

or if you are lazy like me, use:

npm init -y

and modify the generated package.json.

Step 2: Installing dependencies

Now we would be adding the necessary Dependencies to our project.

1. React Dependencies

These are the only dependencies that are NOT dev dependencies

npm install react react-dom

Let’s take a look at the libraries:

react: library we'll be working with.
react-dom: package to manage DOM elements.

2. Webpack Dependencies

Webpack is the most popular bundler in the world of Node.js. It bundles and even minifies the JavaScript files in the project.

npm install -save-dev webpack webpack-cli

Taking a look at the libraries:

webpack: the bundler.
webpack-cli: CLI for Webpack.

3. Webpack Loaders

Webpack needs loaders to preprocess files. They allow the user customize Webpack to bundle static resources beyond JavaScript.

npm install --save-dev babel-loader

For now, let’s start with the absolutely necessary babel-loader (loader for Babel) and later add additional functionality based on need.

4. Babel Dependencies

Babel is a JavaScript compiler that converts (or rather transpiles) JavaScript ES6 to targeted version of JavaScript since not all browsers support ECMAScript 6 features. We would be using it to transpile the JSX code in our project to regular JavaScript that browsers can understand.

npm install --save-dev @babel/core @babel/preset-react

The dependencies:

@babel/core: Babel compiler core.
@babel/preset-react: package with a set of plugins used to support React features.

Phew! We are finally done with the dependencies!

Step 3: Configuring Babel

To configure Babel, we need to add .babelrc in the root level of our project

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

Step 4: Configuring Webpack

Now its time to configure Webpack. Add the webpack.config.js at the root level of the project and add the following code:

const path = require("path");
const webpack = require("webpack");module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/",
  },
  module: {
    rules:[
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
    ], 
  },
}

And let’s see what all of this is doing:

entry: The entry point for our application. In React, this is the file where we use our renderer.
mode: The mode in which the application is being run (development or production).
output: Informing Webpack where to put our bundled code and the name of the file.
module: Informing Webpack how and when to use the loaders we installed. We’re using regex to tell each loader which file extensions to target.

Step 5: HTML Body

Add an /public/index.html and the basic body:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>React From Scratch</title>
    </head>
    <body>
        <div id="root"></div>        <!-- The bundle-name should be same as you defined in webpack config file -->
        <script src="../dist/bundle.js"></script>
    </body>
</html>

Step 6: Creating the React App

Finally, we now start working on our app. Add /src/index.js (the entry point for the app mentioned in webpack.config.js)

import React from "react";
import ReactDOM from "react-dom";import App from "./App"ReactDOM.render(
    <App />,
    document.querySelector("#root")
);

and the App file /src/App.js

import React from "react";export default function App() {
    return (
        <div>
            <h1>React from Scratch</h1>
        </div>
    );
}

Step 7: Adding Scripts

We are done making the app, but how do we run it?

Glad you asked. we need to add 2 scripts for ease of use:

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack --mode development"
}

Now you can use npm run build or npm run start to bundle the React App and run the app from /public/index.html.

Conclusion

Now you too know how to Create an absolute basic React App from Scratch. YAY!

You can extend the functionality with additional plugins and loaders such as installing style-loader & css-loader and adding:

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
}

in your webpack.config.js, you can implement CSS support in your React App

You can add webpack-dev-server to serve the website instead of opening the HTML file (and potentially more optimized start script), use HotModuleReplacementPlugin to enable Hot Reload and much more. The possibilities are endless. Now you can create React Apps that cater to your individual requirements.

All the best in your React Development journey! :)

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Originally published at https://dev.to on August 29, 2021.