用官方脚手架初始化项目
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
复制代码
然后修改一下配置
如果你想用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
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来调用这个接口
设置代理
假数据模块准备好了,但是限于浏览器的同源策略,不同端口访问数据涉及到跨域的问题,这里通过设置代理来解决问题。
设置代理有许多种办法,亲测有效的一种是通过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了
};
复制代码