What is React?
React is a JavaScript library used to build user interfaces (UI)—especially for web applications.
React is a tool that helps you build interactive web pages (buttons, forms, dynamic content) in a clean and
efficient way.
It was created by Meta.
Why do we use React?
When applications grow large, managing everything with plain JavaScript becomes difficult and messy.
React helps make your code organized, reusable, and easier to manage.
Example:
Imagine you are building a website with:
• Navbar
• Sidebar
• Content area
• Footer
Without React → Everything is mixed in one place (messy)
With React → Each part is a separate component
Key Features of React
1. Component-Based Structure
React lets you break the UI into small reusable pieces called components.
Example:
function Navbar() {
return <h1>This is Navbar</h1>;
}
2. Virtual DOM (Fast Performance)
React uses a Virtual DOM instead of directly updating the real DOM.
Result:
• Faster updates
• Better performance
3. JSX (HTML + JavaScript together)
React allows you to write HTML inside JavaScript using JSX.
Example:
const element = <h1>Hello World</h1>;
4. Reusable Code
You can create a component once and reuse it multiple times.
This saves time and keeps code clean.
5. One-Way Data Flow
Data flows in one direction, making it easier to understand and debug.
Simple Example
Without React:
[Link]("demo").innerHTML = "Hello";
With React:
function App() {
return <h1>Hello</h1>;
}
React version is:
• Cleaner
• Easier to manage
• Scalable
Where is React Used?
React is commonly used in:
• Social media apps (like Facebook)
• E-commerce websites
• Dashboards
• Single Page Applications (SPA)
Final Understanding
• React = Smart way to build UI
• Components = Small reusable parts
• JSX = HTML + JavaScript combined
• Virtual DOM = Faster performance
Tools You Need
1. [Link] (Most Important)
[Link] allows you to run JavaScript outside the browser.
It also installs npm (Node Package Manager) automatically.
How to install:
1. Go to: [Link]
2. Download the LTS version
3. Install it like normal software
Check installation:
node -v
npm -v
2. Code Editor
You need a code editor to write code.
Visual Studio Code
How to install:
1. Go to: [Link]
2. Download and install
Recommended Extensions:
• ES7+ React Snippets
• Prettier (for formatting)
3. Create React App Tool (or Vite)
You need a tool to create a React project quickly.
Recommended modern way: Vite
How to Create a React App (Step-by-Step)
Step 1: Open Terminal / Command Prompt
Step 2: Run this command
npm create vite@latest
Step 3: Follow setup
• Project name → (example: my-app)
• Framework → React
• Variant → JavaScript
Step 4: Go into project folder
cd my-app
Step 5: Install dependencies
npm install
Step 6: Run the project
npm run dev
You will see a local URL like:
[Link]
Open it in your browser
Project Structure (Basic Idea)
Inside your project:
• src/ → main code
• [Link] → main component
• [Link] → entry point
Simple Understanding
[Link] = engine to run JavaScript
VS Code = where you write code
Vite = tool to create and run React app
Common Mistakes
• Node not installed properly
• Not running npm install
• Wrong folder in terminal
Final Setup Summary
You need only 3 things:
1. [Link]
2. VS Code
3. Vite (to create React app)