React Components
Components are the building blocks of every React application, and function components let you nest and combine them to build complex interfaces from simple pieces.
Defining a Function Component
A function component is a plain JavaScript function whose name starts with a capital letter and that returns JSX describing the UI. It can be defined with the function keyword or as an arrow function assigned to a variable.
Two Ways to Define a Component
function Header() {
return <h1>My Site</h1>;
}
const Footer = () => {
return <footer>© 2026 My Site</footer>;
};
function App() {
return (
<div>
<Header />
<Footer />
</div>
);
}
export default App;Nesting Components
Components become powerful when you nest them inside one another. A parent component can render any number of child components, treating each one just like a custom HTML tag.
Nesting Header and Footer Inside a Page
function Header() {
return <h1>My Site</h1>;
}
function Footer() {
return <footer>© 2026 My Site</footer>;
}
function Page() {
return (
<div>
<Header />
<p>Welcome to the homepage.</p>
<Footer />
</div>
);
}
export default Page;Composing Components With children
The special children prop lets a component render whatever markup is placed between its opening and closing tags, making components flexible containers rather than rigid templates.
A Reusable Card Wrapper Using children
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<h2>Special Offer</h2>
<p>Save 20% today only.</p>
</Card>
);
}
export default App;Breaking a UI Into Components
A common real-world task is splitting a page into logical pieces. Consider a simple blog post page made up of a title, an author byline, and a list of comments — each naturally becomes its own component.
- Identify repeating or logically distinct pieces of UI (title, byline, comment list).
- Give each piece its own function component with a clear, capitalized name.
- Compose them together inside a parent component like PostPage.
- Keep components small and focused on a single responsibility.
Composing a Blog Post Page
function Title({ text }) {
return <h1>{text}</h1>;
}
function Byline({ author }) {
return <p className="byline">By {author}</p>;
}
function CommentList({ comments }) {
return (
<ul>
{comments.map((c) => (
<li key={c.id}>{c.text}</li>
))}
</ul>
);
}
function PostPage() {
const comments = [
{ id: 1, text: 'Great read!' },
{ id: 2, text: 'Thanks for sharing.' },
];
return (
<article>
<Title text="Learning React Components" />
<Byline author="Jane Doe" />
<CommentList comments={comments} />
</article>
);
}
export default PostPage;Exercise: React Components
How must a custom component's name be capitalized to work correctly in JSX?
