3.17 a first summary

Let's take a step back. This section was all about components, which is the single most important concept in React: you build user interfaces by assembling and combining small, focused components. We also learned how to share data between them through the props mechanism, so that a parent can configure how a child renders.

You may have already noticed one important benefit. By splitting our code into multiple files and small building blocks, if we want to show several expenses we do not duplicate any markup — we simply reuse our custom ExpenseItem component as many times as needed. That reuse is exactly the idea behind components: in the end, what reaches the screen is still standard HTML, but it is generated by composing our own custom elements.

What we have so far

  • A reusable ExpenseItem component that receives title, amount and date via props.
  • An ExpenseDate sub-component dedicated to rendering the date block.
  • A generic Card wrapper that adds the rounded-corner / shadow style around any child content.
  • An Expenses parent component that lists every entry coming from App.js.

The application we have built so far is great because it gave us the chance to learn about components and props — two of the most important concepts you will ever work with in React. But notice one limitation: the data is still static. Everything is set in stone in App.js and cannot change at runtime. That is exactly what we are going to fix in the next section, where we bring the UI to life by introducing a new concept called state.

Summary

This lesson recaps the Components section, emphasizing that components are React's most important concept for building user interfaces as reusable building blocks. Key topics include sharing data between components via props, dividing code into multiple files to avoid repetition, and understanding that the final output is standard HTML elements. The lesson concludes by previewing the State concept, which will be introduced in the next section to make applications dynamic.

Key points

  • Components are the most important concept in React for building user interfaces
  • Components are reusable building blocks—the ExpenseItem component can be used multiple times instead of repeating code
  • Props (or 'accessories') enable data sharing between parent and child components
  • Code is divided into multiple files and building blocks for modularity and maintainability
  • The final output rendered on screen consists of standard HTML elements
  • State will be introduced next to transform static applications into dynamic ones

FAQ

What is the main purpose of using components in React?

Components serve as reusable building blocks that allow developers to divide code into separate files and combine them modularly. This prevents code repetition and makes applications easier to maintain and scale.

How do components communicate and share data?

Components share data through props, which allow information to flow from parent components to child components, enabling data reuse across the component tree.

What comes after learning components and props?

The next topic is State, which will enable applications to become dynamic by allowing data to change and update over time, moving beyond the currently static data structure.