- 公司有了新项目,而这次的技术选型是react,我一直想接触react,自己也研究过文档,但苦于没有实际的项目经验,对react的认识也就非常匮乏。而这次有了项目的接入,使得我对react有了进一步的认识。由于以前都是伸手党,经常百度别人的东西,所以这次我想我要把react所遇到的问题和基本操作纪录下来,以方便自己回忆以及帮助他人。
1. 项目的搭建
npm i -g create-react-app // 将react的全局命令,相当于vue-cli也基于一个全局命令
create-react-app project // 创建一个项目(项目名称为project)
npm run eject // 执行放出配置文件,执行后项目目录下多了config和scrips目录
npm i // 安装package.json的一览
npm run start // 启动项目,浏览器会自动打开
2. 引入react路由
npm i react-router-dom //主要引入react-router-dom
// 官方文档在网上已经找不到了,后面我会写一篇关于路由的详细使用方法,然后再这里贴上地址
3. webpack配置项目路径别名
alias: {
'react-native': 'react-native-web',
// 对需要的路径进行设置
"@src":path.resolve("src"),
"@components":path.resolve("src/components"),
"@pages":path.resolve("src/pages"),
}
4. 引入redux
//引入redux相关依赖
npm install --save redux react-redux redux-thunk
npm install --save-dev redux-logger
// redux具体怎么使用在这里就不写了,后面会有文章详细介绍如何优雅的使用redux
5. 引入axios(数据请求)
npm i axios --save
// axios具体的使用方法可以百度,后面我会写一篇具体面向项目二次封装axios
6. 使用less
具体less配置:点击跳转
7. 解决移动端适配问题
rem解决移动端适配问题:点击跳转