Chapter 1: Introduction to React
1. What is React & why should YOU use it?
React is a JavaScript library created by Facebook (now Meta) in 2013. Its only job is to help you build beautiful, fast, interactive user interfaces (especially for web apps that feel like mobile apps — think Instagram, Netflix, WhatsApp Web, Airbnb, Swiggy, Zomato, etc.).
React is NOT a full framework (Unlike Angular or Vue which come with everything built-in) React is just the view layer — it only cares about how to show things on the screen and how to update them efficiently when data changes.
Why do millions of developers (and almost every big company) love React in 2026?
-
Component-based architecture You break your UI into small, reusable pieces (components). Example:
- <Navbar />
- <ProductCard />
- <Footer />
- <LoginModal /> Each component is like a Lego block — you can reuse it anywhere.
-
Declarative style (this is the magic!) You just describe WHAT the UI should look like right now, based on the current data. React automatically figures out HOW to change the screen when data changes.
Old-school jQuery way:
JavaScript0123456document.getElementById('counter').innerText = count;React way:
jsx0123456<h1>Count: {count}</h1>→ React takes care of everything!
-
Virtual DOM → super fast updates React keeps a lightweight copy of the real webpage (called Virtual DOM). When something changes:
- React makes a new virtual DOM
- Compares old vs new (very fast)
- Only updates the tiny parts that actually changed in the real DOM → Much faster than directly manipulating the real DOM thousands of times.
-
Huge ecosystem & community
- React Router (navigation)
- Zustand / Redux Toolkit / Jotai (state management)
- Tailwind CSS, shadcn/ui, MUI, Chakra UI (styling)
- Next.js, Remix (full-stack React)
- React Query / TanStack Query (data fetching)
- React Native (mobile apps with same code)
-
Still the #1 skill in 2026 Most job openings ask for React (or Next.js which is built on React). Once you learn React well, learning Vue, Svelte, or Angular becomes much easier.
2. React vs other popular frameworks/libraries (2026 comparison)
| Tool | Type | Learning Curve | Performance | Bundle Size | Job Market (2026) | Best For |
|---|---|---|---|---|---|---|
| React | Library | Medium | Very good | Medium | ★★★★★ (Biggest) | Almost everything, huge ecosystem |
| Next.js | Full-stack React | Medium | Excellent | Medium | ★★★★★ | Production websites + apps (SEO, SSR) |
| Vue 3 / Vue 4 | Framework | Easy | Very good | Small | ★★★★ | Quick prototyping, progressive apps |
| Svelte 5 | Compiler | Easy | Blazing fast | Very small | ★★★ | Performance-critical apps |
| Angular | Full Framework | Steep | Good | Large | ★★★★ | Enterprise, large teams |
| Solid.js | Library | Medium | Extremely fast | Very small | ★★ | Performance lovers |
My personal recommendation for you in 2026: Start with React + Vite → then move to Next.js after 2-3 months. This path gives you:
- Maximum job opportunities
- Best community support
- Skills that transfer to almost every other modern frontend tool
3. Setting up your development environment (the modern 2026 way)
Step 1: Install Node.js (very important!)
- Go to: https://nodejs.org
- Download LTS version (v20 or v22 in 2026)
- After installation, open terminal (Command Prompt / PowerShell / Terminal) and check:
Bash01234567node -vnpm -v
You should see versions like v20.17.0 or higher.
Step 2: Install VS Code (best editor for React)
- Download from: https://code.visualstudio.com
- Must-have extensions (install these right now!):
- ESLint
- Prettier – Code formatter
- Tailwind CSS IntelliSense (if you plan to use Tailwind)
- Reactjs code snippets (type rafce → press Tab → instant component)
- Auto Rename Tag
- Bracket Pair Colorizer 2
Step 3: Create your first React project (FASTEST way in 2026)
Forget the old slow create-react-app. We use Vite — it’s 10× faster!
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# 1. Create a new project npm create vite@latest my-first-react-app -- --template react-ts # 2. Go inside the folder cd my-first-react-app # 3. Install dependencies npm install # 4. Start the development server npm run dev |
→ It will open automatically in your browser at: http://localhost:5173
You now have a modern, lightning-fast React + TypeScript project!
4. Your very first React app – understanding every line
Open src/App.tsx — this is your main file:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import { useState } from 'react' import './App.css' function App() { const [count, setCount] = useState(0) return ( <> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ) } export default App |
Super human-friendly explanation of every part:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// 1. We import useState hook from React import { useState } from 'react' // 2. This is your COMPONENT - just a normal function! function App() { // 3. useState gives us: // - count: current value (starts at 0) // - setCount: function to change the value const [count, setCount] = useState(0) // 4. return = what should appear on screen (this is JSX!) return ( <> {/* 5. Curly braces = JavaScript inside JSX */} <h1>Vite + React</h1> <button // 6. onClick = when user clicks, run this function onClick={() => setCount((count) => count + 1)} > count is {count} {/* count updates automatically! */} </button> </> ) } // 7. Export so other files can use this component export default App |
Your First Mini Exercise (do it right now!)
- Open src/App.tsx
- Replace the <h1> with your name:
|
0 1 2 3 4 5 6 |
<h1>Hello Webliance! Welcome to React 2026 🚀</h1> |
- Add a new paragraph with your city:
|
0 1 2 3 4 5 6 |
<p>I am learning React from Mumbai! 🌆</p> |
- Change the button text and make it colorful:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<button onClick={() => setCount((count) => count + 1)} style={{ padding: '12px 24px', fontSize: '18px', backgroundColor: '#646cff', color: 'white', border: 'none', borderRadius: '8px', cursor: 'pointer' }} > Click me! Count: {count} </button> |
- Save the file → watch it update instantly (this is called Hot Module Replacement — HMR)
Summary – What you learned in Chapter 1
- React = fast, component-based UI library
- Uses Virtual DOM → only updates what changed
- Vite + React + TypeScript = modern way to start (2026)
- Components = functions that return JSX
- useState = React’s simplest way to remember data
- Changes appear instantly thanks to HMR
Super proud of you for completing Chapter 1! 🎉
