Component logic
- React course
- Beginner
- Lesson 9/84
- 4 min
Learn that a component is a function that returns JSX.
Component logic
A React component is a function that starts with a capital letter and returns JSX. For example, function Header() { return <h1>Title</h1>; } is a simple component.
When you call the component, React runs the function and renders the JSX it returns. You can call the same component multiple times; each call behaves like a separate copy.
Components must be pure functions: the same input always produces the same output. This rule lets React stay fast and reliable.
Component tree
You build a tree by calling components inside each other. App calls Header and Main; Main calls Card and Footer. This structure drives React's render order.
At the top of the tree there is always one root component. By default this is App, passed to createRoot inside main.jsx.
The deeper the tree, the more work React does. Splitting components into sensible pieces improves both readability and performance.
Practice Write a Header component
Complete the skeleton. Write a component called Header that returns <header> with <h1>Site title</h1> inside. Don't forget to export.
Starter code
// Write the Header component hereSample solution
function Header() {
return <header><h1>Site title</h1></header>;
}
export default Header;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does a component return?
- JSX Correct answer
- An array
- A number
- CSS
Explanation: Other types can't be rendered directly.
2 Root of the component tree
At the root of the tree there is usually the ____ component.At the root of the tree there is usually the App component.Explanation: App is usually the root component.
3 Match the tree pieces
| Term | Meaning |
|---|---|
App |
Root |
Header |
Top heading |
Main |
Main content |
Footer |
Footer |