這篇文章也不能算教程咯，就算是自己學習整理的筆記把。
一、react基本介紹
關於react一些相關的簡介、優勢之類的，可以去官網看一下。
案例1：
新建一個index.html文件，文件內容如下
<!DOCTYPE html> <html> <head> <title>react入門</title> <meta charset="utf-8"> </head> <body> <div id="example"></div> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> ReactDOM.render( <div>你好</div>, document.getElementById('example') ) </script> </body> </html>
效果如下
下面來分析一下
在頁面加載前，先依次加入react.min.js、react-dom.min.js、browser.min.js三個文件。
react.min.js
是react的核心庫，定義虛擬dom模型，以及react如何做一些數據的更新，支持組件化算法等等都在這個js里面
react-dom.js
是提供與 DOM 相關的功能
Browser.js
它作用是將JSX語法轉為JavaScript語法（就是將我們用jsx方式寫的html結構，轉化為可執行的html代碼）
如果想下載這三個文件到本地的，可以直接復制鏈接去瀏覽器打開，右鍵另存就行了，如下圖
在react里，為了兼容jsx語言，必須在需要jsx語言的<script>里加入type=”text/babel”。
ReactDOM.render是React的最基本方法，用戶將模板轉換成HTML語言，並插入指定的DOM節點中。
上面說的太官方，如果不能理解的我們可以再看一下效果圖，注意我用紅色框勾選出來的部分
簡單點說，就是將我們寫的<div>你好</div>，插入到id名為example的div里面去
二、JSX 語法
關於jsx語法，我推薦可以先看一下這篇文章http://www.css88.com/archives/5632?utm_source=tuicool&utm_medium=referral
在react里面，我們經常會看到jsx語法，如上圖所示（案例1），看上去感覺就是在js里面直接寫了html標簽，更准確的說，應該是xml標簽。
案例2：
<!DOCTYPE html> <html> <head> <title>react入門</title> <meta charset="utf-8"> </head> <body> <div id="example"></div> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> ReactDOM.render( <div> <label>用戶名</label> <input type="text" /> <br /> <button>登錄</button> </div>, document.getElementById('example') ) </script> </body> </html>
效果如下：
這里有幾個注意的地方
1. jsx語法，xml數據存儲格式，因此在寫標簽的時候，標簽必須被正確地嵌套，標簽必須被關閉，標簽注意大小寫
值得一提的是，有些小伙伴在寫html代碼的時候，在寫空標簽的時候不寫“/”。例如<input />就寫成<input>，<br />就寫成<br>。在jsx里面，“/”一定要寫，不然就會報錯哦
2. jsx語法規范，只有一個開頭節點和一個結尾節點，如下圖所示
如果像下圖這樣寫，就是錯誤的
3. 注釋的寫法{/**被注釋的內容**/} （如下所示）
ReactDOM.render( <div> {/*在這里寫注釋*/} <label>用戶名</label> <input type="text" /> <br /> <button>登錄</button> </div>, document.getElementById('example') )
關於注釋：
在react里面，有三種注釋可以用
//注釋方式一 /*注釋方式二*/ {/*注釋方式三*/}
說的簡單易懂一點，我們平時在寫html代碼的時候，用到的注釋是<!--注釋-->。而在react里面，我們寫html代碼的時候，注釋就要用{/*注釋*/}這種方式，其他兩種方式都會報錯。
三、組件
先來貼一段概念
React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標簽一樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類
案例3：
<!DOCTYPE html> <html> <head> <title>react入門</title> <meta charset="utf-8"> </head> <body> <div id="example"></div> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> //聲明一個組件 var Login = React.createClass({ render:function(){ return( <div> <label>用戶名</label> <input type="text" /> <br /> <button>登錄</button> </div> ) } }); //組件渲染在頁面上 ReactDOM.render( <Login />, document.body ) </script> </body> </html>
效果如下
注意，我這里是直接插入到body里面的，如下圖所示
而 案例1 和 案例2 都是寫的插入到id名為example的div中去，如下圖所示
可以對比一下效果圖，發現寫在body里面的 <div id="example"></div> 這個沒有了，script標簽也沒有了，這里值得我們注意一下。
下面再回到組件上面來說
ReactDOM.render(param1,param2)。
Param1：<組件名稱/> 或者<組件名稱></組件名稱> （<Login />或者<Login></Login>）
Param2：組件被渲染的位置 （body）。
案例4：組件可以嵌套
<!DOCTYPE html> <html> <head> <title>react入門</title> <meta charset="utf-8"> </head> <body> <div id="example"></div> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> var User = React.createClass({ render:function(){ return( <div> <label>用戶名</label> <input type="text" /> </div> ) } }); var Login = React.createClass({ render:function(){ return ( <div> <User /> <button>登錄</button> </div> ) } }); ReactDOM.render( <Login />, document.getElementById('example') ) </script> </body> </html>
先寫了User這個組件，然后把User這個組件寫在了Login里面，最后把Login渲染在頁面上
效果圖如下
四、React的CSS寫法
案例5：列舉幾種css的寫法
<!DOCTYPE html> <html> <head> <title>react入門</title> <meta charset="utf-8"> <style type="text/css"> .tab{background:yellow;} </style> </head> <body> <div id="example"></div> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> var user = { width:"100px", display:"block", margin:"10px 0" } var Login = React.createClass({ render:function(){ var box = { background:"lightblue", height:"100px", }; return ( <div style={box}> <label className="tab">用戶名</label> <input style={user} type="text" placeholder="用戶名" /> <button style={this.styles.btn}>登錄</button> </div> ) } }); Login.prototype.styles = {/*原型鏈方法*/ btn:{ "background":"grey", "color":"white" } } ReactDOM.render( <Login />, document.getElementById('example') ) </script> </body> </html>
解析如下
效果如下所示
這里值得注意的是在react里面我們要將class寫成className
上面我一共寫了4個css的寫法，可以看到效果圖里面，除了方法2以外，其他幾個在效果圖里呈現出來的都是行內樣式
總結
這次就講這么多吧，關於事件、props等等后面再來講把。下面總結幾個要注意的地方：
1. 頁面加載前，先依次序加入react.min.js、react-dom.min.js和browser.min.js
2. jsx語言的<script>里加入type=”text/babel”
3. 聲明組件時，注意組件名首字母要大寫
4. Jsx語法，xml數據存儲格式，注意jsx語法規范，只有一個開頭節點和一個結尾節點，標簽書寫要規范
5. jsx中注釋用 {/**被注釋的內容**/}
6. class要寫成className