DEV Community

Ayako yk
Ayako yk

Posted on

Understanding Components in React

#javascript #react #learning #frontend

After learning Node.js, I decided to dig deeper into React to advance my career as a frontend developer and move to the next level. In this post, I'll cover the fundamentals of components, along with some practical aspects. I'd appreciate any feedback or suggestions on what else I should include.

  1. Components
  2. Composition
  3. How to Make Components

Components
JavaScript frameworks provide powerful concepts for building components. A component represents a piece of the user interface (UI), ranging from a single button to an entire page.

A component is an independent chunk of code. It includes the necessary styles and logic to make it function correctly. This makes components reusable, easy to maintain, and easier to modify or debug.

Just like functions, components should be kept pure. A pure component does not modify any external objects or variables that existed before it was called. Given the same input, it should always return the same output. This behavior can be achieved by passing data as props rather than relying on preexisting variables.

In React, component names must begin with a capital letter, such as <Button />. This is because React uses JSX, and capital letters help React distinguish between custom components and HTML elements like <button>.

Composition
Composition is a way to build new components by combining other components.

  • A component is a reusable piece of UI code, often defined in a separate file.
  • Composition is the act of putting components together to build more complex components or even full pages.

Here's an example from Chakra UI:

<Popover.Root> <Popover.Trigger asChild> <Button>Open</Button> </Popover.Trigger> </Popover.Root>
Enter fullscreen mode Exit fullscreen mode

In this example, the Popover component includes multiple subcomponents under the same namespace. These subcomponents work together to create the full popover behavior.
The asChild prop is a special feature that allows a custom element (like Button) to receive the behavior of the Popover.Trigger, instead of using the default element.

How to Make Components
We can follow the definitions shared above to build components. However, if it is challenging to know where to start, we can look at existing UI components from libraries like Chakra UI, Tailwind CSS, or Figma UI Kits for inspiration.

UI/UX designers often follow the Atomic Design Methodology, which organizes components in a structured way. The idea comes from chemistry: each interface is made up of Atoms, Molecules, and Organisms with Templates and Pages added when designing full web pages.

Without components, the code may still work, so it can be challenging at first to know how to break things down. But once we understand the fundamentals and explore many commonly used UI components, we'll start to recognize patterns. Over time, this will help us build components with clarity and confidence.

Top comments (0)