An Intro to Raw React APIs
Tags: react, beginners, tutorial, webdev
Published: 2020-10-25 18:05:56

**What is React?**
In simple words, React is just a JavaScript library for building User Interface.

React allows you to build a complex User Interface by composing small and simple components.

React uses the same browser APIs under the hood that you use while creating [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) Nodes using JavaScript.

In Fact, [Here where that happens in the React source code](https://github.com/facebook/react/blob/48907797294340b6d5d8fecfbcf97edf0691888d/packages/react-dom/src/client/ReactDOMComponent.js#L416) at the time of writing this article.

React is declarative which means it abstracts out the imperative browser API and gives you more declarative APIs.

Before we start with React let's first create a `` div`` [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) node with the text content ``"Hello World"`` using JavaScript.

It will help you to understand a little bit better how React really works under the hood.

**Sample Code**
```html
<body>
  <div id="root"></div>
  
  <script>
    const rootElement = document.getElementById('root')

    // div node is created using createElement method
    const divElement = document.createElement('div')

    // text content of div node is set to "Hello World" using textContext attribute
    divElement.textContent = 'Hello World'
    
    // div node apped to root node using append method  
    rootElement.append(divElement)
  </script>
</body>
```

**Example 1**

{% codepen https://codepen.io/bipinrajbhar/pen/WNxRpjG %}

Let's try to recreate **Example 1** using React.

In order to use React we need to embed two JavaScript files in our Web Application.

The first JavaScript file exposes a global object **React** and the second JavaScript file exposes a global object **ReactDOM**.

* **React** is responsible for creating a React element (kinda like document.createElement()).
* **ReactDOM** is responsible for rending the React element (kinda like rootElement.append()).

**Sample Code**
```html
<body>
  <div id="root"></div>
  
  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
  
  <script>
    // React Element     
    const divElement = React.createElement('div', {}, 'Hello World')
    
    // Rendering React Element to the DOM     
    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>
```

**React.createElement**
```js
const reactElement = React.createElement(type, [props], [...children]);
```

The ``createElement`` method returns a React element of the given type. The type can be any HTML tag name string or ``React Component`` or ``React Fragment``. The props are an optional parameter where we can pass the property of a ``React Element``. The children are also an optional parameter where we can pass the children of ``React Element``.


**ReactDOM.render**
```js
ReactDOM.render(reactElement, document.getElementById('root'));
```

The ``ReactDOM.render`` method renders the React element to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).

**Example 2**
{% codepen https://codepen.io/bipinrajbhar/pen/vYKgoxP %}

**Nested DOM Nodes**

Let's try to render nested dom nodes using JavaScript + React.

**Sample Code**
```html
<body>
  <div id="root"></div>
  
  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
  <script>
    
    // React Elements     
    const helloElement = React.createElement('span', {}, 'Hello')
    const worldElement = React.createElement('span', {}, 'World')
    const divElement = React.createElement('div', {}, helloElement, ' ', worldElement)
    
    // Render React Element     
    ReactDOM.render(divElement, document.getElementById('root'))
  </script>
</body>
```

**Example 3**
{% codepen https://codepen.io/bipinrajbhar/pen/vYKgoxP %}

I hope you learned something from this article and if you have any doubt please leave a comment. I will be very happy to answer all your questions.

My name is **Bipin Rajbhar** and I am a software engineer at [QuikieApps](https://www.quikieapps.com/) and you can follow or connect to me on [Twitter](https://twitter.com/Bipin_1598) and [Linked In](https://www.linkedin.com/in/bipinrajbhar1598/)

**Resources**
[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
[Epic React](https://epicreact.dev/)