loading...
Cover image for An Intro to Raw React APIs

An Intro to Raw React APIs

bipinrajbhar profile image Bipin Rajbhar ・3 min read

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 Nodes using JavaScript.

In Fact, Here where that happens in the React source code 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 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

<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>
Enter fullscreen mode Exit fullscreen mode

Example 1

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

<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>
Enter fullscreen mode Exit fullscreen mode

React.createElement

const reactElement = React.createElement(type, [props], [...children]);
Enter fullscreen mode Exit fullscreen mode

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

ReactDOM.render(reactElement, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

The ReactDOM.render method renders the React element to the DOM.

Example 2

Nested DOM Nodes

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

Sample Code

<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>
Enter fullscreen mode Exit fullscreen mode

Example 3

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 and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Discussion

pic
Editor guide