【react】从零快速搭建一个react app

完全从一个个文件夹和文件的创建来开始搭建应用，然后再自己下载项目的全部依赖，然后再写webpack.config.js，那真的是太浪费时间了。

0x01 create-react-app

npm的一个命令行工具

• 安装方法：npm install create-react-app -g
• 创建一个应用：create-react-app my-app

# 生成的目录结构
my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

0x02 react-scripts

npm的一个命令行工具

• 项目构建只依赖react-scipts
• 其他的依赖全部由react-scipts实现
• webpack、dev server等的配置文件也由react-scipts实现

0x03 src中开始开发项目

上面的所有过程就把基础的项目结构已经搭建完成了，接下来就可以开始开发app了

0x04 前端脚手架

这里有必要解释一下“前端脚手架”是什么？

• 上面用到的create-react-app其实就是一个脚手架，它起到什么作用呢？就比如你要盖房子，你得先把所有工具（梯子，脚手架、水泥等）准备好，然后才能盖房子。
• 回到前端项目上也是一样，也得准备工具，准备好以后才能正式编写代码了，实现业务功能。盖房子你得自己准备工具，但是做项目时幸亏有脚手架工具，省了很多事情，工具会自动帮我们配置好所有开发所需要的东西。
• 没有工具的话我们需要做哪些工作呢？（其实也就是脚手架工具帮我们干了哪些工作）
  • 选择一个包管理工具，初始化package.json文件
  • 查找项目引用的框架依赖和工具依赖包，并逐一安装相关的包
  • 针对已安装的包分别写对应的配置
  • 配置本地web server，代理静态资源文件
  • 如果引入测试环境，你还得安装单元测试的相关的依赖包，写对应的配置和运行脚本
  • 发布到生产环境则需要进行代码合并、压缩、混淆，规范化的发布可能还要引入持续集成工具。

---

欢迎关注微信公众号（coder0x00）或扫描下方二维码关注，我们将持续搜寻程序员必备基础技能包提供给大家。