在本教程中，我们将从头开始创建一个React元素。这将向我们展示一些关于为什么我们首先导入React和ReactDOM，以及如何将一个JsX表达式转换为浏览器使用的对象。我们正在使用Create React App，但是我们将删除欢迎组件并从头开始。我们将从头开始写一些React代码，所以我们需要做的第一件事是删除所有在 **src**文件夹里的东西。开始了!
接下来要做的是在文件夹中添加一个空白的index.js文件。 **src**文件夹中添加一个空白的index.js文件，像这样。
有了这些，我们就有了这块令人兴奋的白板，可以开始编码了。
导入React和ReactDOM
我们要做的第一件事是在文件的顶部导入几个模块。我们要用这两行来导入React和ReactDOM。
import React from 'react';
import ReactDOM from 'react-dom';
在React中定义一个元素
下一步是使用 const 关键字来定义一个元素。我们将给下面的常量分配一个JSX表达式。突出显示的一行包含JSX，通过Babel编译器将其转换为纯JavaScript，供浏览器阅读。由此产生的JavaScript将有对React.createElement()函数的调用。这就是为什么我们在文件的顶部看到了React的导入声明。尽管我们在写的代码中没有看到对React.createElement()的调用，但一旦Babel完成工作，就会有对React.createElement()的调用，这就是为什么我们需要以这种方式导入React。
import React from 'react';
import ReactDOM from 'react-dom';
const element = <h2>Hello React!</h2>;
检查我们的元素
现在让我们把包含上述JSX表达式的元素登录出来。
import React from 'react';
import ReactDOM from 'react-dom';
const element = <h2>Hello React!</h2>;
console.log(element);
在这里，我们可以开始了解JSX如何在JavaScript中转换为对象。在Chrome的开发者工具中，让我们看一下控制台标签，看看这个对象。
我们看到的是一个对象。这个对象是JSX表达式的结果，一旦它被Babel编译下来在浏览器中使用。它是一个React元素。这就把我们带到了虚拟域。虚拟Dom是真实用户界面的轻量级、内存版本。所以我们在这里看到的这个对象是虚拟域的一部分。任何时候这个对象的状态发生变化，React会得到一个新的React元素，并将两者进行比较，以确定任何变化。一旦完成，真正的DOM（用户界面）就会自动更新。这一切都发生在一瞬间。
渲染到真实的DOM
现在我们可以把这个React元素渲染到真实的DOM上。这就是我们以联机2的方式导入ReactDOM的目的。为了渲染我们的元素，我们使用这里强调的这段代码。
import React from "react";
import ReactDOM from "react-dom";
const element = <h2>Hello React!</h2>;
ReactDOM.render(element, document.getElementById("root"));
ReactDOM.render()函数的第一个参数是我们要渲染的元素。第二个参数是我们想要渲染的元素在真实DOM中的位置。现在，我们确实删除了 src 文件夹中的所有文件，但我们并没有删除 public 文件夹中的内容。在那个公共文件夹中，有一个index.html文件，它有一个react应用的根元素。我们可以在这里看到它。
id为root的div是react应用的容器。因此，这就是我们的元素将被渲染的地方。事实上，让我们现在看看浏览器，看看我们的新元素吧
我们可以在开发工具中更仔细地查看这个反应元素是如何呈现在浏览器中的。注意到id为root的div，在这个div里面是我们用JSX创建的元素。我们看到h2元素的文本设置为Hello React!
从零开始创建一个React元素
从导入React和ReactDOM开始。下一步是定义一个元素，并为该元素分配一个JSX表达式。之后，添加对ReactDOM.render()函数的调用，将该元素插入到真实的DOM中。看看你的浏览器和开发者工具，从你从零开始创建的全新的React元素中获利吧!
