The statement means that a React user interface is built entirely by combining components: small, reusable, self-contained pieces that each manage their own markup, logic and (optionally) state.
Justification
- The UI is a tree of components. A page is split into parts such as
App→Navbar,Sidebar,ProductList→ProductCard,Footer. Even the whole application is one root component rendered into the page. - A component is just a function (or class) that returns UI. Buttons, forms, layouts, pages and even route definitions (
<Route>) are components. - Reusability: the same component is used many times with different props, e.g. one
ProductCardfor 100 products. - Encapsulation: each component holds its own JSX, styling and state, so it can be developed and tested independently.
- Composition: complex components are made by nesting simpler ones, instead of using inheritance.
- Data flow: data passes from parent to child through props; changes in a component's state re-render only that part of the tree.
Example
function Button({ label }) {
return <button>{label}</button>;
}
function Navbar() {
return (
<nav>
<Button label="Home" />
<Button label="Login" />
</nav>
);
}
function App() {
return <div><Navbar /><h1>Welcome</h1></div>;
}
Here App is made of Navbar, which is made of Button components: everything visible on screen comes from components. This makes React apps modular, maintainable and easy to scale.