por React is a JavaScript library that allows us create user interfaces in the process of developing single page applications. These applications are also known as SPA, as this is the acronym of their name in English: single page application. Within React, there are two main types of objects: elements and components. In this post, we will teach you What components are and how they work in React.
Before starting
Compared to elements, components in React have a more different and complex logic. Thus, To teach you what components are in React, we will use a more practical example. Suppose we have the following element, which, although we have created it with a line of JSX code, we could have easily created it with the command react.create element:
In the lines of code above, we have created an element script within which we have created three constants. The constant rootElement It serves the sole purpose of storing the ‘root’ ID of the element. For their part, the constants helloworld and goodbyeWorld they keep spans with a message similar to your name.
So, suppose we want to create more spans with specific messages. Do the same process of creating a constant in which we save a span with a text it can get tedious. Thus, We could create a function in which we pass a text and the program returns the text contained within a span.
Here’s how we use components in React to create this function:
In the above lines of code, we have created a new constant Message. This constant is actually a function type component that pick up the object props of an element and makes its property msg is locked inside a span. Then, we have defined an element elementsin which we have inserted the components Message, each with a msg equated to different messages. These will be the ones passed through the function Message.
Don’t forget that, for a component to be rendered by ReactDOM, you must ensure that its name is written with the first letter in capital letters. In this way, when React.createElement want to create an element to pass to ReactDOM, can distinguish between a native or pure DOM element, such as a div, and an element that we have created.
What are components in React?
As you have seen in the previous example, Components in React are functions that receive the properties object props as a parameter and return React elements. Then, we can use the properties that make up the object props to execute automatic actions. In the previous example, we use them to access a text msg and transform it into a span with said text.
There are two types of components in React:
On the one hand, there are function type components like the previous example, which are written like this:
const Welcome = (props) =>
;
On the other hand, there are class type components that are written as follows:
class Welcome extends React.Component {
render() {
return (
);
}
}
As you can see in the previous lines of code, to access a property of the object props in a class type component you must use the command Este. This command has the same meaning as in JavaScript, so we recommend you read our post about what it is. Este in JavaScript to learn more about it. Furthermore, every class-type component must have a type function render, which basically defines what is going to be rendered on the screen. Inside this function is where we insert our return.
In practice, We will use the function-type component format in React much more often. With this method, we not only save lines of code, but also avoid dealing with Estea command that is not always as specific as we want.
Do you dare to continue learning?
Now that you know what components are and how they work in React, You are closer to mastering this great programming tool. At , we invite you to continue learning with us about this and other tools in our Full Stack Web Development Bootcamp. There, among many other things, you will learn to master JavaScript, React, CSS and HTML, becoming an expert in web development in a few months. Dare to enroll!