React is a JavaScript library for building user interfaces, created by Meta (Facebook). It lets you build complex UIs from small, isolated pieces of code called components.
Core Concepts
1. Components
React apps are built from components — independent, reusable pieces of UI:
JSX
// A function component (modern way)
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Using it
<Welcome name="Alice" />2. JSX
JSX looks like HTML but compiles to JavaScript function calls:
JSX
// JSX
const element = <h1 className="title">Hello, world!</h1>;
// Compiles to
const element = React.createElement('h1', { className: 'title' }, 'Hello, world!');3. Virtual DOM
React maintains a lightweight copy of the DOM (Virtual DOM). When state changes, React:
- Creates a new Virtual DOM tree
- Compares it with the previous one (diffing)
- Updates only the changed parts in the real DOM (reconciliation)
Create React App
Bash
npx create-react-app my-app
cd my-app
npm startProject Structure
Code
my-app/
├── public/
│ └── index.html
├── src/
│ ├── components/ # Reusable components
│ │ ├── Button.js
│ │ └── Card.js
│ ├── pages/ # Page-level components
│ │ └── Home.js
│ ├── hooks/ # Custom hooks
│ ├── utils/ # Helper functions
│ ├── App.js # Root component
│ ├── App.css
│ └── index.js # Entry point
├── package.json
└── README.mdYour First Component
JSX
// src/App.js
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<button onClick={() => setCount(count - 1)}>
Decrement
</button>
</div>
);
}
export default App;JSX Rules
JSX
// Return single root element (use Fragment for multiple)
function List() {
return (
<> {/* Fragment shorthand */}
<h1>Title</h1>
<p>Content</p>
</>
);
}
// Expressions in curly braces
<p>{2 + 2}</p>
<p>{user.name.toUpperCase()}</p>
<p>{isLoggedIn ? 'Welcome' : 'Please log in'}</p>
// Conditional rendering
{isLoading && <Spinner />}
{error ? <ErrorMessage /> : <Content />}
// Lists with keys
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
// Inline styles (camelCase)
<div style={{ color: 'red', fontSize: '16px' }}>Styled</div>
// className (not class)
<div className="container">Content</div>
// Self-closing tags required
<img src="photo.jpg" />
<input type="text" />Props
JSX
// Props are how data flows from parent to child
function UserCard({ name, email, avatar, isAdmin = false }) {
return (
<div className="card">
<img src={avatar} alt={name} />
<h3>{name}</h3>
<p>{email}</p>
{isAdmin && <span className="badge">Admin</span>}
</div>
);
}
// Using it
<UserCard
name="Alice"
email="alice@example.com"
avatar="/avatars/alice.jpg"
isAdmin
/>Event Handling
JSX
function Button() {
const handleClick = (e) => {
e.preventDefault();
console.log('Clicked!', e.target);
};
return (
<button onClick={handleClick}>
Click me
</button>
);
}
// Passing data to handlers
<button onClick={() => handleDelete(item.id)}>
Delete
</button>💡 Tip: React is all about thinking in components. Break your UI into small, composable pieces. Each component should do one thing well.
Next: Components and Props