The Beginner's Guide To React: Introduction

#react #beginners #webdev

What are the prerequisites for this tutorial?
You must have basic knowledge of HTML and JavaScript.

Note: In this tutorial, I am also using some features of ES6.

What is ES6?
ES6 is a recent version of JavaScript which introduces some new features to JavaScript.

What is React?
React is a JavaScript library for building user interfaces.

Who is the creator of React?
React is created by Jordan Walke, a software engineer at Facebook.

Set up for the tutorial
Create an index.html file and then open it into a Text Editor and then open index.html file into the web browser.

Add these two scripts at the end of the body tag.

<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>

html
Create a div element with an id root in the body tag.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
</body>

Open the index.html file in the web browser.

Syntax for creating React element:

React.createElement(type, [props], [...children]);

type: It could be a tag name String or a React Component type or a React Fragment type.
props: It could be a null or a Object. In Object, you can define the attributes of the tag name String or React Component type or React Fragment type.
children: It could be a String or a React element or it could be an array of Strings or React elements.

Note: The third parameter of the createElement method can be optional.

The createElement method create and return a new React element of the given type. The createElement method takes 3 parameters. The first parameter takes type and the second parameter takes the props and the third parameter takes the children.

Syntax for rending React element into the DOM in the supplied container:

React.render(element, container[, callback]);

The render method renders the React element into DOM in the supplied container. render method takes 3 parameters. The first parameter takes the React element and the second parameter takes the reference of the container. The third parameter takes a callback function which will be executed after the React element is rendered into the DOM in the supplied container.

Note: The third parameter of the render method is optional.

You can see that the String This will be replaced by React is replaced by the h1 element.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement("h1", null, "Hello, World");

      ReactDOM.render(element, rootElement);
    </script>
 </body>

Output

The can declare multiple String in an array.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement("h1", null, ["Hello,", "World"]);

      ReactDOM.render(element, rootElement);
    </script>
</body>

output

You can declare multiple React elements in an array.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById("root");

      const span1 = React.createElement("span", null, "span 2");
      const span2 = React.createElement("span", null, "span 2");

      const element = React.createElement("div", null, [span1, span2]);

      ReactDOM.render(element, rootElement);
    </script>
</body>

output

In the code given below, I have applied some in style to the React element.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement(
        "h1",
        {
          style: {
            border: "2px solid black"
          }
        },
        ["Hello,", "World"]
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>

output

There is one special prop called children who work the same way as the third parameter of the createElement method.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement("h1", {
        children: ["Hello,", "World"]
      });

      ReactDOM.render(element, rootElement);
    </script>
</body>

output

Note: You can also write multiple Strings or React elements without using an array.

<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement("h1", null, "Hello,", "World");

      ReactDOM.render(element, rootElement);
    </script>
</body>