Summary - Components

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.

Exercise Page skeleton

Complete the skeleton. Write a component called Page that calls <Header />, <Main /> and <Footer /> inside a fragment. Don't forget to export.

Show example solution

function Page() {
  return <><Header /><Main /><Footer /></>;
}

export default Page;

Test yourself

What does a fragment do?
- Makes DOM
- Adds styling
- Stores state
- Groups multiple tags
Show answer

Groups multiple tags — A fragment groups multiple tags.
Match the flow steps

function

Define
return

Return
fragment

Group
export

Export

Next lesson: Project: Profile card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies