說好了React苦海無涯回頭是岸
結(jié)果工作需要還是得往坑里跳
聽了兩天培訓(xùn)什么也沒有聽懂
前端代碼里寫邏輯的都去槍斃
React官網(wǎng)：https://reactjs.org/
菜鳥教程：http://www.runoob.com/react/react-tutorial.html
ES6入門: http://es6.ruanyifeng.com/
Ant Design：https://ant.design/index-cn
Redux: https://www.redux.org.cn/
Dva：https://github.com/dvajs/dva
事情是這樣的，近期主動請纓翹班去聽遠(yuǎn)道而來的大神講React開發(fā)，小哥給了一套Dva框架創(chuàng)建的工程，然而智商不夠的ST打開工程發(fā)現(xiàn)一行都看不懂= =
所以，開個博客記錄一下摸索出的一些簡單的內(nèi)容，也希望能給跟ST一樣懵逼的小白一些幫助。（什么只有我一個人聽不懂課嗎Σ(⊙▽⊙"）)
這篇里先寫React和Antd和Axios吧，第二篇寫Router和Redux，最后寫Dva。
哎呀?？印?/p>
一. 一些基本概念
關(guān)于Node。
Node.js 是一個JavaScript 的運(yùn)行環(huán)境，可以讓JavaScript運(yùn)行在服務(wù)端。 Node讓JS也可以寫網(wǎng)站后臺程序，可以搭建WEB服務(wù)器，相比較普通Js，Nodejs的作用更像是Jsp,Php等語言做的工作。
（上面是我胡說的我其實(shí)并不知道它是怎么回事。）
關(guān)于ES6。
ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標(biāo)準(zhǔn)。React默認(rèn)把ES6做為首選標(biāo)準(zhǔn)，其寫法可能同以往不太一樣。
let, const, class, extends……這些是ES6最常用的幾個語法。詳細(xì)介紹請看上方鏈接阮一峰大神的博客。
（PS:阮一峰真的是大神??！作為一個程序員一手創(chuàng)了卡爾維諾中文站！國內(nèi)第一卡大人忠實(shí)鐵粉是一位前端工程師！！想要簽名嚶嚶嚶）
（順便……JS終于可以支持類了，所以Java程序員學(xué)React這些理論上更容易嘛→_→）
React中常見的ES6寫法還有：
引入模塊用import實(shí)現(xiàn)：
import 一個組件 from '模塊地址'
導(dǎo)出模塊用export default實(shí)現(xiàn)：
export default class 一個組件
定義組件用繼承自React.Component的class來實(shí)現(xiàn)：
class 一個組件 extends React.Component {
render() {
...
}
}
這些在后面創(chuàng)建完工程后可以仔細(xì)研究。
二. 開發(fā)環(huán)境
Nodejs+Npm+Yarn。安裝過程略。
Npm是Node.js的包管理器，是全球最大的開源庫生態(tài)系統(tǒng)。
Yarn跟npm的作用差不多，緩存了每個下載過的包，所以再次使用時無需重復(fù)下載。 同時利用并行下載以最大化資源利用率，因此速度更快。
首先需要在系統(tǒng)中安裝nodejs，可利用node-v，npm -v，yarn-v查看版本。
可以安裝cnpm淘寶鏡像，提高速度。
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
Ide可以使用Webstorm，與IntelliJ IDEA同源，對代碼高亮，提示，重構(gòu)這些做得非常好。當(dāng)然想寫些簡單操作的話也可以直接用Sublime Text。
三. 創(chuàng)建工程
雖然React同Vue一樣可以直接在html中引入js文件，但一般來講還是通過腳手架搭建完整工程以用做開發(fā)。
很多腳手架可以創(chuàng)建React項(xiàng)目，比如Dva就是很好的react框架，封裝好了router，redux等模塊。然而這里我們先用最簡單基本的 create-react-app 快速構(gòu)建 React 開發(fā)環(huán)境。create-react-app畢竟是官網(wǎng)推薦的腳手架，雖然創(chuàng)建的工程簡單但是對初學(xué)者看著還比較友好。
npm install -g create-react-app
create-react-app my-app
此命令創(chuàng)建名為my-app的React工程。
創(chuàng)建完畢后，進(jìn)入工程執(zhí)行npm start，若正確則訪問http://localhost:3000/可看到歡迎頁面。
cd my-app
npm start
React工程結(jié)構(gòu)如下，這是一個最基本的react工程：
（注：如果你是用Dva或者其他腳手架搭建的工程，可能工程結(jié)構(gòu)會比這個復(fù)雜很多，但是我們不妨先從最基本的入手看看react的各種操作……）
public中默認(rèn)存在index.html文件，幾乎用不到但可以看一眼，可以看到只有一個id=root的div，這是我們應(yīng)用組件的根節(jié)點(diǎn)，在react開發(fā)中我們不需要去直接編寫html文件，而是通過js生成頁面，渲染到這個根節(jié)點(diǎn)中。
src中存放css與js。
src文件中的樣式表及js可以清空自己重寫。
index.js是整個工程的入口，可以看到，將<App />這個組件渲染到了剛剛index.html的root節(jié)點(diǎn)里。
現(xiàn)在我們來看被引入的這個src/App.js文件。這里面有頁面上顯示的logo和文字，現(xiàn)在對它做一些修改。
回到瀏覽器，發(fā)現(xiàn)頁面已被更改。
四.Antd組件庫
雖然知道你們更關(guān)注工程中的數(shù)據(jù)邏輯，不過作為一個有尊嚴(yán)的設(shè)計(jì)師，這一步還是要先講UI組件庫。
Ant Degisn是個很好的React UI庫，看起來跟我們熟知的bootstrap有點(diǎn)類似，從頁面布局到按鈕到文字提示泡應(yīng)有盡有。安裝需要通過以下兩步。
npm install babel-plugin-import --save-dev
npm install antd --save
當(dāng)然用yarn add也可以。
安裝完畢后，首先，index.js中引入antd的css文件。
import 'antd/dist/antd.css';
之后，在需要用到antd的組件js中引入所需部件即可。比如想往app.js中加幾個按鈕。
import { Button } from 'antd';
render() {
return (
<div className="App">
<div>
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>
</div>
);
}
效果如下：
然而在ie11下，會報不支持startsWith的錯。
需要安裝npm install --save babel-polyfill
然后在入口文件index.js中引入import 'babel-polyfill';
因?yàn)閟tartWith是2015年語言規(guī)范里更新的，ie始終沒有支持，需要用低版本的js實(shí)現(xiàn)高版本的js。
這樣Antd也可以愉悅的使用了。
五.基本操作
搞完按鈕之后，我們來寫一個最基本的，函數(shù)。
一. 比如點(diǎn)擊按鈕觸發(fā)個事件
雖然語法跟以往js看起來有點(diǎn)差別但本質(zhì)其實(shí)是一樣的，上面寫個函數(shù)下面onClick。
class App extends Component {
clickMe(){
alert("hi!");
}
render() {
return (
<div className="App">
<div>
<Button type="primary" onClick={this.clickMe}>點(diǎn)我一下</Button>
</div>
</div>
);
}
}
這樣，點(diǎn)擊之后：
二.比如前后臺傳輸數(shù)據(jù)
傳輸數(shù)據(jù)一般推薦使用axios，跟ajax差不多，記得要先用npm安裝。
npm install axios
首先，先用antd搞一個Table表格，在剛剛的按鈕下面加上Table標(biāo)簽。這個標(biāo)簽有兩個屬性，columns是表頭，dataSource是數(shù)據(jù)，詳見Antd的官網(wǎng)。
render() {
var data = this.state.data; //記得定義
var columns = this.state.columns;
return (
<div className="App">
……
<Table columns={columns} dataSource={data}/>
</div>
);
}
columns和data我們在state里面定義，state簡單來講是react特有的一個存儲數(shù)據(jù)的地方，state寫在constructor里。
補(bǔ)充說明一點(diǎn)，constructor是ES6中類的一個默認(rèn)方法，一個類必定有一個constructor方法，即使不顯示定義，生成對象時也會被默認(rèn)添加。它的詳細(xì)介紹請繼續(xù)看阮一峰大神的博客:)
constructor(props) {
super(props);
//狀態(tài)值
this.state = {
columns: [{ //定義姓名、性別兩列
title: '姓名',
dataIndex: 'name',
}, {
title: '性別',
dataIndex: 'gender',
}],
data: [] //先空著
}
}
這個時候，理論上界面是這樣的。
回到axios上，我們希望通過點(diǎn)擊按鈕讀取到表格內(nèi)容。
隨便找個數(shù)據(jù)讀一下，我這里用的json-server把json串扔8080端口了。
在react工程里，先把a(bǔ)xios引入。
import axios from 'axios';
然后加一個讀數(shù)據(jù)的函數(shù)并跟按鈕綁定上，可以看到寫法跟ajax基本是一樣的。
（基礎(chǔ)路徑可以設(shè)置在index.js里，此處為了簡化我就直接把絕對路徑貼過來了O.O）
readData(){
axios.get('http://localhost:8080/data')
.then(res => {
console.log(res); //先輸出到控制臺看一下
})
.catch(error => {
console.log(error);
});
}
點(diǎn)擊按鈕，理論上控制臺能看到數(shù)據(jù)讀過來啦。
這里注意一點(diǎn)，如果是讀另一個ip的數(shù)據(jù)的話，會報跨域的錯，用nginx代理一下才行，但nginx跨域的設(shè)置本篇先不講了→_→
那么，把這個讀過來的數(shù)據(jù)用setstate放到剛剛我們空著的state里，在react中，setstate用于給state中的狀態(tài)賦值。
<Button onClick={this.readData.bind(this)}>讀取表格數(shù)據(jù)</Button>
注意Button按鈕綁定函數(shù)要加上bind(this)，因?yàn)樵贓S6中React是不會自動綁定this的，不加的話會報錯'setState' undefined。
readData(){
axios.get('http://localhost:8080/data')
.then(res => {
this.setState({
data: res.data
})
})
.catch(error => {
console.log(error);
});
}
點(diǎn)完了之后，讀來的數(shù)據(jù)就顯示到表格中啦。
未完待續(xù)：
本來想把Router也放在這篇寫的但是覺得這篇已經(jīng)很長了，（雖然沒什么有技術(shù)含量的內(nèi)容吧O.O），因?yàn)槲覀冎粍?chuàng)了個工程讀了個數(shù)據(jù)= =。。實(shí)際開發(fā)中我們一個工程會有很多頁面，在React里這些頁面的切換要用Router實(shí)現(xiàn)，喝口咖啡請戳爬坑之路二→_→
