React.createElement 有什么用？

反应元素是对实际文档对象模型（DOM）元素应该是什么样子的描述。 React.js 不直接使用浏览器 DOM，而是使用虚拟 DOM 来设计 UI/UX 并与浏览器交互。虚拟 DOM 由反应元素组成。它们看起来类似于 HTML 元素，但它们是 JavaScript 对象。简单来说，react 元素是关于如何创建浏览器 DOM 的指令。我们通过在 JavaScript 中嵌入 HTML 元素以在屏幕上显示内容，使用以下语法创建反应元素。

句法：

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

React.createElement() 接受三个参数。他们是：

• type： HTML 元素的类型（h1,p,button）。
• props：对象的属性（{style:{size:10px}} 或 Eventhandlers、classNames 等）。
• children：需要在屏幕上显示的任何东西。

React DOM： React DOM 包含在浏览器中呈现反应元素所需的参数。

ReactDOM.render(element,containerElement);

ReactDOM.render() 接受两个参数：

• element：需要在DOM中渲染的元素。
• containerElement：在 dom 中渲染的位置。

创建一个反应应用程序：

第 1 步：使用以下命令创建一个反应应用程序：

npx create-react-app foldername

创建一个应用程序需要几分钟。

第 2 步：创建文件夹后，使用下面提到的命令将目录更改为新创建的文件夹。

cd foldername

项目结构：创建一个项目结构，如下图所示：

项目结构

第3步：现在添加以下代码 index.js文件使用 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')
);

第 4 步：使用以下命令运行您的应用程序。

npm start

输出：

输出在您的浏览器中可见。