Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the use of React.createElement ?

  • Last Updated : 10 Oct, 2021

A react element is a description of what the actual Document Object Model(DOM) element should look like. React.js don’t use the browser DOM directly instead, it uses virtual DOM to design the UI/UX and to interact with browser. Virtual DOM is made up of react elements. They seem similar to HTML elements but they are JavaScript objects.  In simple words, react elements are the instructions for how the browser DOM should be created.  We create the react elements using the below syntax by embedding HTML elements in JavaScript to display the content on the screen.  

Syntax:

React.createElement(type,{props},children); 

React.createElement() takes three arguments. They are:

  • type: the type of the HTML element (h1,p,button).
  • props: properties of the object({style:{size:10px}} or Eventhandlers, classNames,etc).
  • children: anything that need to be displayed on the screen.

React DOM: React DOM contains the arguments that are necessary to render react elements in the browser.

ReactDOM.render(element,containerElement);

ReactDOM.render() takes two arguments:

  • element: The element that needs to be rendered in the DOM.
  • containerElement: Where to render in the dom.

Create a React application:

Step 1: Create a react application using the below command:



npx create-react-app foldername

It takes a couple of minutes to create an application.

Step 2: Once your folder is created, change your directory to the newly created folder using the below mentioned command.

cd foldername

Project Structure: A project structure is created as shown in the below image:

Project Structure

Step 3: Now add the below code in the index.js file to create a react element using React.createElement().

Javascript




import React from 'react';
import ReactDOM from 'react-dom';
  
let demo = React.createElement(
    "h1", { style: { color: "green" } }, "Welcome to GeeksforGeeks"
)
ReactDOM.render(
    demo,
    document.getElementById('root')
);


Step 4: Run your application using the following command.

npm start

Output:

Output is visible in your browser.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!