通过webstorm创建的React项目渲染页面

在上一节讲了如何将React项目映射到index.html文件上

今天给大家分享下如何通过index.js文件渲染元素

通过js文件西渲染下大家最熟悉的Hello Word

1.用const 定义一个h1标题标签

如图：

2. 然后通过React DOM 来管理，我们经常称他为根dom节点，要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

如下图：

这里边的root是创建好项目后index.html文件给的id属性

3.然后打开 http://localhost:3000/

输出的结果如下图：

是不是感觉很神奇呢，下面还有更神奇的

下面我将通过一个定时器的例子来介绍更新元素渲染的效果

首先要在index.js文件建立一个名为tick函数

然后在里边写上两个h标题标签

图片里的{new Date().toLocaleTimeString()}是调用时间的方法

然后通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

能够让时间每秒钟更新一次

然后结果如上图所示，由于没有gif图拿了两张截图让大家看下他的变化  

是不是很神奇呢 ！