The Beginner's Guide To React: Introduction
Tags: react, beginners, webdev
Published: 2020-03-27 14:37:38

**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.

```html
<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.

```html
<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.
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291046/the-begineer%27s-guide-to-react/zchx35lxt0hj3h6dmsrn.png)

**Syntax for creating React element:** 
```javascript
React.createElement(type, [props], [...children]);
```

1. **type:**
It could be a **tag name String** or a **React Component** type or a **React Fragment** type.
2. **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.
3. **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:**
```javascript
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.

```html
<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**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291055/the-begineer%27s-guide-to-react/gsaa3sxzk1hpidi6aty1.png)

The can declare multiple String in an array.

```html
<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**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291052/the-begineer%27s-guide-to-react/tyiwvmxrr9hwc7mbissq.png)

You can declare multiple React elements in an array.

```html
<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**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291049/the-begineer%27s-guide-to-react/fnqa2wewvlnlzbyjkr6x.png)



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

```html
<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**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291065/the-begineer%27s-guide-to-react/vh71b2nssg2jufgoaviq.png)

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

```html
<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**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291061/the-begineer%27s-guide-to-react/kby431cr3deigomtgouk.png)

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

```html
<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**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585291061/the-begineer%27s-guide-to-react/kby431cr3deigomtgouk.png)