React 的常用脚手架
React 的脚手架有很多，以下是比较常用的几个：
- create-react-app：官方提供的脚手架，简单易用，可以快速创建一个基于 React 的项目。
- Next.js：基于 React 的服务器渲染框架，可以用于构建 SSR 应用和静态网站。
- Gatsby：静态网站生成器，可以生成高性能的静态网站，适合构建博客和电子商务网站。
- React Native CLI：用于构建原生移动应用程序的 React 框架。
- React Boilerplate：一款 React 应用程序脚手架，包含了 React、Redux、React Router 和 webpack 等相关库和工具。
- UMI：它是一个完整的企业级脚手架，提供了路由、插件、中间件、构建等方面的功能，可以满足不同项目的需求；
Dva.js：它是一个基于 React 和 Redux 的数据流框架，可以用于快速构建复杂的单页应用。
create-react-app
create-react-app底层采用webapck作为构建工具 。
项目创建
使用 create-react-app 创建一个 React 项目的流程如下
全局安装create-react-app
npm install -g create-react-app
创建一个名为 my-react的项目
其中 my-react 是你想要创建项目的名称，你可以把它替换成任何你想要的名称。
create-react-app my-react
- 进入 my-react 目录 ，启动项目，在终端里执行命令 npm start，它会自动打开一个浏览器窗口并且显示你的React应用。或者浏览器输入http://localhost:3000/也可以访问
页面效果npm start
这样你就成功创建了一个 React 应用，你可以继续开发和修改它，并且使用命令 npm run build 打包生产环境的应用。
注，本文以为例来深入介绍脚手架，版本信息如下"dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" },脚手架目录
项目创建完毕后，我们完整的项目结构如图。my-react ├─ .gitignore ├─ package-lock.json ├─ package.json ├─ public │ ├─ favicon.ico │ ├─ index.html │ ├─ logo192.png │ ├─ logo512.png │ ├─ manifest.json │ └─ robots.txt ├─ README.md └─ src ├─ App.css ├─ App.js ├─ App.test.js ├─ index.css ├─ index.js ├─ logo.svg ├─ reportWebVitals.js └─ setupTests.jspublic 目录
public 目录用于存放一些不需要被打包的静态文件，例如：HTML 文件、图片、字体文件等
- index.html: 是唯一需要存在的 HTML 文件，所有 React 组件都将被渲染在这个 HTML 文件内。
```typescript
<!DOCTYPE html>
- manifest.json: 是一个 Web App 的配置文件，包含有关应用程序的信息，例如名称、描述、图标等。
- favicon.ico: 是应用程序的图标文件，通常会在 Web 浏览器中显示。
- robots.txt: 是一个标准的互联网协议，用于告诉搜索引擎哪些页面可以抓取，哪些不能抓取。
### src目录
src 文件夹是创建 React 应用程序时存放你的主要源代码的地方
```typescript
└─ src
├─ App.css
├─ App.js
├─ App.test.js
├─ index.css
├─ index.js
├─ logo.svg
├─ reportWebVitals.js
└─ setupTests.js
- reportWebVitals.js是一个网页性能监测配置文件，我们不用关注
- setupTests.js是单元测试文件，我们同样不用关注
- App.js是应用程序的根组件。
```typescript
// src\App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
);
}
export default App;
脚手架文件中的代码导出了一个函数式组件。
- App.css 是主应用程序的的样式文件。
- App.test.js 是应用测试文件可以忽略不管。
- index.js：应用程序的入口文件。这个文件渲染了 App 组件，并向其传递了一些配置。
```typescript
// 导入 React 库，这是必需的，因为我们的应用程序要用到 React 组件
import React from 'react';
// 导入了ReactDOM，这个库是将 React 组件渲染到页面中的关键所在。
import ReactDOM from 'react-dom/client';
// 这是应用程序的样式文件
import './index.css';
// 导入了 App 组件，这是我们的应用程序的主组件，通常包含其他组件
import App from './App';
// 单元测试文件
import reportWebVitals from './reportWebVitals';
//
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// 性能监测，我们可以删除
reportWebVitals();
createRoot 方法返回一个对象，该对象具有 render 方法，用于渲染 React 应用。render 方法接受一个 React 元素作为参数，表示要渲染的组件树。
在这段代码中，我们使用 React.StrictMode 组件来启用 React 的严格模式。严格模式会检查代码中的一些问题，并在开发环境下警告我们。然后我们将 组件包裹在 StrictMode 组件中，表示该组件及其所有子组件都将启用严格模式。
最后，我们使用 render 方法将应用渲染到 root 元素中。这意味着 React 将会渲染 组件，并将其渲染的结果插入到 root 元素中。
