Chaining components
Of course, in a component-based library you don't create just one component, you create several. In the project you deliver only one component that will be injected into your page, but within it you will have dozens, hundreds of other components, one way to use this is to have a chain linking components, that is, one component calling the other, that this has other several children.
To continue we need to understand this, one component will call the other, now let's go to the examples. Open your editor in the index.html file, created in our last article.
function MyComponente() {
return React.createElement("div", null, "Hello world");
}
This will be our main component. Now we are going to create four more components, the fifth of which is our first MyComponent function.
function MyComponent1(){
}
function MyComponent2(){
}
function MyComponent3(){
}
function MyComponent4(){
}
function MyComponent() {
return React.createElement("div", null, "Hello world");
}
Now, we want one component to be the parent of the other.
function MyComponent1(){
return React.createElement(MyComponent2)
}
function MyComponent2(){
return React.createElement(MyComponent3)
}
function MyComponent3(){
return React.createElement(MyComponent4)
}
function MyComponent4(){
return React.createElement('p', null, 'Component 4')
}
function MyComponent() {
return React.createElement("div", null, "Hello world");
}
What is happening is very simple, basically a component is calling your child, MyComponent1 is calling MyComponent2, it is calling MyComponent3 and this is calling MyComponent4 which returns the HTML paragraph ('p'), no properties (null), written Component 4.
Now, our first component created, MyComponent will call MyComponent1, looking like this:
function MyComponent() {
return React.createElement("div", null,
React.createElement(MyComponent1)
);
}
In this case, our main component (MyComponent) is rendering 1 (MyComponent1) and so on calling each other.
Looking in the browser
We have our Component 4 rendered, inside a div in a p.
<div id="app">
<div>
<p>Component 4</p>
</div>
</div>
Just out of curiosity, let's do this, put a wrapper and a container div.
It looked like this:
function MyComponent1() {
return React.createElement(
"div",
null,
React.createElement(MyComponent2)
);
}
function MyComponent2() {
return React.createElement(
"div",
null,
React.createElement(MyComponent3)
);
}
function MyComponent3() {
return React.createElement(
"div",
null,
React.createElement(MyComponent4)
);
}
function MyComponent4() {
return React.createElement("p", null, "Component 4");
}
function MyComponent() {
return React.createElement(
"div",
null,
React.createElement(MyComponent1)
);
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById("app")
);
What has changed now is that the code is more formatted and the Component is placed inside that div.
We will have a chain of divs within HTML, our gift. Staying like this:
<div id="app">
<div>
<div>
<div>
<div>
<p>Component 4</p>
</div>
</div>
</div>
</div>
</div>
Now let's add classes to these Components.
As I said the Null that we put in the second parameter of our functions is used to put properties, we could put, for example, an id:
function MyComponent1() {
return React.createElement(
"div",
{id: 'components'},
React.createElement(MyComponent3)
);
}
HTML:
<div id="app">
<div>
<div>
<div id="components">
<div>
<p>Component 4</p>
</div>
</div>
</div>
</div>
</div>
See this in inspecting browser elements.
Now let's put a class in place of the id, but in React you don't put class, as in HTML normally, you put className, see:
function MyComponent1() {
return React.createElement(
"div",
{ className: "components" },
React.createElement(MyComponent3)
);
}
Here, as an introduction, we use createElement, but normally in its coding JSX will be used, and in it the word class causes conflict because it is a JavaScript reserved word, so React had to change it to className. So when you want your tag to have a class, use className.
Everything done will look like this:
function MyComponent1() {
return React.createElement(
"div",
{ className: "components-1" },
React.createElement(MyComponent2)
);
}
function MyComponent2() {
return React.createElement(
"div",
{ className: "components-2" },
React.createElement(MyComponent3)
);
}
function MyComponent3() {
return React.createElement(
"div",
{ className: "components-3" },
React.createElement(MyComponent4)
);
}
function MyComponent4() {
return React.createElement(
"p",
{ className: "components-4" },
"Component 4"
);
}
function MyComponent() {
return React.createElement(
"div",
{ id: "components" },
React.createElement(MyComponent1)
);
}
HTML:
<div id="app">
<div id="components">
<div class="components-1">
<div class="components-2">
<div class="components-3">
<p class="components-4">Component 4</p>
</div>
</div>
</div>
</div>
</div>
Congratulations on getting here, it was a very intense read. This was the final code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
<div id="app"></div>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<script>
function MyComponent1() {
return React.createElement(
"div",
{ className: "components-1" },
React.createElement(MyComponent2)
);
}
function MyComponent2() {
return React.createElement(
"div",
{ className: "components-2" },
React.createElement(MyComponent3)
);
}
function MyComponent3() {
return React.createElement(
"div",
{ className: "components-3" },
React.createElement(MyComponent4)
);
}
function MyComponent4() {
return React.createElement(
"p",
{ className: "components-4" },
"Component 4"
);
}
function MyComponent() {
return React.createElement(
"div",
{ id: "components" },
React.createElement(MyComponent1)
);
}
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById("app")
);
</script>
</body>
</html>
And that's it for now, next article will come out as soon as possible! And in it we will deal with One-way data flow (One-way binding) which is the main difficulties that these component-based Javascript libraries and Framework have, which is:
If I have a chain of components, how do I pass values between them?
I will answer this and other questions in the next article, be sure to follow me on Twitter and here on Dev.to to see this amazing stuff!
Follow me on twitter: aqui.
Top comments (0)