1. Where Can You Do React?

Step 1: Install Node.js

After installing, open Command Prompt / Terminal and check:

node -v
npm -v

Example Output:

v20.10.0
10.2.3

Node and npm are installed.

2. Setup VS Code

Step 2: Install VS Code

Download: code.visualstudio.com

Recommended Extensions:

ES7 React Snippets	Auto Rename Tag
Prettier	Live Server

3. Create React Project

Step 3: Run the Command

npx create-react-app myapp

npx: Runs package installer

create-react-app: Tool to create React project

myapp: Your project name

4. Open & Start

Go into project folder:

cd myapp

Start the project:

npm start

Browser opens: http://localhost:3000

React is now running!

5. Project Structure

myapp
├── node_modules
├── public
│   └── index.html
├── src
│   ├── App.js
│   ├── index.js
│   └── App.css
└── package.json

File	Purpose
index.js	Entry point
App.js	Main component
App.css	Styling

6. What is React?

React.js is a JavaScript Library used to build User Interfaces (UI) using components.

Developed by Meta (Facebook).

Mainly used for:

Single Page Applications (SPA)
Interactive Websites
Netflix, Airbnb, Instagram, Facebook

7. Component Architecture

      App
       |
  -----------
  |         |
Header    Content
            |
       -----------
       |         |
     Card1     Card2

Explanation: React breaks the UI into small, reusable components.

8. React Rules

Rule 1: Component names must start with Capital Letter (e.g., Header).

Rule 2: Components must return one parent element.

Rule 3: Use className instead of class.

Rule 4: Use JSX (HTML inside JavaScript).

9. Basic Syntax

function App() {
  return (
    <h1>Hello React</h1>
  );
}
export default App;

Code	Meaning
function App()	Component
return	UI Output
export default	Allows reuse

10. React vs HTML vs JS

Feature	HTML	JS	React
Type	Markup	Programming	Library
UI	Static	Dynamic	Component-based
Reuse	No	Limited	Yes

11. Practice Tasks

Task 1: Display Name, Dept, College in a component.

Task 2: Create Header, Content, Footer components.

Task 3: Build a Student Card (Name, Age, Course).

Task 4: Product list (Laptop, Mobile, Tablet).

12. Learning Flow

HTML → CSS → JavaScript → React Setup

→ Components → JSX → Props → State → Hooks