Forem: Juan Pablo

👩‍💻 React JS - BEST GUIDE for Beginners! (part 2🔥)

Juan Pablo — Thu, 22 Oct 2020 14:21:14 +0000

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.

👩‍💻 React JS - BEST GUIDE for Beginners! (part 1)

Juan Pablo — Wed, 21 Oct 2020 16:50:18 +0000

React JS is a component-based JavaScript library (not framework)! This is very important information, as every type of library has its strengths and limitations.

Exit swallowing React JS code will not help you, it is very important to know the proposal, see the solutions proposed by the library.

In this series of articles we also set up Babel JS to transpile JSX to JavaScript. As a bonus you will finally understand Babel;)

Like any component-based library, it has its limitations when it comes to propagating information between components, since it works with one-way data binding, here we see its solutions such as the Composition and Context API technique.

We also talk about the state of the component, we use Hook useState and a technique called Lifting State UP. Finally, I show the component's lifecycle using another Hook: useEffect.

This may be the best tutorial for beginners that you will find, in it, I will deal with:

What are components
Starting with CDN
Chaining components
One-way data flow (One-way binding)
Context API
Babel JS - Transpiring JSX
Composition
Component status - Using React Hooks: useState
Lifting State Up
Component life cycle with Hook useEffect (Example saving data to local storage)

That will be divided between some articles, in this you will learn What are components and Starting with CDN, it won't be long before the next ones come out.

What are components

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Creating simple HTML.

<!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>

</body>
</html>

Everything will be done in this index for better understanding.

<!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>

  <script>
    function MyComponent(){

    }
  </script>
</body>
</html>

The MyComponent function could already be a component in React.

Starting with CDN

Now we need to inject React to start the game, we will use the CDN for testing purposes, but to create a more robust application it must be installed with NPM or Yarn.

Go here to get the links to get started.

Your index.html should look like this:

<!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>
  <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 MyComponent(){

    }
  </script>
</body>
</html>

The first link of the CDN is the entire React, the entire library, the virtual DOM, everything that can be understood as React.

The second link is the React DOM for you to inject the React components on the page or generate a string and do the rendering via Back-end

In that case it will be injected into a div called app:

<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 MYComponent(){

    }
  </script>
</body>

Now all the components that we are going to generate via React will be injected into this

React DOM has this role of injecting on the page, so we will use a global variable called ReactDOM that the second CDN link generated for us, and now we have the render method next to it.

ReactDOM.render()

It is very simple, basically you say which component you want to inject and where it will be injected.

In this case we will use the MyComponent function to be injected, it will look like this:

<script>
    function MyComponent(){

    }

    ReactDOM.render(
      MyComponent
    )
  </script>

However, it is not ready yet, MyComponent is a normal JavaScript function, React does not yet know that this is a component, to know we need to use a method of React called createElement.

CreateElement accepts three main parameters, the first is the component, the second are properties that I wanted to pass on to him, which we will talk about next, the third are the children of this component that we are not going to address at the moment.

ReactDOM.render(
      React.createElement(MyComponent)
    )

We will ignore the other parameters for now, and we will pass only the component.

Now just say where this component will be injected, manipulating the DOM.

ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );

We finished this part, our code looks like this so far:

<!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 MyComponent() {

      }

      ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

As you noticed our component MyComponent is empty, and to create these tags that would be HTML tags, div, span, etc., in React everything is created with this function React.createElement, with the same syntax.

So let's start creating, our component will look like this:

function MyComponent() {
        return React.createElement("div", null, "Hello world");
      }

As explained previously there will be three parameters, in the first we put an HTML tag inside strings, it could be span, h1, in this case I put a div, in the second parameter are properties like classes, id, style, any attribute inside an object could be placed, in this case I put null, and the third onwards are the children of that tag, in our case the children of that tag was a string.

As you can see we also have a return to the beginning, this is because every component must return an output of the function with React elements.

Saving we will see this div being rendered through React:

Inspecting the element is there our div

Switching to h1

<script>
      function MyComponent() {
        return React.createElement("h1", null, "Hello world");
      }

In React, you will never have just one component, in fact, you will have several one calling the other, always one will be the main one that will render the entire page that will call all the others.

That each one will have children.

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 MyComponent() {
        return React.createElement("h1", null, "Hello world");
      }

      ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

The component section is now online! Click on the link below to see the continuation, it shows what makes React one of the best solutions for the front end, the components! It can work wonders.

Follow me on Twitter for updates Here

Credits: Programador a bordo