Components & the Component Tree
A React app is a tree of components, each returning a piece of UI.
Every React app is a tree of components. A top-level App component renders child components, which render their own children, and so on down to the smallest button or label.
Single Page Applications
Most React apps are SPAs (Single Page Applications). The browser loads one HTML page, and React updates the visible UI in place as the user interacts — no full page reloads.
Example
function Header() {
return <header>My Site</header>;
}
function Footer() {
return <footer>© 2026</footer>;
}
function App() {
return (
<div>
<Header />
<main>Welcome!</main>
<Footer />
</div>
);
}When to use it
- A social-media feed app navigates between Home, Profile, and Notifications tabs without a browser reload because React manages the view as a component tree.
- A project-management tool renders Sidebar, Board, and TaskModal as separate components so each can be updated independently when data changes.
- A SaaS dashboard replaces iframe-based micro-frontends with a React component tree so state can flow naturally between the nav and content area.
More examples
Simple component tree
Shows App acting as the root of a component tree by composing Sidebar and Content children.
function Sidebar() { return <nav>Sidebar</nav>; }
function Content() { return <main>Content</main>; }
function App() {
return (
<div className="layout">
<Sidebar />
<Content />
</div>
);
}Multi-level component nesting
Illustrates two levels of nesting: UserCard wraps Avatar, each with a single responsibility.
function Avatar({ src }) {
return <img src={src} alt="avatar" className="avatar" />;
}
function UserCard({ name, avatar }) {
return (
<div className="card">
<Avatar src={avatar} />
<span>{name}</span>
</div>
);
}Client-side view switching
Demonstrates single-page behaviour: swapping rendered components via state instead of loading a new URL.
import { useState } from 'react';
function App() {
const [page, setPage] = useState('home');
return (
<>
<nav>
<button onClick={() => setPage('home')}>Home</button>
<button onClick={() => setPage('profile')}>Profile</button>
</nav>
{page === 'home' ? <HomePage /> : <ProfilePage />}
</>
);
}
Discussion