React入門(1)

今天繼續來學習react

首先，先寫幾個小demo來感覺一下什麼是react，以及react的語法規則,來創建對react的一個整體認識

   上demo:

demo01：

 

demo01涉及的知識點有:

1.1 渲染根組件
ReactDOM.render(a,b) 將第一個參數渲染到第二個參數所指定的元素
1.2 babel 編譯器
將es6 jsx等高級語法轉換爲多數瀏覽器能識別的語法
具體參考:https://www.babeljs.cn/repl

 demo02:

demo02涉及的知識點:

2.1jsx語法

(1)什麼是jsx?

將 HTML 直接嵌入了到JS 代碼裏面，這個就是 React 提出的一種叫 JSX 的語法，這應該是最開始接觸 React 最不能接受的設定之一，由於前端被「表現和邏輯層分離」這種思想「洗腦」過久了。

 (2)jsx語法：

一、容許在js中寫標籤
二、容許經過花括號來執行表達式

注意：
一、在jsx中，渲染內容，不容許直接渲染多個，能夠放在一個容器中(如第一個參數中的div容器)
二、每一個元素都得有開始和結束標記(有點相似於xml語法，純屬我的觀點)

爲了鞏固一下剛剛學習的知識點，再寫一個小demo

demo04: 使用react，向視圖中渲染一個無序列表，3個列表項

      

運行效果:

接下來說講react的核心重點------組件

 建立方法:

var Test = React.createClass({
render:function(){
return 渲染的元素
 }
})
 調用方法：
<Test></Test>

看一下demo04:

組件在建立和使用時的注意事項：
①組件類的名稱要遵循全駝峯(大駝峯)式的命名方式
②組件類的模板中，render渲染時，第一個標籤不建議換行，不然是會報錯的（解決方案:能夠寫個圓括號括起來）
③若是渲染多個元素，放在同一個容器中

再來一個小練習demo05:

運行結果:

 

好了，今天先學到這裏,明天繼續學習。加油！