Introduction to Components

In the previous section, we looked at how we can create complex elements using JSX. However, React has components that we can do the same, and more, in a neater manner.

React components are reusable blocks of code that render parts of the user interface. They allow for a top-down data flow, as data can be passed down to nested components. Components can also hold a state, which triggers re-renders upon data changes. Components are defined using JavaScript and JSX syntax, which promotes modularity and code reuse, making it easier to create complex user interfaces.

Following is an example of a simple component-based application:

Note: Drag the slider from the left to access the code.

You don't need to understand all the code, as everything will be explained in the later sections. However, taking a brief look and getting more acquainted with the program's structure will help.

In React, there are two types of components: class components and functional components.

Class components are also known as stateful components because they can hold a state, which allows the component to update based on changes in data. Previously, functional components were referred to as stateless components, but with the introduction of Hooks (which we will cover later), functional components can now also hold a state.

The distinction between functional and class components is now primarily a syntactical difference thanks to the more recent updates, so it's not necessary to learn both. In this course, we will focus on functional components since they are simpler, and the React community recommends using them.