learn react course

news2025/6/7 6:49:24

从零开始构建 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