React脚手架及CRA脚手架的使用

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 版本过高问题 （ 降低版本 [email protected]）

• 上述解决方案均未成功，则

  • 在其他可以成功安装React的设备上将目录文件拷贝过来，注意不要拷贝node_modules
    • 拷贝过来之后，$ cnpm i

• 6.启动失败请参考：解决react安装CRA启动spawn cmd ENOENT报错问题