3.15 duty 1 time to practice react and component basic

Time to practice. Inside the components folder we add two new files: Expenses.js and Expenses.css. We move the code that currently sits in App.js — the four <ExpenseItem /> usages — into the new Expenses component so that App.js stays tidy. ExpenseItem is imported at the top of Expenses.js, and the new Expenses.css hosts the wrapper rules.

Creating a reusable Card component

  • Create Card.js (capital C) and Card.css in the components folder.
  • The component returns a single div wrapping {props.children}, exported with export default Card;.
  • To allow consumers to pass extra classes, declare const classes = 'card ' + props.className; and assign className={classes} on the root div.

The visual goal of Card is a container with rounded corners and a drop shadow, which is why we name it Card. We move the box-shadow and border-radius rules out of ExpenseItem.css into Card.css so any element wrapped in <Card> inherits the same look. 

function Card(props) {
  const classes = 'card ' + props.className;
  return <div className={classes}>{props.children}</div>;
}

export default Card;

Inside ExpenseItem.js we import Card and replace the outer <div className="expense-item"> with <Card className="expense-item">. Because Card appends its own card class on top of whatever className the parent passes, the existing layout keeps working and we gain a reusable wrapper for future components. See you in the next lesson.

Summary

This lesson is a hands-on React practice session focused on building reusable components. Students learn to extract styling logic into separate CSS files and create a reusable Card component that can be imported and used across multiple pages. The lesson covers essential component fundamentals including props management, CSS styling with box-shadow and border-radius, and proper file organization for scalable React applications.

Key points

  • Create reusable React components by extracting UI logic into separate files (Card component)
  • Use CSS properties like box-shadow and border-radius to style React components as cards
  • Import and export components correctly to make them accessible across different pages and files
  • Manage component props including children to pass content into reusable components
  • Use className attribute in React to apply CSS styles and avoid naming conflicts
  • Organize React projects with separate folders for components, styles, and related files

FAQ

What is the purpose of creating a separate Card component?

The Card component creates a reusable UI element that can be applied to different sections of the application (like the Expenses list). By extracting it into its own file, you avoid code duplication and make styling consistent across the application.

Why do we use className instead of class in React?

React uses className because class is a reserved keyword in JavaScript. The className attribute maps to the HTML class attribute and allows you to apply CSS styles to React components.

What is props.children and how is it used?

props.children is a special prop in React that allows you to pass content (child elements) into a component. In the Card component example, children represents the content wrapped inside the Card, which is then rendered inside the component's return statement.