Component composition in React - Mini Project: Build & Apply

Component Composition in React

📖 Scenario: You are building a simple user profile page. The page shows a user's name and a short bio. To keep your code clean and reusable, you want to split the page into smaller pieces called components.

🎯 Goal: Create a React app with two components: UserName and UserBio. Then compose them inside a parent component called UserProfile to display the user's name and bio together.

📋 What You'll Learn

Create a UserName component that shows the user's name.

Create a UserBio component that shows the user's bio.

Create a UserProfile component that uses UserName and UserBio inside it.

Use React functional components and hooks if needed.

Use JSX syntax correctly.

💡 Why This Matters

🌍 Real World

Component composition is how React apps build complex user interfaces by combining small, reusable pieces. This makes apps easier to build and maintain.

💼 Career

Understanding component composition is essential for React developers. It is a core skill used in almost every React project in the industry.

1

Create the UserName component

Create a React functional component called UserName that returns an <h1> element with the text "Alice Johnson".

React

// Create the UserName component here
// Your code here

Need a hint?

Remember, a React functional component is a function that returns JSX. Use function UserName() and return <h1>Alice Johnson</h1>.

2

Create the UserBio component

Create a React functional component called UserBio that returns a <p> element with the text "Frontend developer and coffee lover.".

React

function UserName() {
  return Alice Johnson;
}

// Create the UserBio component here
// Your code here

Need a hint?

Use the same pattern as UserName. Create a function UserBio that returns a paragraph with the bio text.

3

Create the UserProfile component

Create a React functional component called UserProfile that returns a <div> containing the UserName and UserBio components inside it.

React

function UserName() {
  return Alice Johnson;
}

function UserBio() {
  return Frontend developer and coffee lover.;
}

// Create the UserProfile component here
// Your code here

Need a hint?

Inside UserProfile, return a <div> that includes the UserName and UserBio components as JSX tags.

4

Render the UserProfile component

Add a React root render call that renders the UserProfile component inside an HTML element with the id root. Use ReactDOM.createRoot and root.render.

React

function UserName() {
  return Alice Johnson;
}

function UserBio() {
  return Frontend developer and coffee lover.;
}

function UserProfile() {
  return (
    
      
      
    
  );
}

// Render UserProfile inside the element with id 'root'
// Your code here

Need a hint?

Use ReactDOM.createRoot(document.getElementById('root')) to create the root, then call root.render(<UserProfile />) to show the component.