When you work with React, it is more than likely that you will build your apps with JSX. The JSX is a tag-based JavaScript syntax like looks familiar with HTML. React element is the atomic and most basic unit that you need to master before JSX and before moving forward with React.
Note: In order to work with React in the browsers, we need to include 2 libraries: React and ReactDOM. React library is responsible for creating views and ReactDOM library is responsible to actually render UI in the browser.
Including Scripts: Following are the CDN links for React and ReactDOM:
React: https://cdnjs.com/libraries/react
ReactDOM: https://cdnjs.com/libraries/react-dom
Include these two libraries before your main JavaScript file. While learning How React works, we’ll build a small application using react and ReactDOM. For the sake of simplicity, It contains only 2 files index.html and main.js in the same folder. You should use the React development version to get error messages and warnings in the browser console.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React | How React works</title>
</head>
<body>
<script crossorigin src=
</script>
<script crossorigin src=
</script>
<script src="./main.js"></script>
</body>
</html>
|
React Elements:
HTML is just a set of instructions that eventually become DOM elements. Let’s say you have to build an HTML hierarchy of JavaScript libraries and Frameworks. Following HTML commands to make HTML hierarchies for JavaScript Libraries and Frameworks.
HTML
<section class="js-section">
<h1>JavaScript Libraries and Frameworks</h1>
<ul class="list-lib-frameworks">
<li>React.js</li>
<li>Angular</li>
<li>Vue.js</li>
<li>Node.js</li>
<li>underscore.js</li>
</ul>
</section>
|
In the browser, HTML represents a tree-like structure where the section is the root node, and it contains 2 child nodes i.e. h1 and ul. The ul also has some children i.e. 5 li nodes. In DOM it will represent as:
DOM representation in the browser
In the past, websites consisted of multiple pages, and when the user clicks on a link then the browser requests a new HTML page and builds DOM again. But after the invention of AJAX(Asynchronous JavaScript and XML) brought us a single Page Application(SPA). In SPA, the browser first loads the initial HTML document. When a user navigates by clicking the links, the browser sends the request and then the browser updates the part of a DOM. It feels like the user is jumping from page to page. But the user always stays on the same page. JavaScript destroys the old and creates a new UI. It is JavaScript that is doing heavy lifting under the hood.
How JavaScript updates the DOM?
JavaScript uses DOM API to updates and manipulates DOM nodes. The DOM API is just a collection of objects that JavaScript uses to manipulate the DOM. The manipulation here means CRUD(create, read, update, and delete) operations in DOM nodes. If you want to build the HTML page, we can also build with vanilla JavaScript.
Javascript
const root = document.querySelector( 'body' );
function createListElement() {
const libsAndFrameworksNames = ['React.js', 'Angular', 'Vue.js',
'Node.js', 'Underscore.js'];
const ul = document.createElement( 'ul' );
ul.classList.add( "list-lib-frameworks" );
libsAndFrameworksNames.forEach( function appoendToUnorderedList( name ) {
const listElement = document.createElement( 'li' );
listElement.innerText = name;
ul.appendChild( listElement );
} );
return ul;
}
function createWebPageWithJavaScript( root ) {
const parent = document.createElement( 'section' );
parent.classList.add( 'js-section' );
const heading = document.createElement( 'h1' );
heading.innerText = 'JavaScript Libraries and Frameworks';
const unorderedListElement = createListElement();
parent.appendChild(heading)
parent.appendChild( unorderedListElement );
root.appendChild( parent );
}
createWebPageWithJavaScript( root );
|
Output:
Output exactly the same as earlier
But as our application grows, complexity grows, and it is hard to maintain. So to overcome complexity we’re going to use React to handle complexity for us.
React is a library that is specifically designed to interact with DOM for us. From now onwards we don’t update DOM directly instead we’re going to tell react to update the DOM for us. React will take care of rendering and reconciling the element for us through the command we give to react.
There are some similarities between DOM and React. Both are made up of nodes. DOM is made up of DOM nodes/elements and React is made up of React nodes/elements. Both look exactly the same, but they are quite different.
Creating React Element:
As already described earlier, the React element is the smallest entity. The React element is just a JavaScript object that describes the DOM element in memory. We can create a React element using React’s createElement method.
Syntax:
React.createElement(type, [props], [...children]);
Parameters: Above method accepts the following parameters:
- type: It is the type of element you want to create i.e. div, ul, li, section, etc. It could also be another react element.
- props: It is a JavaScript object that contains properties or data required to construct a DOM.
- children or content: There are children or content to display other nested elements. It could be the content of a node.
Example: How to create a li element in our application:
const listElement = React.createElement( 'li', null, 'React.js' );
console.log( listElement );
The output of the createReact element
Explanation: In the above code, we passed 3 arguments to createElement which are as follows:
- li: It defines the type of element we want to create. In this case, is the list element.
- null: We don’t want to define any property in the list element. We could have passed the className property to it, to define the class property on the list node. But in our case, we don’t. So we’ve to externally pass null if there is no property.
- React.js: The third element represents the element’s children. Any node that is inserted in between the starting tag and ending tag should be defined in the third parameter. In the list node, we don’t have children to insert, but we do have the text. So we pass the text as a string.
During the rendering process, React converts the React element to the actual DOM element.
<li> React.js </li>
But if you want to add a class in the list(<li>) element then we could’ve added the second property as:
const listElement = React.createElement( 'li', {
className: 'list'
}, 'React.js' );
console.log( listElement );
If we’ve used class in place of className then we would’ve gotten the warning message from React. This error message can differ from version to version.
The class attribute becomes the className property of props to React. The following could be the two reasons:
- The React element/node we get from createElement is DOM nodes not HTML element. As we know class is the name of the HTML attribute. As soon as Browser sees the class attribute on HTML elements then it converts to a property i.e. className. In order to test it, write down the following code:
const ele = document.createElement('li');
ele.classList.add('list');
console.log( ele.className ); // list
- Since the class is a reserved property in JavaScript, so we can’t use the class as a property. The className is added in props property of ‘li’ React element. The property we define in the second argument is to get assigned to the props property of that React element. So React convert the above list element into a DOM element as shown below:
<li class="list"> React.js </li>
ReactDOM
Once you’ve created the React element. Then you want to see it in the Browser. But Browser doesn’t understand the React element. ReactDOM is the middleman that renders the React element in the browser. ReactDOM comes with some useful methods but the method in which we are interested is render. It takes 2 parameters describe as what(element you want to render) and where(the location where you want to render).
Example: To render the above list element(listElement) in DOM.
const listElement = React.createElement( 'li', {
className: 'list'
}, 'React.js' );
ReactDOM.render( listElement, document.querySelector( '#root' ) );
Here the second argument to render method is the location or element under which we want to render the listElement. We could’ve used a body tag as shown below:
document.querySelector('body');
It works, but not recommended. React warns us in development mode with the following message:
Error if we want to render React element in body.
Implementation: Following are our final main.js file for our example.
Filename-main.js:
Javascript
const mainReactElement = React.createElement(
"section",
{ className: "js-section" },
React.createElement( "h1", null, "JavaScript Libraries and Frameworks" ),
React.createElement(
"ul",
{ className: 'list-lib-frameworks' },
React.createElement('li', null, 'React.js'),
React.createElement('li', null, 'Angular'),
React.createElement('li', null, 'Vue.js'),
React.createElement('li', null, 'Node.js'),
React.createElement('li', null, 'underscore.js'),
)
);
ReactDOM.render(mainReactElement, document.querySelector( '#root' ));
|
If you’ve provided more than 3 arguments to createElement method. Then React considered additional arguments as children. So React creates an array of these child elements. This newly created array will get assigned to the props.children array. We can also use the array method to make our code more succinct as shown below:
Javascript
const listOfLibAndFrameworks = ['React.js', 'Angular', 'Vue.js',
'Node.js', 'underscore.js'];
const mainReactElement = React.createElement(
"section",
{ className: "js-section" },
React.createElement( "h1", null, "JavaScript Libraries and Frameworks" ),
React.createElement(
"ul",
{ className: 'list-lib-frameworks' },
listOfLibAndFrameworks.map((element, index) => React.createElement('li',
{ key: index }, element))
)
);
console.log( mainReactElement );
ReactDOM.render(mainReactElement, document.querySelector( '#root' ));
|
React is just JavaScript. So whatever you can do with JavaScript, you can also do with React. When working with an array in React you come across a time when react complains about the unique key. To remove this warning we can use the key as shown above. It is used to identify the unique list by React to re-render it again if used. It makes our code more efficient. It is highly recommended adding key property while working with the list.
If you don’t add the key then React throws the following warning:
So don’t forget to add the key attribute in props. If we log the mainReactElement then we can see the array created with additional arguments passed to the createElement method of React.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...