React框架已經(jīng)火了好長(zhǎng)一段時(shí)間了，再不學(xué)就out了！

對(duì)React還沒(méi)有了解的同學(xué)可以看看我之前的一篇文章，可以快速簡(jiǎn)單的認(rèn)識(shí)一下React。React入門最好的實(shí)例－TodoList

自己從開(kāi)始接觸react一竅不通，到慢慢的似懂非懂，通過(guò)各種途徑學(xué)習(xí)也有一陣了。學(xué)習(xí)過(guò)程中還會(huì)接觸到很多新的東西，比如ES6、webpack，過(guò)程艱辛誰(shuí)人懂，見(jiàn)坑填坑慢慢來(lái)。今天把學(xué)習(xí)過(guò)程過(guò)濾了一下，只說(shuō)項(xiàng)目實(shí)際需要用的東西，總結(jié)了一套能看到的東西，分享給大家，希望能讓讀者少踩一些坑！

本文看點(diǎn)

• 實(shí)際項(xiàng)目效果：最終你只需要在本地啟一個(gè)服務(wù)，就能看到運(yùn)行效果。
• webpack的配置：項(xiàng)目實(shí)戰(zhàn)中常用的插件和配置方法。
• React用法：React在MVC（模型Model－視圖View－控制器Controller）層面上主要扮演了視圖的作用。我們可以學(xué)習(xí)它在項(xiàng)目中到底該如何使用。
• React-router配置：?jiǎn)雾?yè)面應(yīng)用（SPA）離不開(kāi)路由，我們可以學(xué)習(xí)在項(xiàng)目中React-router如何配置。
• ES6語(yǔ)法：我們會(huì)用到一些在項(xiàng)目中常見(jiàn)的ES6語(yǔ)法。
• antd的使用：螞蟻金服出的一款基于React的框架，我們可以學(xué)習(xí)如何去使用。

項(xiàng)目效果

項(xiàng)目代碼已經(jīng)上傳至github，項(xiàng)目代碼github地址。大家把代碼下載下來(lái)之后，跟隨以下步驟即可在本地看到效果。

• 首先安裝node環(huán)境。

• 全局安裝webpack

  npm install webpack -g

• 安裝項(xiàng)目依賴

  npm install

• 開(kāi)發(fā)模式，啟動(dòng)本地服務(wù)

  npm run dev

  至這一步成功后，在瀏覽器輸入localhost:8888就能看到如下圖的效果了。