🔧 1. How to Set Up a React App
........................................................................................................
React apps can be created in 2025 using two popular methods:
Vite (Fast and modern – recommended)
Create React App (Classic and familiar)
✅ Option 1: Using Vite (Recommended)
👉 Command:
npm create vite@latest my-react-app -- --template react
📖 Explanation:
npm create vite@latest: Runs the latest Vite project setup script.
my-react-app: The name of the folder to create your app in.
--template react: Tells Vite to use the official React template (JSX + JavaScript).
👉 Command:
cd my-react-app
📖 Explanation:
Enters the newly created project directory so you can work inside it.
👉 Command:
npm install
📖 Explanation:
Installs all the dependencies listed in package.json that Vite and React need.
👉 Command:
npm run dev
📖 Explanation:
Starts the development server at http://localhost:5173 (or similar).
It uses Vite’s super-fast hot module replacement (HMR) to reflect changes instantly.
✅ Option 2: Using Create React App (Classic)
👉 Command:
npx create-react-app my-react-app
📖 Explanation:
npx: Runs the create-react-app package without installing it globally.
create-react-app: A tool that scaffolds a basic React project.
my-react-app: Name of the app folder it creates.
👉 Command:
cd my-react-app
📖 Explanation:
Moves into your project directory.
👉 Command:
npm start
📖 Explanation:
Starts the development server at http://localhost:3000.
Opens your default browser and shows the React app.
📝 Vite is preferred in 2025 because it's fast and easy to configure.
🗂️ 2. Understanding the Project Structure
When you create a new React app, you’ll get a folder like this:
my-react-app/
├── public/
├── src/
│ ├── App.jsx
│ ├── main.jsx
│ └── components/
💡 Keep all your custom components in the components folder.
🧩 3. Creating Your First Component
🔤 Code Example:
jsx
function App() {
return (
<div>
<h1>Hello React 2025!</h1>
<p>This is your first React component.</p>
</div>
);
}
export default App;
🧠 This is a basic React component that returns some HTML-like JSX.
🔁 4. Adding Interactivity with useState
👨💻 Example:
jsx
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
💡 useState lets you manage dynamic data in your app.
⚡ 5. JSX – JavaScript + HTML
JSX allows you to write HTML in your JavaScript.
jsx
const name = "React";
return <h1>Hello, {name}</h1>;
🔍 Anything inside {} is treated as JavaScript.
🧱 6. Combining Components
Jsx
function App() {
return (
<div>
<Header />
<Counter />
</div>
);
}
📦 Components help you break the UI into reusable blocks.
