React · Chapter 4 of 42
Components
Components are the building blocks of a React app — independent, reusable pieces of UI. A component is just a JavaScript function that returns JSX.
Component names must start with a capital letter so React can distinguish them from regular HTML tags.
Function components
The modern way to write React components is as plain functions returning JSX. They can accept props and use hooks.
Composing components
Components can render other components, allowing you to build complex UIs from small, testable pieces.
Example 1 (jsx)
function Welcome() {
return <h2>Welcome to React</h2>;
}
function App() {
return (
<div>
<Welcome />
<Welcome />
</div>
);
}Output
Welcome to React
Welcome to ReactThe App component renders the Welcome component twice.
Key points
- Components are reusable, self-contained UI building blocks.
- Function components return JSX.
- Component names must be capitalized.
- Components can be nested and composed together.
💡 Note: Keep components small and focused on a single responsibility for easier testing and reuse.