Deepak's Blog

Understanding Basics Of React

React.createElement(tags, [props], [children]) :-

DEEPAK MAURYA's photo
DEEPAK MAURYA
·

2 min read

Understanding Basics Of React

Tags :- a html tag like h1, div etc.

Props :- like class, id of that tag (can be an object or null, where null is same as an empty obj)

Children :- the content of the tag, like what we use in .appendChild() It is a top-level API of ReactJS which is used to create an element like the document.createElement() in DOM. Now, in React, we have to create a root such that we can tell the JS Engine that we want to run our React application in that place. To do this, ReactDOM contains APIs to render React components on the client(on the browser).

ReactDOM.createRoot(document.getElementById(“root”)) :-

This API is a Client-side API that lets you create a root to display React components inside a browser DOM mode. It returns an object with 2 functions/methods :- render and unmount.

root.render(reactNode):-

helps to display a piece of JSX(“React node”) or a React Element(created by react.createElement() ) into the React root’s browser DOM node.

......................................................

Code:-

<body>

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

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script>

const heading = React createElement(

"h1",

{

id:title

}

</script>

</body>

......................................................

Console's Output:-

<body>

<div id="root">

<h1> Hello React! </h1>

</div>

</body>

......................................................

Browser's Output :-

Hello React!

......................................................

Note:-

We can inject React into any existing projects too, without affecting the other areas. Like if we already have 2 div-s above and below the root div, the React will only affect the root div and the others will be displayed as usual.

Important points :-

  1. If we write the React script before the 2 links, then we will get an error in the console “React not defined” and the react elements will not be rendered properly.

  2. Developers write:- <div id="root">Not Rendered Yet </div> Because, if something happens due to which react is not rendered properly in the root element, that will be easily detected.

  3. The heading1 is a react elements and we know that they are nothing but objects and render function is used to overwrite the contents of root HTML element with those elements.

Note:-

CDN ReactJs offers us a faster development environment, and it comes in very handy when you are developing a backend app by serving HTML files. We need to hook up a few React Components within your project.

We will learn more about React CDN Url link in detail in next blog.

React