前端React系列二：create-react-app简介

image.png

React 通过 JSX 提供灵活的组件化开发，将 HTML 与 JavaScript 逻辑结合，使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能，通过高效的差异对比和异步渲染，使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持，丰富的第三方库和工具（如 Redux、React Router）以及广泛的企业采用（如 Facebook、Netflix）推动其发展。Create React App 简化项目初始化，内置现代开发配置。React Developer Tools 提供强大调试功能，React Native 扩展技术栈到移动端，Hooks API 推动函数式编程，使代码更简洁和可重用。

---

React系列系列：
前端React系列一: React简介
前端React系列二: create-react-app简介
前端React系列三: TypeScript简介
前端React系列四：Ant Design简介
前端React系列五：React+CRA+TS+Ant Design高效开发前端
前端React系列六：ant-design-pro简介
前端React系列七：ant-design-pro架构
前端React系列八：ant-design-pro辅助开发命令
前端React系列九：Umi简介
前端React系列十：Umi环境变量

---

前言

React 作为一个优秀的构建用户界面的 JavaScript 库，它构建用户界面非常便捷，但是，如果要便捷地搭建React项目则需要给它搭配一款优秀的脚手架工具，让他们互相搭配，成为开发前端的利器。

这就不得不提到create-react-app（简称 CRA），它也是由 Facebook出品，他是开发React项目的脚手架工具，用于快速创建和设置 React 应用。它提供了一种零配置的开发体验，让开发者可以专注于编写代码，而不用担心构建工具的配置。以下是关于 create-react-app 的详细介绍。

1. 安装和创建项目

安装
create-react-app 是一个命令行工具，可以通过 npm 或 yarn 全局安装：

npm install -g create-react-app
# 或者
yarn global add create-react-app

创建新项目
使用 create-react-app 创建一个新项目非常简单：

npx create-react-app my-app
# 或者
yarn create react-app my-app

npx 是 npm 提供的一个命令，可以直接运行 npm 包，而无需全局安装。

2. 项目结构

创建的项目包含以下基本结构：

my-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

• public/：公共文件目录，所有文件会被直接复制到构建目录，不会被 Webpack 处理。
  • index.html 是入口 HTML 文件。
• src/：源代码目录，包含所有 React 组件和应用逻辑。
  • index.js：应用的入口文件，挂载 React 组件到 DOM。
  • App.js：主应用组件，默认的 React 组件结构。
• package.json：项目的依赖和脚本配置文件。
• .gitignore：Git 忽略文件列表。
• README.md：项目说明文档。

3. 常用命令

在 create-react-app 创建的项目中，package.json 文件包含了一些预定义的脚本命令：

启动开发服务器

npm start
# 或者
yarn start

启动一个本地开发服务器，支持热重载，默认地址为 http://localhost:3000。

构建生产版本

npm run build
# 或者
yarn build

将应用打包成生产版本，输出到 build 目录。

运行测试

npm test
# 或者
yarn test

启动测试运行器，使用 Jest 进行测试。

弹出配置

npm run eject
# 或者
yarn eject

将所有的配置文件（如 Webpack、Babel 等）从 react-scripts 中弹出，暴露到项目根目录。注意，这个操作是不可逆的，通常不建议使用，除非需要高度自定义配置。

4. 自定义配置

使用 CRACO
为了避免 eject，你可以使用 CRACO（Create React App Configuration Override）来扩展和自定义配置，而无需弹出配置文件。

安装 CRACO：

npm install @craco/craco
# 或者
yarn add @craco/craco

修改 package.json 文件中的脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

创建 craco.config.js 文件，进行自定义配置。例如，配置 Ant Design 的 Less 支持：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

5. 使用 TypeScript

create-react-app 支持使用 TypeScript 模板来创建项目：

npx create-react-app my-app --template typescript
# 或者
yarn create react-app my-app --template typescript

这会生成一个包含 TypeScript 配置和文件的 React 项目。

my-app
├── node_modules
├── public
├── src
├── .gitignore
├── package.json
├── README.md
├── yarn.lock / package-lock.json
└── tsconfig.json

6. 添加路由和状态管理

React Router
安装 React Router：

npm install react-router-dom
# 或者
yarn add react-router-dom

在 src 目录中创建一个 routes.js 文件，并配置路由：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

const Routes = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default Routes;

然后在 index.js 中使用 Routes 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Routes from './routes';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Redux
安装 Redux 和相关库：

npm install redux react-redux @reduxjs/toolkit
# 或者
yarn add redux react-redux @reduxjs/toolkit

创建 Redux store 并集成到 React 应用中：

import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Routes />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

总结

create-react-app 提供了一种简单快速的方式来启动和构建 React 应用，包含了现代 JavaScript 工具链的最佳实践。如果需要进一步的自定义，可以使用 CRACO 等工具，而无需弹出配置。通过结合 React Router 和 Redux，可以构建复杂的前端应用程序。