react开发笔记（react-create-app新建项目）

CGM
763 阅读3分钟

用官方脚手架初始化项目

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会多出一大堆依赖，这些我们暂时先不需要管他。

package.json

还有项目会多出一些文件，而这个webpack.config.js就是配置文件啦
我们可以通过修改这个文件来进行一些自定义的配置

项目
现在是通过判断不同的环境变量来为生产环境和开发环境进行不同的配置。
webpack配置

配置css预处理less/sass

首先安装对应的loader

npm install less less-loader -D
或者 yarn add less less-loader

然后修改一下配置

css规则

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了
};

代理
然后就可以进行跨域访问了

avatar
文章
阅读
粉丝