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 为例：

  1. yarn create react-app my-app  --创建项目
  2. cd my-app  --切换到项目文件夹
  3. yarn --安装依赖
  4. yarn start --启动项目

当看到以下界面时，说明你的 React 应用就已经安装好了。
image.png

6、目录介绍

  1. ├── README.md                   文档 
  2. ├── package.json                npm 依赖信息
  3. ├── package-lock.json           依赖模块的版本信息
  4. ├── .gitignore                  忽略打包的文件
  5. ├── public                      静态资源文件夹
  6. │   ├── favicon.ico             网站icon图标
  7. │   ├── index.html              模版
  8. │   ├── logo192.png             192*192大小的react logo
  9. │   ├── logo512.png             512*512大小的react logo
  10. │   ├── manifest.json           移动桌面快捷方式配置文件
  11. │   └── robots.txt              网站与爬虫间的协议
  12. ├── src                         源码文件夹
  13. │   ├── App.css
  14. │   ├── App.js                  根组件
  15. │   ├── App.test.js
  16. │   ├── index.css               全局样式
  17. │   ├── index.js                入口文件
  18. │   ├── logo.svg    
  19. │   └── serviceWorker.js        PWA 支持
  20. └── node_modules                依赖包

在初始化好的项目中，Webpack等配置默认都是隐藏的，要想看到这些配置，就要执行以上命令来暴露项目的配置项。

暴露配置项之后，项目根目录又多出两个文件：scripts和config，他们都是被隐藏的配置项，同时package.json中的配置项也会变多，一些隐藏的配置项都暴露了出来。

  1. npm run eject  --暴露配置项

7、React 初体验

打开 src/index.js 文件，可以看到 render 的模版是 App.js，代码如下：

  1. import React from 'react' // 使用JSX语法必须引入react
  2. import ReactDOM from 'react-dom'
  3. import App from './App.js'
  5. ReactDOM.render(<App />), 
  6. document.getElementById('root'))

其中，root 是 index.html 模版里的绑定“root”的 div 元素，src/index.js 文件也是项目的入口。

下面我们来尝试修改 App.js 文件：

  1. // src/App.js
  2. import React from 'react';
  3. import './App.css';
  4. function App() {
  5.     return (
  6.         <div className="App">
  7.             <header className="App-header">
  8.                 <p>
  9.                   我的第一个项目
  10.                 </p>
  11.             </header>
  12.         </div>
  13.     )
  14. }
  15. export default App;

修改完保存之后，页面就会自动刷新，显示如下：
image.png

更多精品系列文档及视频：前端大潘与实践