React Functional Components Props, State, Hooks

What Are Components?

Components are the building blocks of a React application. A component is a reusable piece of UI that returns JSX. Instead of building one large page, React encourages you to split the interface into small parts such as a header, sidebar, button, card, table row, or form.

This component-based model makes large interfaces easier to understand because each part has a clear responsibility. A good component usually represents one meaningful piece of the screen.

Why Components Are Useful

Reusability lets you use the same UI in many places
Organization keeps big screens easier to manage
Maintainability limits changes to the part of the UI they affect
Composition lets small components build bigger interfaces

Function Components

Modern React mainly uses function components. A function component is simply a JavaScript function that returns JSX.

Basic Components

function Hello() {
    return <h2>Hello, React!</h2>
}

export default Hello

Function Components - JSX Example

import Hello from './Hello'

function App() {
    return (
        <div>
            <h1>My First App</h1>
            <Hello />
        </div>
    )
}

export default App

Rules for Creating Components

Component names should start with an uppercase letter such as Header or UserCard
A component should return JSX or null
Each component should focus on one clear UI responsibility
Components can call other components to build larger layouts

Component Composition

A React interface is usually created by combining many smaller components. This is called composition. For example, a page might contain a navbar, a sidebar, a main content area, and a footer.

Composing Components

function Navbar() {
    return <nav>My Website</nav>
}

export default Navbar

Component Composition - JSX Example

function Footer() {
    return <footer>Copyright 2026</footer>
}

export default Footer

Component Composition - JSX Example 2

import Navbar from './Navbar'
import Footer from './Footer'

function App() {
    return (
        <div>
            <Navbar />
            <main>
                <h1>Home Page</h1>
                <p>Welcome to the site.</p>
            </main>
            <Footer />
        </div>
    )
}

export default App

Reusable Components

Components become truly powerful when they are reusable. Instead of writing similar markup many times, you can create one component and feed it different props.

Reusable card Component

function Card({ title, description }) {
    return (
        <div className="card">
            <h3>{title}</h3>
            <p>{description}</p>
        </div>
    )
}

export default Card

Reusable Components - JSX Example

import card from './Card'

function App() {
    return (
        <div>
            <Card title="React" description="Learn components and props." />
            <Card title="JSX" description="Write HTML-like syntax in JavaScript." />
        </div>
    )
}

export default App

The children Prop

Some components are designed to wrap other content. React passes that inner content through a special prop called children.

children Prop Example

function Panel({ title, children }) {
    return (
        <div className="panel">
            <h3>{title}</h3>
            <div>{children}</div>
        </div>
    )
}

function App() {
    return (
        <Panel title="User Info">
            <p>Name: Alice</p>
            <p>Role: Admin</p>
        </Panel>
    )
}

How to Think About Good Components

A good component usually has one clear job, accepts only the data it needs, and stays easy to reuse. If a component becomes too large, contains unrelated logic, or is hard to understand at a glance, it often means it should be split into smaller pieces.

Use Reducer Failure Cases

Mistake	Why it hurts	Better approach
Making components too large	Harder to read, reuse, and test	Split large UI blocks into smaller components
Naming components with lowercase letters	React treats them like HTML tags	Always start component names with uppercase letters
Putting unrelated responsibilities in one component	Creates confusing code	Keep each component focused
Repeating similar markup instead of reusing a component	Increases maintenance work	Create reusable components with props

Best Practices

Keep components small and focused on one job
Use composition to build larger screens from smaller parts
Prefer reusable components when markup repeats
Give components clear and meaningful names
Use the children prop when a component should wrap custom content

Summary

React components help you break the UI into small, reusable pieces. They make applications easier to build, understand, and maintain. Once you understand how components work, the next step is learning how to pass data into them through props.

Before you move on