Warming up the neural circuits...
React is a UI library — it helps you build user interfaces by composing small, reusable pieces called components. Each component manages its own look and feel, and you combine them like building blocks.
Think of a web page:
<!-- Without React: one big HTML file -->
<div class="page">
<div class="header">...</div>
<div class="sidebar">...</div>
<div class="main">...</div>
</div>// With React: small, independent components
<Page>
<Header />
<Sidebar />
<MainContent />
</Page>Each component is self-contained. The Header doesn't care about the Sidebar. You can move them, reuse them, test them independently.
A React component is just a function that returns JSX:
function Greeting() {
return <h1>Hello, React!</h1>;
}That's it. A function. It returns UI. React renders it on the screen.
function App() {
return (
<div>
<Greeting /> {/* ← Your custom component */}
<p>This is my first React app.</p>
</div>
);
}<div>
<h1>Hello, React!</h1>
<p>This is my first React app.</p>
</div>JSX looks like , but it's actually JavaScript under the hood. React components return JSX, and Babel/ compiles it to regular JavaScript.
| HTML | JSX Attribute | Reason |
|---|---|---|
class | className | class is a reserved JS keyword |
for | htmlFor | for is a reserved JS keyword |
style="color: red" | style={{ color: 'red' }} | JSX style takes a JS object |
onclick | onClick | camelCase for all events |
tabindex | tabIndex | camelCase for all attributes |
{}You can embed any JavaScript expression inside {}:
function Profile() {
const name = "Alice";
const age = 25;
const isLoggedIn = true;
return (
<div>
<h1>Hello, {name}!</h1>
<
Rule 1: One Parent
// ❌ Wrong (two siblings, no parent)
return (
<h1>Title</h1>
<p>Content</p>
);
// ✅ Right (wrapped in a single parent)
return (
<div>
<h1>Title</h1>
<p>Content
Rule 2: Close Every Tag
// ❌ Wrong (self-closing tags need the slash)
<img src="photo.jpg">
<input type="text">
// ✅ Right
<img src="photo.jpg" />
<input type="text" />
<br />
Rule 3: className Instead of class
// ❌ Wrong
<h1 class="title">Hello</h1>
// ✅ Right
<h1 className="title">Hello</h1>Components can render other components. This is the composition model:
// 📁 Header.jsx
function Header() {
return (
<header className="bg-blue-600 text-white p-4">
<h1 className="text-2xl font-bold">My App</h1>
</header>
);
}
// 📁 Footer.jsx
Component tree:
App
├── Header
├── MainContent
└── FooterReact keeps a lightweight copy of the in memory — the .
State changes
↓
React creates a new Virtual DOM tree
↓
React compares (diffs) with previous Virtual DOM
↓
React calculates the minimal set of DOM changes
↓
React applies ONLY those changes to the real DOMWhy this matters: Direct DOM manipulation is slow. By batching changes and only touching what changed, React keeps your UI fast even with complex updates.
The easiest way to start React is with Vite:
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run devmy-react-app/
├── index.html
├── src/
│ ├── main.jsx # Entry point — renders App into DOM
│ ├── App.jsx # Root component
│ └── App.css # Styles
├── package.json
└── vite.config.jsimport { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode
// 📁 ProfileCard.jsx
function Avatar() {
return (
<div className="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto">
A
</div>
);
}
function UserInfo() {
return (
<div className="text-center mt-4"
Mistake 1: Forgetting the return statement
// ❌ Wrong (no return)
function Greeting() {
<h1>Hello</h1>;
}
// ✅ Right
function Greeting() {
return <h1>Hello</h1>;
}
// ✅ Also right (implicit return with arrow)
const GreetingMistake 2: Using if inside JSX
// ❌ Wrong (if is a statement, not an expression)
return (
<div>
{if (isLoggedIn) <p>Welcome back</p>}
</div>
);
// ✅ Right (ternary operator)
return (
<div>
Mistake 3: Mutable operations in JSX
// ❌ Wrong (modifying array in place)
{items.reverse().map(item => ...)} // reverse() mutates!
// ✅ Right (create new array)
{[...items].reverse().map(item => ...)}{} for embedding JavaScript expressions