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
}

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

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

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}
    
  );
}

Hint

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

Practice

1. What is the main benefit of organizing React components by their role or feature?

easy

A. It makes the app run faster

B. It automatically fixes bugs in the code

C. It reduces the size of the final app bundle

D. It keeps the code clean and easier to maintain

Solution

1. Step 1: Understand component organization purpose

   Organizing components by role or feature helps keep the codebase structured and clean.

2. Step 2: Identify the main benefit

   This organization makes the code easier to read, maintain, and update over time.

3. Final Answer:

   It keeps the code clean and easier to maintain -> Option D

4. Quick Check:

   Clean code = B [OK]

Hint: Think about code clarity and maintenance benefits [OK]

Common Mistakes:

• Confusing organization with app speed
• Assuming organization reduces bundle size
• Believing organization fixes bugs automatically

2. Which of the following is the correct way to define a simple functional React component named Button?

easy

A. function Button() { return Click me; }

B. class Button extends React.Component { render() { return Click me; } }

C. const Button = () => { Click me }

D. function Button() { Click me }

Solution

1. Step 1: Check functional component syntax

   A functional component returns JSX inside the function body using return statement.

2. Step 2: Identify correct syntax

   function Button() { return Click me; } correctly defines a function returning JSX. const Button = () => { Click me } misses return. class Button extends React.Component { render() { return Click me; } } is a class component, not functional.

3. Final Answer:

   function Button() { return <button>Click me</button>; } -> Option A

4. Quick Check:

   Functional component needs return [OK]

Hint: Functional components must return JSX explicitly [OK]

Common Mistakes:

• Omitting return statement in arrow functions
• Confusing class and functional component syntax
• Not returning JSX from the function

3. Given the code below, what will be rendered on the screen?

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

medium

A. Error: name is undefined

B. Hello, name!

C. Hello, Alice!

D.

Solution

1. Step 1: Understand props usage in Greeting

   The Greeting component receives a prop called name and uses it inside JSX to display a greeting.

2. Step 2: Check how App uses Greeting

   App passes the string "Alice" as the name prop, so Greeting renders <h1>Hello, Alice!</h1>.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option C

4. Quick Check:

   Props passed correctly = C [OK]

Hint: Props replace placeholders with actual values [OK]

Common Mistakes:

• Thinking props are not passed automatically
• Expecting literal 'name' string instead of value
• Confusing JSX tags with strings

4. Identify the error in this React component organization:

function Header() {
  return <header>Welcome</header>;
}

function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}

medium

A. Footer component is used but not defined or imported

B. Header component should be a class component

C. App component must return a single element without div

D. Header component should not use semantic tags

Solution

1. Step 1: Check component usage in App

   App uses <Header /> and <Footer /> components inside a div.

2. Step 2: Verify component definitions

   Header is defined, but Footer is neither defined nor imported, causing an error.

3. Final Answer:

   Footer component is used but not defined or imported -> Option A

4. Quick Check:

   Undefined component usage = A [OK]

Hint: All used components must be defined or imported [OK]

Common Mistakes:

• Assuming class components are required
• Thinking multiple elements need no wrapper
• Believing semantic tags cause errors

5. You want to organize a React app with a main Dashboard component that uses smaller components like Sidebar, Content, and Footer. Which approach best follows good component organization?

hard

A. Put all JSX for Sidebar, Content, and Footer inside Dashboard's single file

B. Create separate files for Sidebar, Content, and Footer components and import them into Dashboard

C. Write Sidebar, Content, and Footer as functions inside Dashboard component function

D. Combine Sidebar and Footer into one component and Content separately, all in Dashboard file

Solution

1. Step 1: Understand component reusability and clarity

   Separating components into their own files makes code easier to read, reuse, and maintain.

2. Step 2: Evaluate options for organization

   Create separate files for Sidebar, Content, and Footer components and import them into Dashboard creates separate files and imports them, which is best practice. Other options mix concerns or reduce clarity.

3. Final Answer:

   Create separate files for Sidebar, Content, and Footer components and import them into Dashboard -> Option B

4. Quick Check:

   Separate files for components = A [OK]

Hint: Separate components into files for clarity and reuse [OK]

Common Mistakes:

• Putting all code in one file making it messy
• Defining components inside other components unnecessarily
• Combining unrelated components reducing modularity