Installation

1. CDN (Content Delivery Network)

You don’t install React. You directly load it from the internet using script tags.

html

<!DOCTYPE html>
<html>
<head>
  <title>React CDN Example</title>
</head>
<body>

  <div id="root"></div>

  <!-- React CDN -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <script>
    const element = React.createElement("h1", null, "Hello World");

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

</body>
</html>

Learning basics, quick testing, small widgets

2. Create React App (CRA)

An official React setup tool (now considered outdated).

javascript

npx create-react-app my-app

npx start

Legacy projects or beginners learning old setups

3. Vite

A modern and super fast build tool for React apps.

plaintext

npm create vite@latest my-app

cd my-app
npm install
npm run dev

4. Next.js

A React framework for building full-stack and production-ready apps.

plaintext

npx create-next-app@latest my-app

5. Manual Setup (Webpack + Babel)

You configure everything manually (Webpack, Babel, etc.)

plaintext

npm init -y
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react

React Folder Structure

javascript

my-app/
 ├── node_modules/
 ├── public/
 ├── src/
 ├── package.json
 ├── index.html

node_modules

This folder contains all installed packages
Example react react dom etc

Do not edit or upload to git

public

This folder contains static files

Examples : index.html images favicon

These files are directly used by browser

src

This is the most important folder
All main code is written here

Inside src folder

javascript

src/
 ├── assets/
 ├── components/
 ├── pages/
 ├── App.jsx
 ├── main.jsx
 ├── styles/

assets

Store images icons fonts

Example : logo.png

components

Reusable UI parts

Examples : Navbar Footer Card

Full pages of app

Examples : Home About Contact

App.jsx

Main component
All components and pages are used here

main.jsx

Entry point of app
React app starts from here

styles

CSS files Example : App.css

package.json

Project details and dependencies

Simple Flow

main.jsx → App.jsx → components → UI

Example Structure (Professional)

plaintext

src/
 ├── components/
 ├── pages/
 ├── services/
 ├── hooks/
 ├── utils/
 ├── context/
 ├── assets/