react開發筆記（react-create-app新建項目）

用官方腳手架初始化項目

npx react-create-app project-name
cd project-name
npm start
複製代碼

詳情請參考 react-cteate-app 官方文檔
這樣就能夠在本地運行一個react的demo了

自定義項目的配置

若是須要本身配置關於webpack的配置，就須要運行npm run eject命令 注意！此命令是不能夠逆轉的，一旦運行沒有辦法恢復

One major challenge developers might face with eject is not been able to enjoy the future features of CRA . Another challenge with eject would be ineffecient synchronised setup across React developers working in team

官方文檔指出了，經過這種方法自定義不能享受到CRA將來的更新，因此官方推薦是用react-script來本身定義一個模板，感興趣的能夠先自行研究一下自動義CRA

---

運行完成後，package.json會多出一大堆依賴，這些咱們暫時先不須要管他。

還有項目會多出一些文件，而這個webpack.config.js就是配置文件啦
咱們能夠經過修改這個文件來進行一些自定義的配置

如今是經過判斷不一樣的環境變量來爲生產環境和開發環境進行不一樣的配置。

配置css預處理less/sass

首先安裝對應的loader

npm install less less-loader -D
或者 yarn add less less-loader
複製代碼

而後修改一下配置

而後就能夠在項目中使用less了

若是你想用scss的話，其實CRA自己就已經幫你設置好了，你只須要安裝一下node-sass就能夠在項目中使用了

npm install node-sass -D
複製代碼

安裝配置react-router

這裏我使用的是react-router-dom由於react-router-dom是基於react-router，加入了在瀏覽器運行環境下的一些功能
區別參考這篇文章react-router和react-router-dom的區別
安裝

npm install react-router-dom -S
複製代碼

安裝狀態管理redux

儘快更新中。。。

模擬數據塊mock

沒有現成後臺的話，可能須要用到假數據模塊，react項目經常使用到的是Koa

npm install koa koa-router koa-body -D
複製代碼

安裝完成以後，在項目的根目錄新建一個mock文件夾（名字能夠自定義），在文件夾下新建一個server.js文件

//server.js
var Koa = require('koa')
var Router = require('koa-router')

var app = new Koa()
var router = new Router()
//測試接口
router.get('/api/test',function (ctx,next){
    ctx.body = "this is a test api!"
})

// 首頁 —— 廣告（超值特惠）
var homeAdData = require('./home/ad.js')
router.get('/api/homead', function (ctx,next) {
    ctx.body = homeAdData
});


// 開始服務並生成路由
const port = 3101
app.use(router.routes())
   .use(router.allowedMethods());
app.listen(port);
console.log(`the server is running in http://localhost:${port}`)
複製代碼

而後在根目錄下，咱們運行node ./mock/server.js就能夠啓動數據模塊啦
訪問http://localhost:3101/api/test(端口自行配置)

接下來就是本身編寫一些數據來，給接口調用了，咱們新建一個home文件夾，在裏面新建一個ad.js文件

//.home/ad.js
module.exports = [
    {
        title: '暑假5折',
        img: '/static/imgs/home/Carousel/138012-20161016191639092-2000037796.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: '特價出國',
        img: '/static/imgs/home/Carousel/138012-20161016191648124-298129318.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: '亮亮車',
        img: '/static/imgs/home/Carousel/138012-20161016191653983-1962772127.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: '學鋼琴',
        img: '/static/imgs/home/Carousel/138012-20161016191700420-1584459466.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: '電影',
        img: '/static/imgs/home/Carousel/138012-20161016191706733-367929553.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: '旅遊熱線',
        img: '/static/imgs/home/Carousel/138012-20161016191713186-495002222.png',
        link: 'http://www.imooc.com/wap/index'
    }
]
複製代碼

經過上面定義的/api/homead來調用這個接口

OK！沒有問題，接下來就是，如何讓前端調用到端口爲3101的數據（個人前端項目端口設置爲3000）

設置代理

假數據模塊準備好了，可是限於瀏覽器的同源策略，不一樣端口訪問數據涉及到跨域的問題，這裏經過設置代理來解決問題。
設置代理有許多種辦法，親測有效的一種是經過http-proxy-middleware來設置代理，親測有效，並且是recat官方推薦的一種方法。具體方式是首先下載http-proxy-middleware到開發依賴

npm istall http-proxy-middleware -S
複製代碼

而後經過在SRC目錄下添加一個setupProxy.js文件

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:3101/' }));
  //若是已經有線上後臺項目的話，target就填寫線上的後臺接口地址就OK了
};
複製代碼

而後就能夠進行跨域訪問了