1、脚手架是什么
前端脚手架，简单来说就是指通过选择几个选项快速搭建项目基础代码的工具。前端脚手架可以有效避免我们 Ctrl + C 和 Ctrl + V 相同的代码框架和基础配置。
2、脚手架作用
- 可以帮助我们快速生成项目的基础代码
- 脚手架工具的项目模板经过了开发者的提炼和检验，一定程度上代表了某类项目的最佳实践
- 脚手架工具支持使用自定义模板，我们可以根据不同的项目进行“定制”
3、React 常用脚手架
- Create React App 官方脚手架
- Umijs 蚂蚁金服脚手架
- Icejs 阿里巴巴脚手架
4、安装脚手架
- 安装 Create React App 脚手架：yarn create react-app
- 安装 Umijs 脚手架 ：yarn create umi
- 安装 Icejs 脚手架：yarn create ice
建议： 如果想快速开发项目，尽量选择后面两款脚手架；如果仅学习，可以先从 Create React App 脚手架开始。
5、创建React项目
以 Create React App 为例：
yarn create react-app my-app --创建项目
cd my-app --切换到项目文件夹
yarn --安装依赖
yarn start --启动项目
当看到以下界面时，说明你的 React 应用就已经安装好了。
6、目录介绍
├── README.md 文档
├── package.json npm 依赖信息
├── package-lock.json 依赖模块的版本信息
├── .gitignore 忽略打包的文件
├── public 静态资源文件夹
│ ├── favicon.ico 网站icon图标
│ ├── index.html 模版
│ ├── logo192.png 192*192大小的react logo
│ ├── logo512.png 512*512大小的react logo
│ ├── manifest.json 移动桌面快捷方式配置文件
│ └── robots.txt 网站与爬虫间的协议
├── src 源码文件夹
│ ├── App.css
│ ├── App.js 根组件
│ ├── App.test.js
│ ├── index.css 全局样式
│ ├── index.js 入口文件
│ ├── logo.svg
│ └── serviceWorker.js PWA 支持
└── node_modules 依赖包
在初始化好的项目中，Webpack等配置默认都是隐藏的，要想看到这些配置，就要执行以上命令来暴露项目的配置项。
暴露配置项之后，项目根目录又多出两个文件：scripts和config，他们都是被隐藏的配置项，同时package.json中的配置项也会变多，一些隐藏的配置项都暴露了出来。
npm run eject --暴露配置项
7、React 初体验
打开 src/index.js 文件，可以看到 render 的模版是 App.js，代码如下：
import React from 'react' // 使用JSX语法必须引入react
import ReactDOM from 'react-dom'
import App from './App.js' ReactDOM.render(<App />), document.getElementById('root'))
其中，root 是 index.html 模版里的绑定“root”的 div 元素，src/index.js 文件也是项目的入口。
下面我们来尝试修改 App.js 文件：
// src/App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<p>
我的第一个项目
</p>
</header>
</div>
)
}
export default App;
修改完保存之后，页面就会自动刷新，显示如下：
更多系列文章及配套视频：https://www.yuque.com/study365