React脚手架

全局安装

npm i create-react-app -g

• 缺点,不能保证最新
• npx每次都是重新下载包 所以能保证最新

npx 目的

• 简化命令行工具的使用体验

  • 原来：1 先全局安装脚手架的工具包
    2 再使用工具包中提供的命令来初始化项目
  • 现在：合二为一，直接通过 npx 不需要在全局安装脚手架的包，就可以直接初始化项目
  • npx 内部会临时安装工具包，然后，使用工具包中提供的命令来初始化项目，并且，在初始化项目完成后，移除临时安装的工具包

• 项目的整体技术架构为: react + webpack4 + es6 + eslint + babel

文件夹简介

• public文件夹里面必须要有一个index.html
• src文件夹里面必须要有一个index.js(入口文件)

public/ 公共资源
 index.html 首页（必须有）
 manifest.json PWA应用的元数据
 
src/ 项目源码，写项目功能代码
 index.js 项目入口文件（必须有）
 App.js 项目的根组件
 App.test.js App组件的测试文件
 serviceWorker.js 用来实现PWA（可选）打包之后通过serve可以实现(在cmd中.window10的power shell会报错)

使用脚手架初始化项目的步骤

npx create-react-app my-app

初始化项目

• npx 是 npm v5.2 版本中新增的命令
• create-react-app react脚手架名称（固定）
• my-app 项目名称，可以自定义
• ctrl+shift 鼠标右键 powerShell
  
  

cd my-app 进入项目根目录

yarn start

启动项目

done

or VScode打开