一、React的簡介
1、介紹
React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。
React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它
2、特點
1）. 高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。
2）. 靈活 ?React可以與已知的庫或框架很好地配合。
3）. JSX ? JSX 是 JavaScript 語法的擴展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。
4）. 組件 ? 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項目的開發(fā)中。
單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
二、環(huán)境搭建
1、引入文件的方式
一、引入js庫
1、React.js
? React的核心庫，解析組件,識別jsx
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
2、reactDom.js
? 處理有dom相關(guān)的操作
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
3、Babel.js
? Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，這樣我們就能在目前不支持 ES6 瀏覽器上執(zhí)行 React 代碼。Babel 內(nèi)嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個全新的水平
https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js
環(huán)境解析
- react: 核心包，解析組件,識別jsx
- react-dom: 編譯 -> 瀏覽器
- react-scrpts: react的項目環(huán)境配置
- manifest.json 生成一個網(wǎng)頁的桌面快捷方式時，會以這個文件中的內(nèi)容作為圖標(biāo)和文字的顯示內(nèi)容
- registerServiceWorker.js支持離線訪問，所以用起來和原生app的體驗很接近,只有打包生成線上版本的react項目時，registerServiceWorker.js才會有效。服務(wù)器必須采用https協(xié)議
- 對Internet Explorer 9,10和11的支持需要polyfill。
3、框架對比
與其他框架的共同點是，都采用虛擬dom，和數(shù)據(jù)驅(qū)動
| angularJs | reactJs | vueJs | |
|---|---|---|---|
| 控制器 | √ | - | - |
| 過濾器 | √ | - | √ |
| 指令 | √ | - | √ |
| 模板語法 | √ | - | √ |
| 服務(wù) | √ | - | - |
| 組件 | - | √ | √ |
| jsx | - | √ | 2.0之后加入 |
簡單示例：
需要引入的js：可在線引入或本地下載引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入順序不可變 -->
<script src="./js/react.min.js"></script>
<script src="./js/react-dom.min.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script type="text/babel">
const h =
<h1>我是aaa</h1>;
ReactDOM.render(h, document.getElementById("box"));
</script>
注意：script標(biāo)簽的type取值為：text/babel
總結(jié)：一個react的程序，就是把JSX通過ReactDOM.render()函數(shù)渲染到網(wǎng)頁上。
另外，React的代碼也可以單獨寫在一個文件里，擴展名為js，或者jsx。引入時，記住type=“text/babel”
