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>
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>
React.createElement
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
ReactDOM.render(reactElement, document.getElementById('root'));
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>
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
Top comments (0)