写在前面的话

最近看React官方文档，刷到了beta.reactjs.org，心血来潮，来一个翻译，以弥补中文文档的短缺。能力不行，水平有限，各位看官的支持将是我持续翻译的动力，感谢大家~

快速开始

欢迎使用React文档！下面是本网站所提供的大纲。

你将学习到

如何设置React

如何用React的思维方式创建用户界面

如何渲染内容到屏幕

如何为用户界面提供相应的交互

在未来App的迭代过程中，如何保持逻辑的可维护性

在一些必要场景，如何剥离React

简介

下面是一个React App示例，你可以通过修改代码来显示你的名字来初尝React

// App.js
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return (
    <div>
      <Greeting name="Divyesh" />
      <Greeting name="Sarah" />
      <Greeting name="Taylor" />
    </div>
  );
}

什么是React？

简言之，React就是一个用于创建用户界面的JavaScript库。

React兼顾设计和编程。你可以用它创建复杂用户界面，并且将代码拆分成可嵌套、可复用的片段，这些方便组合的片段称为组件。 如果你有编程经验，这可能让你回想起用函数编写项目。如果你是一个设计师，它可以使你想起用图层展示你的设计。如果以上都不是，没关系。很多人入行即用React。使用React会让你感觉像是用乐高积木搭建一个城堡，会有很多乐趣哟。

React并不限制你怎样开发整个项目，它只是帮助你定义和构建组件，它可不为你提供解决方案。这意味着你可能需要选择一个完整的解决方案生态作为附加。比如，路由、样式、数据获取等。或者选用一个更牛的框架。

React能用来做什么？

不是我吹，那就太多了。真的！大家用React创建各种类型的用户界面，小到按钮控件、下拉菜单，大到整个app。本文档将教你用React构建web应用。 当然，在本文档所学内容与React Native大同小异。React Natvie可以用来开发Android项目、iOS项目，甚至windows和macOS项目。

如果你好奇日常使用的项目有哪些是用React开发的。你可以给Chrome浏览器装一个React Developer Tools扩展。这样，当你访问那些用React开发的网址的时候，工具栏中的图标就会点亮。

React用JavaScript

使用React时，本质上你是在用JavaScript来描述你的可视化业务逻辑。这需要多加练习，熟能生巧嘛。如果你是同时在学习JavaScript和React，可能会面对一些小小的挑战哦，加油，别灰心。总的来说，学习React其实就是在学习JavaScript。 也就是你最终所学到的知识远超React本身。

先来测试一下你的JavaScript水平。花个半小时左右的时间浏览JavaScript文档，会让你更有信心学习React。这里提一下，MDN和javascript.info是两个很牛的工具网站。

开始学习React吧

下面列出几种学习路径：

如果你没有耐心通过示例学习，直接去看Thinking in React。本教程并不会深入解释相关语法细节，但是会带你整体感受一下用React创建用户界面。
如果你已经熟悉相关概念，想看看API，The API reference。
接下来的文档将分章节逐个介绍相关概念--通过一系列交互性示例，和详尽的注释来加深理解。你不需要一字不落的读完所有章节，但是你得确保读下一页的时候前一页所讲述的概念都清楚了。 为了节省时间，我们还提供了一个各章节的概述。

第一章：概览：描述UI界面

React项目是用称为“组件”的独立代码片段构建的。React组件是一个可以添加标记的JavaScript函数。组件可以小到一个按钮，大到整个页面。下面的示例是一个名为Gallery的父组件渲染了三个名为Profile的子组件：

// App.js
function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
      className="avatar"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

示例中的标记看起来是不是很像HTML。这种语法称为JSX，并且更加严格(例如，必须保证所有标签都是闭合的)。注意，在JSX语法中，css类型名被定义为className。

就像你可以给标签传值一样，你也可以给像这样的组件传值。传递的值称为props。下面，三个组件可以接收不同的props值：

function Profile({ name, imageUrl }) {
  return (
    <img
      className="avatar"
      src={imageUrl}
      alt={name}
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile
        name="Lin Lanying"
        imageUrl="https://i.imgur.com/1bX5QH6.jpg"
      />
      <Profile
        name="Gregorio Y. Zara"
        imageUrl="https://i.imgur.com/7vQD0fPs.jpg"
      />
      <Profile
        name="Hedy Lamarr"
        imageUrl="https://i.imgur.com/yXOvdOSs.jpg"
      />
    </section>
  );
}

你也许好奇为啥className="avatar"用的是双引号，而src={imageUrl}用的是大括号。实际上，在JSX语法中，大括号就好像“通往JavaScript世界的窗口”。在大括号里，可以执行JavaScript代码。所以，src={imageUrl}读取的是从父组件传入的imageUrl属性值。

在上述例子中，数据被直接写在了标记中。然而，更多情况下，你更希望数据能够独立存在。接下来，数据被保存在了数组中。在React里，可以使用JavaScript的map函数来渲染列表。

// App.js
import { people } from './data.js';
import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      {people.map(person => (
        <Profile
          key={person.id}
          name={person.name}
          imageId={person.imageId}
        />
      ))}
    </section>
  );
}

// Profile.js
export default function Profile({ name, imageId }) {
  const imageUrl = (
    'https://i.imgur.com/' +
    imageId +
    's.jpg'
  );
  return (
    <img
      className="avatar"
      src={imageUrl}
      alt={name}
    />
  );
}

// data.js
export const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  imageId: 'MK3eW3A'
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  imageId: 'mynHUSa'
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  imageId: 'bE7W1ji'
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  imageId: 'IOjWm71'
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  imageId: 'lrWQx8l'
}];

React官方文档 BETA（翻译）