Open In App

What is the use of React.createElement ?

Improve
Improve
Like Article
Like
Save
Share
Report

React.createElement is a fundamental method of React JS. The main use of React.createElement is the Creation of a React component. It is the JavaScript format for creating react components. Also, the JSX react component when transpired invokes this only method for creating the component.

Syntax:

React.createElement(type,{props},children); 
// JSX code
<type {props} >{children}</type

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

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

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

ReactDOM.render(element,containerElement);

Parameters: ReactDOM.render() takes two arguments:

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

Steps to create React application

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

npx create-react-app foldername

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

cd foldername

Project Structure:

Project Structure

Example: This code in Index.js shows the use of react.createEement method and render that component using ReactDOM.render method.

Javascript




// Filename - index.js
 
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 to run the application: Run your application using the following command in the terminal.

npm start

Output: This output will be visible on http://localhost:3000


Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads