在上一節(jié)講了如何將React項目映射到index.html文件上
今天給大家分享下如何通過index.js文件渲染元素
通過js文件西渲染下大家最熟悉的Hello Word
1.用const 定義一個h1標題標簽
如圖:
2.?然后通過React DOM 來管理店展,我們經(jīng)常稱他為根dom節(jié)點,要將React元素渲染到根DOM節(jié)點中芥被,我們通過把它們都傳遞給?ReactDOM.render()?的方法來將其渲染到頁面上:
如下圖:
這里邊的root是創(chuàng)建好項目后index.html文件給的id屬性
3.然后打開 http://localhost:3000/
輸出的結(jié)果如下圖:
是不是感覺很神奇呢,下面還有更神奇的
下面我將通過一個定時器的例子來介紹更新元素渲染的效果
首先要在index.js文件建立一個名為tick函數(shù)
然后在里邊寫上兩個h標題標簽
圖片里的{new Date().toLocaleTimeString()}是調(diào)用時間的方法
然后通過?setInterval() 方法酒奶,每秒鐘調(diào)用一次 ReactDOM.render()。
能夠讓時間每秒鐘更新一次
然后結(jié)果如上圖所示,由于沒有g(shù)if圖拿了兩張截圖讓大家看下他的變化??
是不是很神奇呢 面睛!