¿Cuál es el uso de React.createElement?

Un elemento de reacción es una descripción de cómo debería ser el elemento real del Modelo de objetos del documento (DOM) . React.js no usa el DOM del navegador directamente, sino que usa el DOM virtual para diseñar la UI/UX y para interactuar con el navegador. El DOM virtual se compone de elementos de reacción. Parecen elementos HTML pero son objetos JavaScript . En palabras simples, los elementos de reacción son las instrucciones sobre cómo se debe crear el DOM del navegador. Creamos los elementos de reacción usando la siguiente sintaxis incrustando elementos HTML en JavaScript para mostrar el contenido en la pantalla.  

Sintaxis:

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

React.createElement() toma tres argumentos. Están:

• type: el tipo del elemento HTML (h1,p,button).
• props: propiedades del objeto ({style:{size:10px}} o Eventhandlers, classNames,etc).
• niños: cualquier cosa que necesite ser mostrada en la pantalla.

React DOM: React DOM contiene los argumentos necesarios para representar elementos de reacción en el navegador.

ReactDOM.render(element,containerElement);

ReactDOM.render() toma dos argumentos:

• elemento: El elemento que necesita ser renderizado en el DOM.
• containerElement: Dónde renderizar en el dom.

Crea una aplicación React:

Paso 1: Cree una aplicación de reacción usando el siguiente comando:

npx create-react-app foldername

Se tarda un par de minutos en crear una aplicación.

Paso 2: Una vez que se crea su carpeta, cambie su directorio a la carpeta recién creada usando el comando mencionado a continuación.

cd foldername

Estructura del proyecto: se crea una estructura de proyecto como se muestra en la siguiente imagen:

Estructura del proyecto

Paso 3: Ahora agregue el siguiente código en el archivo index.js para crear un elemento de reacción usando React.createElement().

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')
);

Paso 4: Ejecute su aplicación usando el siguiente comando.

npm start

Producción:

La salida es visible en su navegador.