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了
};
复制代码

而后就能够进行跨域访问了