React 基础入门--脚手架

前端脚手架，简单来说就是指通过选择几个选项快速搭建项目基础代码的工具。前端脚手架可以有效避免我们 Ctrl + C 和 Ctrl + V 相同的代码框架和基础配置。

2、脚手架作用

1. 可以帮助我们快速生成项目的基础代码
2. 脚手架工具的项目模板经过了开发者的提炼和检验，一定程度上代表了某类项目的最佳实践
3. 脚手架工具支持使用自定义模板，我们可以根据不同的项目进行“定制”

3、React 常用脚手架

1. Create React App 官方脚手架
2. Umijs 蚂蚁金服脚手架
3. Icejs 阿里巴巴脚手架

4、安装脚手架

1. 安装 Create React App 脚手架：yarn create react-app
2. 安装 Umijs 脚手架 ：yarn create umi
3. 安装 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(),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 (

我的第一个项目



export default App;

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

更多系列文章及配套视频：https://www.yuque.com/study365