DEV Community

Cover image for Create React App from Scratch like a Pro
Tapajyoti Bose
Tapajyoti Bose

Posted on • Edited on

Create React App from Scratch like a Pro

#react #webpack #babel #webdev

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

Let's begin

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 -v
Enter fullscreen mode Exit fullscreen mode 
npm -v
Enter fullscreen mode Exit fullscreen mode

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.

I believe in you

1. Initializing the project

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

npm init
Enter fullscreen mode Exit fullscreen mode

or if you are lazy like me, use:

npm init -y
Enter fullscreen mode Exit fullscreen mode

and modify the generated package.json.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Phew

3. Configuring Babel

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

{
  "presets": [
    "@babel/preset-react"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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"
      },
    ], 
  },
}
Enter fullscreen mode Exit fullscreen mode

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.

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>
Enter fullscreen mode Exit fullscreen mode

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")
);
Enter fullscreen mode Exit fullscreen mode

and the App file /src/App.js

import React from "react";

export default function App() {
    return (
        <div>
            <h1>React from Scratch</h1>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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!

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']
}
Enter fullscreen mode Exit fullscreen mode

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

Thanks for reading

Want to work together? Contact me on Upwork

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

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas

  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

  3. Would you like to collaborate on our site?

    As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

Top comments (15)

Collapse
 
darshkul24 profile image
Darsh •

Want to collab..
I have a team

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

I'm sorry, but I am too busy for any collaboration. Best of luck for your endeavour though!

Collapse
 
darshkul24 profile image
Darsh •

Okay then..
But it would be a great help if you answer my question:-
Do you have any web dev who is ready for a collaboration?

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose •

I don't think so, most of my friends are busy with placements

Thread Thread
 
darshkul24 profile image
Darsh •

Okay

Collapse
 
smithjasson43 profile image
Jasson Smith • • Edited

Thank you for sharing this excellent guide of creating react app from scratch by discussing the technical aspects of react native mobile app development, which I have rarely seen in other artciles, you talked an efficient way of building a react app from scratch, I wanted to know your view on recently published article on app development from scratch that I read recently, click here.

Once you read the entire article, could you please share your opinion, or it is a good way to kickstart mobile app development process?

Thanks again for sharing this stuff about react native...

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

The article is on React Web Apps. I don't know React Native myself 😐

Collapse
 
ioskpu profile image
ioskpu •

Great bro... Congratulation

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

Thankyou :)

Collapse
 
musthashman profile image
mustHASHman • • Edited

Great blog post. Lot's of good info. Thanks!

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

Glad you found it helpful :)

Collapse
 
lylest profile image
wackyizzy •

Why would you want to do this ? It takes huge amount of time while you still have other things to figure out during development unless you are making Todo list app

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

If you are making a simple app, then using this would definitely be a waste of time. But if you are making an enterprise level application, you would have to consider each and every niche cases and tailor the app to your needs to squeeze out every drop of performance. In such cases using create-react-app would be a disaster

Collapse
 
virajkanse profile image
ADevDX •

You can create template repo on github, it will save lot of time.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose •

Good point. There are quite a few templates available on GitHub to create React applications

View full discussion (15 comments)

Read next

vinishbhaskar profile image

Top Black Friday Deals for Developers & Designers - 2024

Vinish Bhaskar -

magsimuhammadessa profile image

Exploring ChatGPT's New Search Feature: A Powerful Tool for Real-Time Information

Muhammad Essa -

dev007777 profile image

AI Web Developer - GitHub Spark

TheDev -

carrie_luo1 profile image

What is LTS in Software Versions?

Carrie -