React Components

What are Components?

Components are the building blocks of React applications. A component is a reusable, self-contained piece of UI that accepts inputs (called props) and returns JSX describing what should appear on screen.

Think of components like custom HTML elements — you define them once and use them anywhere. A page is built by composing many small components together.

Function Components (Modern React)

Since React 16.8, function components with Hooks are the standard way to write React. Class components still work but are no longer recommended for new code.

Function Components — Creating and Composing

// 1. Simple function component
function Hello() {
    return <h1>Hello, World!</h1>
}

// 2. Arrow function component (same thing)
const Greeting = () => {
    return <p>Welcome to React!</p>
}

// 3. Component with props
function UserCard({ name, email, avatar }) {
    return (
        <div className="user-card">
            <img src={avatar} alt={name} />
            <h2>{name}</h2>
            <p>{email}</p>
        </div>
    )
}

// 4. Component with default props
function Button({ label = 'Click me', variant = 'primary', onClick }) {
    return (
        <button
            className={`btn btn-${variant}`}
            onClick={onClick}
        >
            {label}
        </button>
    )
}

// Rules for components:
// 1. Name MUST start with uppercase (Button, not button)
// 2. Must return JSX (or null)
// 3. Must be a pure function — same props = same output
// 4. Never modify props directly

// src/components/Card.jsx
// A reusable Card component

function Card({ title, description, imageUrl, tags = [] }) {
    return (
        <div className="card">
            {imageUrl && (
                <img src={imageUrl} alt={title} className="card-image" />
            )}
            <div className="card-body">
                <h3 className="card-title">{title}</h3>
                <p className="card-description">{description}</p>
                {tags.length > 0 && (
                    <div className="card-tags">
                        {tags.map(tag => (
                            <span key={tag} className="tag">{tag}</span>
                        ))}
                    </div>
                )}
            </div>
        </div>
    )
}

export default Card

// src/App.jsx — Composing components
import Card from './components/Card'

const articles = [
    {
        id: 1,
        title: 'Getting Started with React',
        description: 'Learn the basics of React components and JSX.',
        tags: ['React', 'JavaScript', 'Frontend']
    },
    {
        id: 2,
        title: 'React Hooks Explained',
        description: 'Deep dive into useState, useEffect, and more.',
        tags: ['Hooks', 'React']
    }
]

function App() {
    return (
        <div className="app">
            <h1>My Blog</h1>
            <div className="card-grid">
                {articles.map(article => (
                    <Card
                        key={article.id}
                        title={article.title}
                        description={article.description}
                        tags={article.tags}
                    />
                ))}
            </div>
        </div>
    )
}

export default App

children Prop

children Prop — Wrapper Components

// children — content between opening and closing tags
function Panel({ title, children }) {
    return (
        <div className="panel">
            <div className="panel-header">
                <h3>{title}</h3>
            </div>
            <div className="panel-body">
                {children}  {/* renders whatever is between <Panel>...</Panel> */}
            </div>
        </div>
    )
}

// Modal wrapper
function Modal({ isOpen, onClose, children }) {
    if (!isOpen) return null
    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={e => e.stopPropagation()}>
                <button className="close-btn" onClick={onClose}>×</button>
                {children}
            </div>
        </div>
    )
}

// Usage
function App() {
    return (
        <div>
            <Panel title="User Info">
                <p>Name: Alice</p>
                <p>Email: alice@example.com</p>
            </Panel>

            <Modal isOpen={true} onClose={() => {}}>
                <h2>Confirm Action</h2>
                <p>Are you sure you want to delete this?</p>
                <button>Yes, Delete</button>
            </Modal>
        </div>
    )
}

Previous Next

React Components

What are Components?

Function Components (Modern React)

children Prop

Ready to Level Up Your Skills?