Create a React App from Scratch

In this detailed guide, you'll learn how to create a React app from the ground up without relying on Create React App. We'll cover everything from setting up the project structure to configuring Webpack and Babel, giving you full control and a deep understanding of the React setup process.

Step 1: Setting Up the Project Folder

First, we need to create a project folder and set it up for Node.js, which allows us to manage packages (external code libraries) and configurations.

Run the following commands in your terminal to create a folder and initialize it as a Node project. This will automatically generate a package.json file where we can manage all our dependencies.

mkdir my-react-app && cd my-react-app
npm init -y

Note: The npm init -y command automatically creates a basic package.json file with default settings. You can edit it anytime to add more custom settings.

Step 2: Installing React and React DOM

React is the core library we'll use to build components, and react-dom is what renders these components to the browser. We'll install both as project dependencies.

Run this command to install react and react-dom:

npm install react react-dom

Why these libraries? react provides the framework for building UIs, and react-dom lets React interact with the DOM (the structure of our web page).

Step 3: Setting Up Webpack

Webpack is a tool that bundles all your JavaScript, CSS, and other assets into one (or a few) compact files. This helps your app load faster and perform better. We'll install Webpack and its CLI tools to manage this bundling.

Run the command below to install Webpack and its required tools:

npm install --save-dev webpack webpack-cli webpack-dev-server

Next, create a file called webpack.config.js in the root of your project. This file will tell Webpack how to bundle our code.

const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    path: path.resolve(__dirname, 'dist'), // Output directory
    filename: 'bundle.js', // Name of the bundled file
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // Transpile .js and .jsx files
        exclude: /node_modules/, // Ignore dependencies
        use: {
          loader: 'babel-loader', // Use Babel to convert modern JavaScript
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'], // Allow importing without file extensions
  },
  devServer: {
    static: './dist', // Serve from this folder in development
  },
};

What's Happening Here?

Here's a breakdown of each part:

entry: This is where Webpack starts building your app (from src/index.js).
output: Specifies the folder and filename for the final bundled file (in dist/bundle.js).
module: Defines how different file types should be processed. Here we tell Webpack to use babel-loader to convert JSX and ES6 syntax into browser-compatible JavaScript.
devServer: Configures the server for local development, serving files from the dist folder.

Step 4: Setting Up Babel

Babel is a tool that converts modern JavaScript (ES6+ and JSX) into code that older browsers can understand. We'll set up Babel to work with React.

Install Babel and the necessary presets for React:

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

Now, create a .babelrc file in the root directory and add the following configuration:

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

This setup tells Babel to use the preset-env (for modern JavaScript) and preset-react (for JSX) when it transpiles our code.

Step 5: Creating the App

Now let's create a basic React component to display a message on the page. Create a folder called src and inside it, add a file named index.js.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Hello, React from Scratch!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

Important: Make sure your HTML file has a <div id="root"></div> element where this React component can be rendered.

Step 6: Adding an HTML File

Create an HTML file in a public folder with the following structure. This file serves as the shell for your app, with React taking over the div with the root ID.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App from Scratch</title>
</head>
<body>
  <div id="root"></div>
  <script src="../dist/bundle.js"></script>
</body>
</html>

Step 7: Adding Scripts to package.json

To streamline development and building for production, add these scripts to your package.json file:

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

Explanation: The start script runs Webpack in development mode, and the build script bundles the app for production.

Congratulations! You Did It!

Great job! You've successfully created a React app from scratch. By setting up Webpack and Babel manually, you now have a deeper understanding of what goes on under the hood of a React application. This foundation will help you customize your future projects to meet your unique needs.

Go ahead and add more features, components, and styles to make it your own. Happy coding!