VIDEO: React app setup from the scratch Jan Gana | Software Engineer

React has gained immense popularity in the web development community due to its simplicity and powerful capabilities for building user interfaces. While tools like create-react-app make starting a React project quick and easy, it's essential to understand how to create a React app from scratch.

This knowledge empowers you to have more control over your project's configuration and gain a deeper understanding of the underlying technologies. In this blog post, I'll walk you through the process of creating a React app without using create-react-app.

Prerequisites:

Before we dive into creating a React app, make sure you have the following tools and knowledge:

Node.js and npm (Node Package Manager) installed on your computer.
A code editor like VS Code or your preferred choice.
Basic understanding of JavaScript and React concepts.

Step 1: Setting Up Your Project Directory

Start by creating a new directory for your project. Open your terminal and navigate to your preferred location:

mkdir react-from-the-scratch
cd react-from-the-scratch

Step 2: Initializing a Node.js Project

Now, initialize a new Node.js project in your project directory using npm:

npm init -y

This command will create a "package.json" file that stores project metadata and dependencies.

Step 3: Installing React and ReactDOM and TypeScript

To use React, you need to install the following packages: react, react-dom and typescript. Run the following command to install them:

npm install react react-dom typescript @types/react @types/react-dom

Step 4: Writing Your First React Component

Now, it's time to create your first React component. Create a directory named src in your project's root directory and inside it, create an index.tsx file. This will be your app's entry point. Here's a simple example:

import React, { FC, StrictMode } from "react";
import ReactDOM from "react-dom/client";

const App = () => <div>My beautiful React App</div>;

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Step 5: Creating an HTML File

Create a directory named public in your project's root directory and inside of this directory create an index.html. This file will serve as the entry point for your React app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./src/index.js"></script>
  </body>
</html>

Step 6: Setting Up Babel for JavaScript/JSX Compilation

React code is typically written using JSX/TSX, which needs to be transpiled into regular JavaScript for browsers to understand. Babel is a popular JavaScript compiler that helps with this. Install the necessary Babel packages:

npm i babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev

Create a Babel configuration file named .babelrc in your project's root directory and add the following configuration:

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

Step 7: Configuring Webpack

To bundle your React app, you need to set up Webpack. Install Webpack and related packages:

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader --save-dev

Create a Webpack configuration file named webpack.config.js in your project's root directory:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 3001,
  },
  mode: "development", // 'development', 'production', 'none'
};

Step 8: Start Your Development Server

You're now ready to start your development server:

npx webpack serve

Visit http://localhost:3001 in your browser, and you should see your React app up and running.

Step 9: Create a prod build

npx webpack

Conclusion:

Creating a React app from scratch gives you a deeper understanding of how the different pieces of the React ecosystem fit together. While tools like create-react-app are convenient for quick prototypes, this manual setup allows you to have more control over your project's configuration and helps you learn the underlying technologies better. Happy coding!