React 从一开始就被设计为逐步采用。你可以根据需要使用尽可能少或尽可能多的 React。无论你是想体验 React、向 HTML 页面添加一些交互性、还是启动复杂的 React 驱动的应用,本节都将帮助你入门。

¥React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started.

尝试 React

¥Try React

你不需要安装任何东西来玩 React。尝试编辑这个沙盒!

¥You don’t need to install anything to play with React. Try editing this sandbox!

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />
}

你可以直接编辑它,也可以按右上角的 “复刻” 按钮在新选项卡中打开它。

¥You can edit it directly or open it in a new tab by pressing the “Fork” button in the upper right corner.

React 文档中的大多数页面都包含这样的沙箱。在 React 文档之外,还有许多支持 React 的在线沙箱:例如,CodeSandboxStackBlitzCodePen

¥Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, CodeSandbox, StackBlitz, or CodePen.

要在你的计算机上本地尝试 React,下载此 HTML 页面。在你的编辑器和浏览器中打开它!

¥To try React locally on your computer, download this HTML page. Open it in your editor and in your browser!

创建 React 应用

¥Creating a React App

如果你想启动新的 React 应用,可以使用推荐的框架进行 创建 React 应用

¥If you want to start a new React app, you can create a React app using a recommended framework.

从头开始构建 React 应用

¥Build a React App from Scratch

如果框架不适合你的项目,你更喜欢构建自己的框架,或者你只是想学习 React 应用的基础知识,你可以使用 从头开始构建 React 应用

¥If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can build a React app from scratch.

将 React 添加到现有项目

¥Add React to an existing project

如果想尝试在现有应用或网站中使用 React,你可以使用 将 React 添加到现有项目中

¥If want to try using React in your existing app or a website, you can add React to an existing project.

注意

我应该使用 Create React App 吗?

¥Should I use Create React App?

不。Create React App 已被弃用。有关更多信息,请参阅 Sunsetting Create React App

¥No. Create React App has been deprecated. For more information, see Sunsetting Create React App.

下一步

¥Next steps

前往 快速开始 指南,了解你每天都会遇到的最重要的 React 概念。

¥Head to the Quick Start guide for a tour of the most important React concepts you will encounter every day.