原文

The easiest way to get started with React is to use this Hello World example code on CodePen. You don’t need to install anything; you can just open it in another tab and follow along as we go through examples. If you’d rather use a local development environment, check out the Installation page.

在CodePen上尝试Hello World是体验React最便捷的方式。什么都不需要安装,只需要在另一个tab页面中打开并一步一步跟随示例即可。如果你更喜欢在本地开发环境,请参考使用方法中的操作。

The smallest React example looks like this:

最简单的React示例如下所示:

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

It renders a header saying “Hello World” on the page.

这个示例在页面上渲染出一个“Hello World”的标题。

The next few sections will gradually introduce you to using React. We will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.

后续的几个章节会逐渐介绍React的使用方法。把React应用构建中的各个细节进行讲解和演示,主要包括:元素和组件。一旦你掌握这些细节,就可以通过可复用的组件创建复杂的应用。

关于JavaScript(A Note on JavaScript)

React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don’t feel very confident, we recommend refreshing your JavaScript knowledge so you can follow along more easily.

React是一个JavaScript库,对其学习需要掌握基本的JavaScript语言。如果你对JavaScript不足够了解,推荐重新介绍 JavaScript(JS 教程) 以为后续的学习打下基础。

We also use some of the ES6 syntax in the examples. We try to use it sparingly because it’s still relatively new, but we encourage you to get familiar with arrow functions, classes, template literals, let, and const statements. You can use Babel REPL to check what ES6 code compiles to.

接下来的例子中会谨慎的涉及到部分ES6的语法,毕竟ES6语法还不足够普及,但是鼓励使用arrow functionsclassestemplate literalslet,and const语法。你可以使用Babel REPL检查语法的编译结果。