react setup without vite or create react app,(2)

🚀 Create React App Manually (Without CRA or Vite)

Hey developers 👋,
In this post, I’ll show you how to create a React app manually from scratch without using create-react-app or Vite. This will help you understand the building blocks of React projects — what happens under the hood.

👉 Full code is available on my GitHub: manualreact

1. Create a folder and initialize the project

mkdir manualreact
cd manualreact
npm init -y

The -y flag accepts all defaults, so it quickly generates a package.json.

2. Install React and ReactDOM

npm install react react-dom

react → Core library for writing components, managing state, and using hooks.
react-dom → Used to render React components into the actual DOM (browser).

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

3. But wait… browsers don’t understand JSX directly ⚠️

Up to this point, we have written React code.
But browsers only understand plain JavaScript, HTML, and CSS.
So we need tools that bundle and transpile our code:

🔹 Webpack (Bundler)

Takes all your files (.js, .css, .jpg, etc.)
Combines them into a single optimized bundle (bundle.js)
Browser can then load it efficiently.

🔹 Babel (Transpiler)

Converts modern ES6+ and JSX code into older JavaScript that browsers understand.

Examples:

JSX ➝ React.createElement

// ES6/JSX
const element = <h1>Hello React</h1>;

Babel output:

const element = React.createElement("h1", null, "Hello React");

Arrow function ➝ ES5 function

// ES6
const sum = (a, b) => a + b;

Babel output:

var sum = function(a, b) {
  return a + b;
};

4. File Structure and Configurations

I’ve set up all necessary files (index.html, webpack.config.js, babel.config.js, entry point, etc.) in my repo.
👉 You can check it out here: manualreact on GitHub