Hello World

最简单的 React 例子是像下面这样：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

这段代码在页面中渲染了一个 “Hello, world!” 标题。

Try it on CodePen

点击上面的链接打开在线编辑器。随意进行一些更改，并查看它们如何影响输出。本指南中的大多数页面都会有像这样的可编辑示例。

如何阅读本指南

在本指南中，我们将检查 React 应用程序的构建块：元素和组件。 一旦你掌握了它们，你就可以用小型、可复用的零件来创建复杂的应用程序。

提示：

本指南是为喜欢 一步一步学习概念的人逐步设计的 而设计的。如果你喜欢边做边学，请查看我们的实用教程。您可能会发现本指南和实用教程是互补的。

这是有关 React 主要概念的逐步指导的第一章。 您可以在导航边栏中找到其所有章节的列表。 如果您正在通过移动设备阅读此内容， 您可以通过按屏幕右下角的按钮访问导航。

本指南的每一章都建立在前几章介绍的知识的基础上。 您可以通过阅读侧栏中显示的“主要概念”指南章节，了解 React 的大部分内容。 例如，“介绍JSX” 是本文之后的下一章节。

知识水平假设

React 是一个 JavaScript 库，因此我们假定您对 JavaScript 语言有基本的了解。 如果您觉得不太自信，我们建议 通过 JavaScript 教程 检查您的知识水平，并让你跟上本指南的节奏。 这可能需要30分钟到一个小时，但你不必觉得自己同时学习了 React 和JavaScript。

注意

本指南偶尔会在示例中使用了一些较新的 JavaScript 语法。 如果你在过去的几年里没有使用过 JavaScript ，这三点 应该可以帮你快速理解。

让我们开始吧！

继续向下滚动页面，您可以在网站页脚之前找到 本指南下一章 的链接。