react學習筆記（一）
React的介紹：
React來自於Facebook公司的開源項目
React 可以開發單頁面應用 spa（單頁面應用）
react 組件化模塊化 開發模式
React通過對DOM的模擬(虛擬dom)，最大限度地減少與DOM的交互 （數據綁定）
react靈活 React可以與已知的庫或框架很好地配合。
react 基於jsx的語法，JSX是React的核心組成部分，它使用XML標記的方式去直接聲明界面， html js混寫模式
搭建React開發環境之前的準備工作。
1、必須安裝nodejs 註意：安裝nodejs穩定版本
2、安裝cnpm用cnpm替代npm
地址：http://npm.taobao.org/
安裝cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、用yarn替代npm
yarn的安裝：
第一種方法：參考官方文檔https://yarn.bootcss.com/
第二種方法：cnpm install -g yarn 或者 npm install -g yarn
搭建React開發環境的第一種方法（老-現在推薦）：
https://reactjs.org/docs/create-a-new-react-app.html
1、必須要安裝nodejs 註意：安裝nodejs穩定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0
2.安裝腳手架工具 （單文件組件項目生成工具） 只需要安裝一次
npm install -g create-react-app / cnpm install -g create-react-app
3.創建項目 （可能創建多次）
找到項目要創建的目錄：
create-react-app reactdemo
4.cd 到項目裏面
cd reactdemo
npm start yarn start運行項目
npm run build yarn build 生成項目
搭建React的開發環境的第二種方法（新-未來推薦）：
https://reactjs.org/docs/create-a-new-react-app.html
1、必須要安裝nodejs 註意：安裝nodejs穩定版本 教程中的nodejs版本:v8.11.2 教程中的npm版本:v5.6.0
2.安裝腳手架工具並創建項目
找到項目要創建的目錄執行：
npx create-react-app reactdemo
4.cd 到項目裏面
cd reactdemo
npm start 運行項目（調試）
npm run build 生成項目（發布）
npx介紹：
npm v5.2.0引入的一條命令（npx），引入這個命令的目的是為了提升開發者使用包內提供的命令行工具的體驗。
詳情：
http://www.phonegap100.com/thread-4910-1-1.html
npx create-react-app reactdemo這條命令會臨時安裝 create-react-app 包，命令完成後create-react-app 會刪掉，不會出現在 global 中。下次再執行，還是會重新臨時安裝。
npx 會幫你執行依賴包裏的二進制文件。
再比如 npx http-server 可以一句話幫你開啟一個靜態服務器
React目錄結構 React創建組件、 ReactJSX語法、 React綁定數據 React綁定對象 、React綁定屬性( 綁定class 綁定style 圖片)
manifest.json 文件簡介：
https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction
允許將站點添加至主屏幕，是 PWA 提供的一項重要功能，當前 manifest.json 的標準仍屬於草案階段，Chrome 和 Firefox 已經實現了這個功能，微軟正努力在 Edge 瀏覽器上實現，Apple 目前仍在考慮中
super關鍵字：
參考：http://www.phonegap100.com/thread-4911-1-1.html
Es6中的super可以用在類的繼承中，super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工。如果不調用super方法，子類就得不到this對象。
class Person {
constructor (name) {
this.name = name;
}
}
class Student extends Person {
constructor (name, age) {
super(); // 用在構造函數中，必須在使用this之前調用
this.age = age;
}
}
為什麽官方的列子裏面寫個super(props)：
只有一個理由需要傳遞props作為super()的參數，那就是你需要在構造函數內使用this.props
那官方提供學習的例子中都是寫成super(props)，所以說寫成super(props)是完全沒問題的，也建議就直接這樣寫。
1、所有的模板要被一個根節點包含起來
2、模板元素不要加引號
3、{}綁定數據
4、綁定屬性註意：
class 要變成 className
for 要變成 htmlFor
style屬性和以前的寫法有些不一樣
<div style={{‘color‘:‘blue‘}}>{this.state.title}</div>
<div style={{‘color‘:this.state.color}}>{this.state.title}</div>
5、循環數據要加key
6、組件的構造函數中一定要註意 super
子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然後對其進行加工。如果不調用super方法，子類就得不到this對象
constructor(props){
super(props); /*用於父子組件傳值 固定寫法*/
this.state={
userinfo:‘張三‘
}
}
7、組件名稱首字母大寫、組件類名稱首字母大寫
8.本地圖片引入用模塊引入
先 import xx from ‘....‘ 後<img src={xx} />
遠程圖片直接用url即可
react學習筆記（一）