Summary - Components
- React course
- Beginner
- Lesson 12/84
- 5 min
Assemble a page skeleton by composing several small components.
Summary - Components
In this group you learned that components are JavaScript functions, how they nest, and the naming rules. Now it's time to put it together.
The typical flow: define the component as a function starting with a capital letter, return JSX inside it, call other components if needed, and export it. You can group multiple tags with a fragment.
In the next step you'll assemble a page skeleton from a few small components.
Practice Page skeleton
Complete the skeleton. Write a component called Page that calls <Header />, <Main /> and <Footer /> inside a fragment. Don't forget to export.
Starter code
// Write the Page component here
// Header, Main and Footer are already definedSample solution
function Page() {
return <><Header /><Main /><Footer /></>;
}
export default Page;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does a fragment do?
- Makes DOM
- Adds styling
- Stores state
- Groups multiple tags Correct answer
Explanation: A fragment groups multiple tags.
2 Match the flow steps
| Term | Meaning |
|---|---|
function |
Define |
return |
Return |
fragment |
Group |
export |
Export |