Components
A component is a function that returns JSX. Names must start with a capital letter. Use them like HTML tags: <Button />. Small components compose into larger UI sections, making code reusable and easy to maintain.
React Components // Function component
function Greeting({ name }) {
return Hello, {name}! ;
}
// Arrow component
const Button = ({ label, onClick }) => (
{label}
);
// Using components
function App() {
return (
alert("Hi")} />
);
}
Test your understanding before moving on
1. What is a React component?
A. A database model
B. A reusable UI piece
C. A CSS class
D. An HTML file
💡 React components are reusable, independent pieces of UI.
2. Function components return:
A. A string
B. A number
C. JSX
D. An array always
💡 Function components must return JSX (or null to render nothing).
3. How do you use a component?
A. import(); component()
B. <ComponentName />
C. component.render()
D. React.use(Component)
💡 Components are used in JSX as HTML-like tags: <ComponentName />.
4. Component names must be:
A. Lowercase
B. Uppercase first letter
C. Camel case (any case)
D. Prefixed with React
💡 React components must start with an uppercase letter to distinguish from HTML tags.
5. What is composition in React?
A. Database relations
B. Building UIs from smaller components
C. CSS layers
D. Code splitting
💡 Composition means building complex UIs from smaller, reusable components.