React 学习笔记 脚手架

React 学习笔记 脚手架

• 参考：王红元老师的React

前端脚手架

• 对于现在比较流行的三大框架都有属于自己的脚手架：
  • Vue的脚手架：vue-cli
  • Angular的脚手架：angular-cli
  • React的脚手架：create-react-app
• 它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。

安装node

• 官网地址：https://nodejs.org/en/download/
• 注意：这里推荐大家下载LTS（Long-term support ）版本，是长期支持版本，会比较稳定；

包管理工具

• React脚手架默认也是使用yarn；
  • npm install -g yarn

Yarn和npm命令对比

• 注：yarn : 无法加载文件 C:\Users\duany\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本 - rainbow70626 - 博客园

安装脚手架

•  在国内，某些情况使用npm和yarn可能无法正常安装一个库，这个时候我们可以选择使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 最后一个需要安装的是创建React项目的脚手架：

npm install -g create-react-app

创建React项目

• 创建React项目的命令如下：
  • 注意：项目名称不能包含大写字母
  • 另外还有更多创建项目的方式，可以参考GitHub 的readme
    • create-react-app 项目名称
• 创建完成后，进入对应的目录，就可以将项目跑起来：
  • 进入项目目录
  • yarn start

目录结构分析

脚手架中的webpack

• 如果我们希望看到webpack的配置信息，应该怎么来做呢？
• 我们可以执行一个package.json文件中的一个脚本："eject": "react-scripts eject"
• 这个操作是不可逆的，所以在执行过程中会给与我们提示；
  • yarn eject

文件结构删除

• 我们先将不需要的文件统统删掉：
  • 1.将src下的所有文件都删除
  • 2.将public文件下出列favicon.ico和index.html之外的文件都删除掉

编写代码

• 在src目录下，创建一个index.js文件，因为这是webpack打包的入口。
• 在index.js中开始编写React代码：
  • 我们会发现和写的代码是逻辑是一致的；
  • 只是在模块化开发中，我们需要手动的来导入React、ReactDOM，因为它们都是在我们安装的模块中；

• 如果我们不希望直接在 ReactDOM.render 中编写过多的代码，就可以单独抽取一个组件App.js：