在上一节讲了如何将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图拿了两张截图让大家看下他的变化
是不是很神奇呢 !