通过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图拿了两张截图让大家看下他的变化  

是不是很神奇呢 !

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们先来直观认识React,对任何而一种工具,只有使用才能够熟练掌握,React也不例外。通过多Reac...
    六个周阅读 1,235评论 3 18
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,091评论 0 1
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,346评论 0 9
  • 生活中,我随心随意感受,甚或欣喜拐弯处不曾预知的风景。 当时装修第一套房子,自己搞定设计。一点一滴的细节,浸润了对...
    小粉猫阅读 1,061评论 0 6
  • 职业化就是商业世界的教养,教养的本质就是对外的分寸感,和对内的克制力。 失信,迟到,劝酒,打扰都是非职业化的表现 ...
    星星Fineyoga_7bf2阅读 196评论 0 0