React 101 — React Component Basics

Tony
5 min readJul 19, 2024

Component-Based Development

Component-based development has become the mainstream trend in frontend development. Most frontend frameworks include the concept of components, sometimes called Components and sometimes Widgets.

React, in particular, places components at the core of frontend applications. However, regardless of the framework, almost every developer learning about frontend components encounters the following questions:

  • Is it always necessary to break down an application into components
  • Can I develop an entire application using just one component?
  • If breaking down into components is required, how do I start with the requirements document?
  • Should the granularity of component division be larger or smaller?
  • Are there any standards to refer to?

Well, there is no single standard for breaking down components. When breaking down components, you need to understand the business and interactions, design the component hierarchy, and test each breakdown using the principle of Separation of Concerns. Additionally, it’s important to avoid a common misconception: while components are a means of code reuse, not every component needs to be reusable.

Why Use Components?

--

--