Component organization in React - Mini Project: Build & Apply

Organizing React Components for a User Profile Card

📖 Scenario: You are building a simple user profile card in React. To keep your code clean and easy to manage, you want to organize your UI into smaller components.Think of it like building a LEGO model: instead of one big block, you use smaller blocks that fit together nicely.

🎯 Goal: Create a React app with a main UserProfile component that uses two smaller components: UserName and UserDetails. This will show a user's name and details separately but together on the screen.

📋 What You'll Learn

Create a UserProfile component that holds the user data.

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

Create a UserDetails component that displays the user's email and city.

Use props to pass data from UserProfile to UserName and UserDetails.

Render the UserProfile component as the main app component.

💡 Why This Matters

🌍 Real World

Organizing components is like organizing parts of a recipe. Each part has a clear job, making it easier to cook (code) and change later.

💼 Career

React developers often split UI into components to keep code clean and manageable, especially in bigger apps.

1

Set up the user data in UserProfile

Create a React functional component called UserProfile. Inside it, create a constant called user with these exact properties: name: "Alice Johnson", email: "[e-mail]", and city: "New York". Return a <div> with the text User Profile inside.

React

function UserProfile() {
  // Your code here
}

Need a hint?

Remember to create a function named UserProfile and define the user object inside it.

2

Create the UserName component

Create a new React functional component called UserName that accepts a prop called name. It should return a <h2> element displaying the text User: followed by the name prop.

React

function UserProfile() {
  const user = { name: "Alice Johnson", email: "[e-mail]", city: "New York" };
  return User Profile;
}

// Your code here

Need a hint?

Define a function named UserName that takes { name } as props and returns an <h2> with the user name.

3

Create the UserDetails component

Create a React functional component called UserDetails that accepts props email and city. It should return a <div> containing two paragraphs: one with the text Email: plus the email prop, and another with the text City: plus the city prop.

React

function UserProfile() {
  const user = { name: "Alice Johnson", email: "[e-mail]", city: "New York" };
  return User Profile;
}

function UserName({ name }) {
  return User: {name};
}

// Your code here

Need a hint?

Create a function named UserDetails that takes { email, city } as props and returns a <div> with two paragraphs showing email and city.

4

Use UserName and UserDetails inside UserProfile

Update the UserProfile component to return a <div> that contains the UserName component with the name prop set to user.name, and the UserDetails component with props email set to user.email and city set to user.city.

React

function UserProfile() {
  const user = { name: "Alice Johnson", email: "[e-mail]", city: "New York" };
  // Your code here
}

function UserName({ name }) {
  return User: {name};
}

function UserDetails({ email, city }) {
  return (
    
      Email: {email}
      City: {city}
    
  );
}

Need a hint?

Inside UserProfile, return a <div> that uses <UserName /> and <UserDetails /> components with the correct props.