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