Before building React applications, we need to set up a React development environment.
This module covers:
React is a JavaScript library for building User Interfaces (UI).
It was created by Meta in 2013.
React helps developers build:
As JavaScript applications grow, managing the DOM manually becomes difficult.
Example:
document.getElementById(
"title"
).textContent =
"Hello";
Updating hundreds of elements manually quickly becomes difficult to maintain.
React solves this problem using:
React provides many powerful features:
A React application follows this workflow:
React Component
↓
JSX
↓
JavaScript
↓
Browser
React components are written using JSX, converted into JavaScript, and then rendered in the browser.
Vite is a modern frontend build tool.
It helps developers:
Older React projects commonly used:
Create React App (CRA)
Modern React projects prefer:
Vite
because it is:
Run:
npm create vite@latest
Example:
Project name:
my-react-app
Choose:
React
Choose one of:
JavaScript
or
TypeScript
cd my-react-app
npm install
or
npm i
npm run dev
Example output:
VITE v7.x
Local:
http://localhost:5173
Open your browser and visit:
http://localhost:5173
Create a React project directly:
npm create vite@latest my-app -- --template react
TypeScript version:
npm create vite@latest my-app -- --template react-ts
After creating a Vite React project, you'll see a structure similar to this:
my-react-app/
│
├── node_modules/
├── public/
├── src/
├── package.json
├── vite.config.js
├── index.html
└── package-lock.json
This folder contains installed packages such as:
It is generated automatically.
Never edit this folder manually.
The public folder stores static assets.
Examples:
Example:
public/
│
├── logo.png
└── favicon.ico
Usage:
<img src="/logo.png" />
Files inside public are served directly by the browser.
The src folder is the most important folder in a React project.
It contains all application source code.
Example:
src/
│
├── App.jsx
├── main.jsx
├── assets/
├── components/
└── styles/
main.jsx is the application's entry point.
Example:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM
.createRoot(
document.getElementById("root")
)
.render(
<App />
);
Responsibilities:
App.jsx is the root React component.
Example:
function App() {
return (
<h1>
Hello React
</h1>
);
}
export default App;
Output:
Hello React
The main HTML file for the application.
Example:
<body>
<div id="root">
</div>
<script
type="module"
src="/src/main.jsx">
</script>
</body>
React renders everything inside:
<div id="root"></div>
package.json is the project's configuration file.
Example:
{
"name": "my-react-app",
"version": "0.0.0"
}
It contains:
Example:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
Run the development server:
npm run dev
Create a production build:
npm run build
Preview the production build:
npm run preview
This file stores Vite configuration.
Example:
import {
defineConfig
}
from "vite";
export default defineConfig({
});
It is commonly used for:
src/
│
├── App.jsx
├── main.jsx
├── components/
├── assets/
└── styles/
src/
│
├── components/
├── pages/
├── layouts/
├── hooks/
├── services/
├── utils/
├── assets/
├── App.jsx
└── main.jsx
src/
│
├── components/
├── features/
├── pages/
├── layouts/
├── hooks/
├── context/
├── services/
├── api/
├── utils/
├── constants/
├── assets/
└── App.jsx
The components folder stores reusable UI components.
Example:
components/
│
├── Button.jsx
├── Navbar.jsx
├── Card.jsx
└── Footer.jsx
Example component:
function Button() {
return (
<button>
Click Me
</button>
);
}
export default Button;
The assets folder stores application resources.
Examples:
Example:
assets/
│
├── logo.svg
├── banner.jpg
└── icons/
Larger React applications organize screens inside the pages folder.
Example:
pages/
│
├── Home.jsx
├── About.jsx
└── Contact.jsx
Each page typically represents a route in the application.
A typical React development workflow looks like this:
Create Project
↓
Run npm install
↓
Run npm run dev
↓
Create Components
↓
Build UI
↓
Deploy Application
React applications created with Vite follow this flow:
index.html
↓
main.jsx
↓
App.jsx
↓
Components
Example:
index.html
↓
main.jsx
↓
App.jsx
↓
Navbar.jsx
Hero.jsx
Footer.jsx
Project structure:
src/
│
├── components/
│ ├── Navbar.jsx
│ ├── Hero.jsx
│ └── Footer.jsx
│
├── pages/
│ └── Home.jsx
│
├── App.jsx
└── main.jsx
Application flow:
main.jsx
↓
App.jsx
↓
Home.jsx
↓
Navbar
Hero
Footer
Good:
Button.jsx
Card.jsx
Navbar.jsx
Avoid:
HugeComponent.jsx
A component containing thousands of lines becomes difficult to maintain.
A clean folder structure improves scalability.
Example:
components/
pages/
hooks/
services/
Good:
UserCard.jsx
ProductList.jsx
Navbar.jsx
Avoid:
Component1.jsx
Test.jsx
Descriptive names improve readability.
Modern React projects typically use:
npm create vite@latest
instead of Create React App.
| Concept | Purpose |
|---|---|
| React | UI Library |
| Vite | Build Tool |
| npm | Package Manager |
| src | Application source code |
| public | Static files |
| main.jsx | Application entry point |
| App.jsx | Root component |
| package.json | Project configuration |
| vite.config.js | Vite configuration |
A React application begins with:
Vite
↓
React Project
↓
main.jsx
↓
App.jsx
↓
Components
↓
User Interface
Typical setup:
npm create vite@latest my-app
cd my-app
npm install
npm run dev
This creates a fast, modern React development environment that serves as the foundation for building component-based web applications.