React
- 1.使用:
- 不能直接在浏览器运行,因为有组件系统和jsx
- 解决方法:webpack解析组件系统、JSX
- 2.React脚手架
- CRA - react官方推荐使用
- 国内:蚂蚁金服:
- Dva - 守望先锋
- Umi - 乌木
- 3.React框架的目的
- 高效实现用户输入数据快速展示在界面上
- 4.React解决的前端问题
- 高效实现服务端诗句渲染到页面上
- 5.React特征
- 函数式编程
- 回归JS【偏原生】
CRA脚手架
全称:Create-React-App
-
1.安装:
- 全局安装:
$ npm i create-react-app -g
- 局部安装:
$ npx create-react-app
- 全局安装:
-
2.创建项目:
$ create-react-app your-app 注意命名方式
- 创建过程会依次安装以下三个包:
- react: react的顶级库
- react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom
- react-scripts: 包含运行和打包react应用程序的所有脚本及配置
- 创建过程会依次安装以下三个包:
-
3.启动:
npm start
// 开发环境下运行npm run build
// 生产环境打包npm test
// 测试环境下运行npm run eject
// 配置文件抽离
-
4.生成目录结构
├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── yarn-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json 项目依赖配置记录文件 、 记录项目脚本命令
├── public 静态公共目录( 生产环境 ) 不会被webpack编译
|-- config 项目webpack配置文件
|-- scripts 项目wepback脚本命令执行文件
└── src 开发用的源代码目录
- index.js 项目入口文件
- index.css 项目全局样式
- App.js 构建了一个App组件,是项目最大的组件 【 类似根组件 】
- App.css 是App组件的样式文件
- App.test.js 是App组件测试文件
- logo.svg 初始项目的界面logo
- serverWorker 内部文件,我们不操作 -
5.npm安装失败
-
切换为npm镜像为淘宝镜像
-
使用yarn,如果本来使用yarn还要失败,还得把yarn的源切换到国内
yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源 yarn config list // 查看yarn 镜像列表
-
如果还没有办法解决,请删除node_modules及yarn-lock.json然后重新执行
cnpm install命令
-
再不能解决就删除node_modules及yarn-lock.json的同时清除npm缓存
npm cache clean --force
之后再执行npm install
命令 -
环境变量问题
-
react-scripts 版本过高问题 ( 降低版本 react-script@2.1.8)
-
-
上述解决方案均未成功,则
- 在其他可以成功安装React的设备上将目录文件拷贝过来,注意不要拷贝node_modules
- 拷贝过来之后,
$ cnpm i
- 拷贝过来之后,
- 在其他可以成功安装React的设备上将目录文件拷贝过来,注意不要拷贝node_modules
-
6.启动失败请参考:解决react安装CRA启动spawn cmd ENOENT报错问题