learn react course

从零开始构建 React 应用 – React 中文文档

弃用 Create React App

虽然 Create React App 让入门变得简单，但其存在的若干限制 使得构建高性能的生产级应用颇具挑战。理论上，我们可以通过将其逐步发展为 框架 的方式来解决这些问题。

然而，由于 Create React App 目前没有活跃的维护者，并且已经有许多现有的框架能够解决这些问题，我们决定弃用 Create React App。

从今天开始，如果你安装一个新的应用程序，你会看到一个弃用警告：

Console

create-react-app is deprecated. You can find a list of up-to-date React frameworks on react.dev For more info see: react.dev/link/cra This error message will only be shown once per install.

我们已在 Create React App 的 官网 和 GitHub 代码仓库 添加了弃用通知。Create React App 将以维护模式继续运行，并发布了与 React 19 兼容的新版本 Create React App。

如何迁移到框架

我们推荐使用 框架创建新的 React 应用。所有推荐的框架均支持客户端渲染（CSR）和单页面应用（SPA），并可通过 CDN 或静态托管服务部署，无需服务器支持。

对于现有的应用程序，这些指南将帮助你迁移到仅客户端的单页应用（SPA）：

• Next.js 的 Create React App 迁移指南
• React Router 的框架适配指南.
• Expo webpack 到 Expo Router 的迁移指南

如何迁移到构建工具

如果你的应用程序有特殊的限制，或者你更喜欢通过构建自己的框架来解决这些问题，或者你只是想从头学习 React 的工作原理，你可以使用 Vite、Parcel 或 Rsbuild 来定制自己的 React 设置。

针对现有应用，以下指南将协助你迁移至构建工具：

• Create React App 到 Vite 迁移指南
• Create React App 到 Parcel 迁移指南
• Create React App 到 Rsbuild 迁移指南

为帮助开发者快速上手 Vite、Parcel 或 Rsbuild，我们新增了 从零开始构建 React 应用 文档。

React Native 的 Metro

如果你从头开始使用 React Native，你将需要使用 Metro, 这是 React Native 的 JavaScript 打包工具。Metro 支持 iOS 和 Android 等平台的打包，但与这里提到的工具相比，它缺少许多功能。除非你的项目需要 React Native 支持，否则我们建议从 Vite、Parcel 或 Rsbuild 开始。

Getting Started | Metro

1\npm create vite@latest my-app -- --template react

npm create vite@latest my-app -- --template react

duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react$ npm create vite@latest first-test -- --template react
Need to install the following packages:
  create-vite@6.5.0
Ok to proceed? (y) y
│
◇  Scaffolding project in /home/duyicheng/Desktop/react/first-test...
│
└  Done. Now run:

  cd first-test
  npm install
  npm run dev

duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react$ cd first-test
duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react/first-test$ npm install

duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react/first-test$ npm install

added 154 packages, and audited 155 packages in 3m

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react/first-test$ code
duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react/first-test$ ^C
duyicheng@duyicheng-MIIX-510-12ISK:~/Desktop/react/first-test$

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import NavigationBar from './ulites/nn,jsx/t1'function App() {const [count, setCount] = useState(0)return (<><NavigationBar >  </NavigationBar><img src={reactLogo} alt="This is a loge" /><p>OK </p></>)
}export default App

function NavigationBar() {// TODO: 实际实现一个导航栏return <h1>Hello from React!</h1>;
}
export  default NavigationBar

keep waiting

推荐的文本编辑器功能

有些编辑器内置了这些功能，但某些编辑器可能需要添加扩展。你需要确认你的编辑器支持了哪些能力。

代码检查（Linting）

代码检查（Code linters）可以在你编写代码时，发现代码中的问题，以帮你尽早修复。ESLint 是一款流行且开源的 JavaScript 代码检查工具。

• 使用 React 的推荐配置安装 ESLint （确保你已经安装了 Node）
• 安装 VSCode 中的官方 ESLint 扩展

请确保你已经为你的项目启用了 eslint-plugin-react-hooks 规则。这在 React 项目中是必备的，同时能帮助你及早的捕获较为严重的 bug。我们推荐的 eslint-config-react-app preset 中已经集成了该规则。

格式化

与其他贡献者共享代码时，你最不想做的事就是争论代码缩进应该使用 tabs 还是空格！幸好，Prettier 会根据预设配置的规则重新格式化代码，以保证代码整洁。运行 Prettier，你的所有 tabs 都将转换为空格，同时缩进、引号等也都将根据你的配置而改变。理想状态下，当你保存文件时，Prettier 会自动执行格式化操作。

你可以为 VSCode 安装 Prettier 扩展，具体步骤如下：

1. 启动 VS Code
2. 使用快速打开（使用快捷键 Ctrl/Cmd + P）
3. 粘贴 ext install esbenp.prettier-vscode
4. 按回车键

保存并自动格式化

理想情况下，你应该在每次保存时自动格式化代码。VS Code 就包含该配置!

1. 在 VS Code, 按快捷键 Ctrl/Cmd + Shift + P.
2. 输入 “settings”
3. 按回车键
4. 在搜索栏, 输入 “format on save”
5. 确保勾选 “format on save” 选项！

如果你的 ESLint 预设包含格式化规则，它们可能会与 Prettier 发生冲突。我们建议使用eslint-config-prettier 禁用你 ESLint 预设中的所有格式化规则，这样 ESLint 就只用于捕捉逻辑错误。如果你想在合并 PR 前强制执行文件的格式化，请在你的 CI 中使用 prettier --check 命令。