"Life is not about finding yourself. Life is about creating yourself." - George Bernard Shaw

What exactly is a component?

So far, we’ve mentioned the word Component a lot. And it forms one of the prominent building blocks of React. But, what exactly is a component?

A React component is a piece of code that controls a part of a user interface. Components can accept input (via props) and output UI elements, data, or behaviors. They are composed of one or more elements such as functions, classes, or other React components, and can be reused throughout an application.

A component can be a function or a class.

Function component

Here's an example of a functional component:

Notice how this is just a normal function in JavaScript with the only difference being that it returns back some JSX.

Class component

Here's an example of a class component:

Both of these components accept a name prop and render a <h1> element with the name value inside it.

Components are a powerful way to reuse code and build complex UIs in a declarative and organized way. They are a fundamental concept in React, and you'll use them a lot as you build React applications.

Few more React concepts

Composition in React

In React, composition refers to the way in which components can be combined to create more complex user interfaces. This is like the lego example I mentioned previously! This is done by nesting components inside other components, allowing for the reuse of common functionality across different parts of the application.

React's composition model is based on the idea that a component should only be responsible for a small piece of the overall user interface, and that by composing these small pieces together, it is possible to create more complex and powerful user interfaces. This allows for a more modular and maintainable codebase.

React composition model is considered as one of its key features, it provides a powerful way to structure and organize your code, making it more readable and maintainable, and also allows for the reuse of common functionality across different parts of your application.

Atomic design

This is a good place to introduce the concept of Atomic design. Atomic design is a methodology for designing and developing user interfaces in a modular manner by putting the focus on building components rather than applications. It is popularly known within the design world and helps to build consistent, solid and reusable design systems. But, it’s use can also be extended to the React world. According to this methodology, we start from the smallest atomic pieces of user interface, which is an atom (that cannot be broken down further). On top of that, we build molecules, and then organisms, templates and finally pages.

Resources