How to create react element


Create React Element

Index.html and index.js line by line Code explanation

You already know that two file must exist in react project with exact name, index.html and index.js. Today we will learn these two files and write basic code.

Index.html

This file is located inside public folder. It is simple html file. You know that html file consist of two sections, head and body. All UI components are created in index.js and are loaded in index.html file in browser. We have written a div container in body section with class "root" as below

<div id="root"></div>


We will create UI element (html tags like h1, h2, p, a) in index.js and render in index.html in this div.

Index.js

You have to do all work in this file so let start this file from scratch. You have to use only two methods in this file. So first of all we will import library for each method as below

First Method: 
createElement(element, props, child);

This method is used to create html element. It takes following three parameters
  • First is element. It can be html element or custom component
  • Second is all properties of that element
  • Third is child of this element

This method is written in "react" library so first of all we import react library as below

import React from 'react';

Now we use this method to create html element as below

var element = React.createElement(
  'h1'
  null
  'This is heading'
);

Above line create h1 element with text "This is heading" as child. For simplicity, we set property as null. We assign this element to a javascript variable "element". When this element is rendered into html to load in browser, it looks like this

<h1>This is heading</h1>

Now we render this element into div container in index.html file. For this we use second method. 


Second Method: 
render(what, where);

Render method takes two parameters
  • First is the UI element what we need to render
  • Second is div container where we have to render UI element

To use this method, we import "reactDOM" library as below

import ReactDOM from 'react-dom';


We have already created UI element. Now get div container from index.html and assign it to a javascript variable "root" as

var root = document.getElementById('root');


getElementById(id) is the only one javascript method will be used in react app. All other methods are react methods.

Now write render method and pass both parameter as

ReactDOM.render(element,root);


Save it and start development server by running command "npm start" in terminal. After few seconds, development server will be started and your first react app will be loaded in browser. You will see "This is heading" in browser. 
Now right click in browser and hit inspect to open Google Developer Tools. Under Element section, expand body and div tag to view rendered html as

how react element rendered in html and loaded in browser


Complete code in index.js is

import React from 'react';
import ReactDOM from 'react-dom';

var element = React.createElement(
  'h1'
  null
  'This is heading'
);
var root = document.getElementById('root');
ReactDOM.render(element,root);


No comments:

Post a Comment