React Components
Components are the building blocks of React applications. They let you split the UI into independent, reusable pieces.
Function Components
The modern way to write React components:
jsx
1// Simple component
2function Welcome() {
3 return <h1>Hello, World!</h1>
4}
5
6// Arrow function syntax
7const Welcome = () => {
8 return <h1>Hello, World!</h1>
9}
10
11// Implicit return (for simple components)
12const Welcome = () => <h1>Hello, World!</h1>Using Components
Components are used like HTML tags:
jsx
1function App() {
2 return (
3 <div>
4 <Welcome />
5 <Welcome />
6 <Welcome />
7 </div>
8 )
9}Props (Properties)
Props are how you pass data from parent to child components:
jsx
1// Parent passes props
2function App() {
3 return (
4 <div>
5 <Welcome name="Alice" />
6 <Welcome name="Bob" />
7 <Welcome name="Charlie" />
8 </div>
9 )
10}
11
12// Child receives props
13function Welcome(props) {
14 return <h1>Hello, {props.name}!</h1>
15}
16
17// Destructured props (preferred)
18function Welcome({ name }) {
19 return <h1>Hello, {name}!</h1>
20}Multiple Props
jsx
1function UserCard({ name, age, email, isAdmin }) {
2 return (
3 <div className="card">
4 <h2>{name}</h2>
5 <p>Age: {age}</p>
6 <p>Email: {email}</p>
7 {isAdmin && <span className="badge">Admin</span>}
8 </div>
9 )
10}
11
12// Usage
13<UserCard
14 name="John Doe"
15 age={30}
16 email="john@example.com"
17 isAdmin={true}
18/>Default Props
jsx
1// Using default parameters
2function Button({ text = 'Click me', color = 'blue' }) {
3 return (
4 <button style={{ backgroundColor: color }}>
5 {text}
6 </button>
7 )
8}
9
10// Usage
11<Button /> // Uses defaults
12<Button text="Submit" /> // Custom text
13<Button text="Delete" color="red" /> // Custom bothProps are Read-Only
Never modify props directly:
jsx
1// ❌ Wrong - don't mutate props
2function Welcome({ name }) {
3 name = name.toUpperCase() // Don't do this!
4 return <h1>Hello, {name}!</h1>
5}
6
7// ✅ Correct - create a new variable
8function Welcome({ name }) {
9 const formattedName = name.toUpperCase()
10 return <h1>Hello, {formattedName}!</h1>
11}Passing Objects as Props
jsx
1const user = {
2 name: 'John',
3 age: 30,
4 email: 'john@example.com'
5}
6
7// Pass individual props
8<UserCard name={user.name} age={user.age} email={user.email} />
9
10// Spread operator (pass all properties)
11<UserCard {...user} />Children Prop
The special children prop contains nested elements:
jsx
1function Card({ children, title }) {
2 return (
3 <div className="card">
4 <h2>{title}</h2>
5 <div className="card-body">
6 {children}
7 </div>
8 </div>
9 )
10}
11
12// Usage
13<Card title="Welcome">
14 <p>This is the card content.</p>
15 <button>Click me</button>
16</Card>Component Composition
Build complex UIs by composing simple components:
jsx
1function Avatar({ user }) {
2 return <img src={user.avatar} alt={user.name} className="avatar" />
3}
4
5function UserInfo({ user }) {
6 return (
7 <div className="user-info">
8 <Avatar user={user} />
9 <span className="name">{user.name}</span>
10 </div>
11 )
12}
13
14function Comment({ author, text, date }) {
15 return (
16 <div className="comment">
17 <UserInfo user={author} />
18 <p className="text">{text}</p>
19 <span className="date">{date}</span>
20 </div>
21 )
22}Conditional Rendering
jsx
1function Greeting({ isLoggedIn, user }) {
2 // Early return
3 if (!isLoggedIn) {
4 return <p>Please log in</p>
5 }
6
7 return <h1>Welcome, {user.name}!</h1>
8}
9
10// Ternary operator
11function Greeting({ isLoggedIn }) {
12 return isLoggedIn ? <UserPanel /> : <LoginButton />
13}
14
15// Logical AND
16function Notifications({ messages }) {
17 return (
18 <div>
19 <h1>Notifications</h1>
20 {messages.length > 0 && (
21 <ul>
22 {messages.map(msg => <li key={msg.id}>{msg.text}</li>)}
23 </ul>
24 )}
25 </div>
26 )
27}Component Organization
Organize components in files:
src/
├── components/
│ ├── common/
│ │ ├── Button.jsx
│ │ ├── Card.jsx
│ │ └── Input.jsx
│ ├── layout/
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ └── Sidebar.jsx
│ └── features/
│ ├── UserCard.jsx
│ └── ProductList.jsx
├── App.jsx
└── main.jsx
Export and Import
jsx
1// Button.jsx
2export default function Button({ children }) {
3 return <button className="btn">{children}</button>
4}
5
6// Named export
7export function PrimaryButton({ children }) {
8 return <button className="btn btn-primary">{children}</button>
9}
10
11// App.jsx
12import Button, { PrimaryButton } from './components/Button'
13
14function App() {
15 return (
16 <div>
17 <Button>Default</Button>
18 <PrimaryButton>Primary</PrimaryButton>
19 </div>
20 )
21}Pure Components
Components should be pure - given the same props, they should always render the same output:
jsx
1// ✅ Pure - same input, same output
2function Greeting({ name }) {
3 return <h1>Hello, {name}!</h1>
4}
5
6// ❌ Impure - output changes even with same input
7let callCount = 0
8function Counter() {
9 callCount++
10 return <p>Called {callCount} times</p>
11}Components and props are the foundation of React applications!