first do it, then do it right, then do it better.

此文章是翻译Typechecking With PropTypes这篇React（版本v15.4.0）官方文档。

Typechecking With PropTypes

随着你的应用的增大， 你可以通过类型检测（typechecking）获取许多bugs。对于一些应用，你可以使用JavaScript 后缀例如[Flow] ()或者TypeScript 去检测你的整个应用。但是即使你不使用这些，在React 有一些内置的类型检测能力。为了能够在component 的props 上运行类型检测，你可以将其赋于propTypes 属性（property）：

1
2
3
4
5
6
7
8
9
10
11

class Greeting extends Component {
  render(){
    return (
      <h1>Hello , {this.props.name}</h1>
    )
  }
}

Greeting.propTypes = {
  name : React.PropTypes.string
}

React.PropTypes 导出一系列的验证器（validator）可以用来确认你收到有效的数据。在这个例子中，我们使用React.PropTypes.string。当一个无效的值被提供给prop，一个警告就会在JavaScript console 中显示。为了性能原因，propTypes 只在开发模式进行验证。

此文章是翻译JSX In Depth这篇React（版本v15.4.0）官方文档。

JSX In Depth

从根本上说，JSX 只是提供了语法糖（syntactic sugar） 为React.createElement(component, props, ...children) 函数。这种JSX 代码：

1
2
3

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

编译成：

1
2
3
4
5

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

如果没有子节点你也可以使用自闭合（self-closing）标签。像这样：

1

<div className="sidebar" />

编译成：

1
2
3
4
5

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

如果你想要对一些特殊的JSX 转换成JavaScript进行彻底验证，你可以在the online Babel compiler 进行试验。

此文章是翻译State and Lifecycle这篇React（版本v15.4.0）官方文档。

State and Lifecycle

考虑之前章节中的时钟例子。

到现在为止，我们只会通过一种方式进行更新UI。

我们通过调用ReactDOM.render() 方法去改变渲染输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function tick(){
  const element = (
    <div>
      <h1>Hello World!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  )
  ReactDOM.render(
    element,
    document.getElementById('root')
  )
}

setInterval(tick, 1000)

在这一章节中，我们将学习如何使时钟component 真正可复用和封装。它将设置自己的定时器来每一秒更新它自己。

此文章是翻译Components and Props这篇React（版本v15.4.0）官方文档。

Components and Props

Components 让您将组件分拆独立的、可复用的块，并考虑独立的每一个部分。

从概念上讲，components 类似于JavaScript 函数。它们接受任意的输入（被称为“props”）并且返回React elements 描述在屏幕上如何展示。

Functional and Class Components

最简单的定义一个component 的方式是写一个JavaScript 函数：

1
2
3

function Welcome(props){
  return <h1>Hello, {props.name}</h1>
}

这个函数是一个有效的React component因为它接受一个“props”对象参数接受数据并且返回一个React element。我们称这样的component 为“funcitional”因为它们是字面量JavaScript 函数。

此文章是翻译Rendering Elements这篇React（版本v15.4.0）官方文档。

Rendering Elements

Elements 是构建React app 的最小块。

一个element 描述了你想要在屏幕上看到的东西：

1

const element = <h1>Hello, world</h1>

不像浏览器DOM elements，React elements 是纯对象，非常容易创建。React DOM 关心更新DOM 来匹配React elements。

此文章是翻译Introducing JSX这篇React（版本v15.4.0）官方文档。

Introducing JSX

考虑这个变量声明：

1

const element = <h1>Hello , world!</h1>

这个古怪的标签语法既不是string 也不是HTML。

它就是JSX，它是JavaScript 的一个语法扩展。我们建议在React 中使用它去描述UI 的展示。JSX 可能会使你记起模版语言（a template language），但是它使用JavaScript 的所有功能。

JSX 产生React 的elements。我们将在下一章 研究如何将它们渲染为DOM。接下来，你会了解对你使用React 所需要的基本的JSX 知识

此文章是翻译Hello World这篇React（版本v15.4.0）官方文档。

Hello World

使用this Hello World example code on CodePen 是最简单的了解React 的方式。你不必安装任何东西；你只需要跟着我们在新页面打开它就可以了。如果你更喜欢使用本地开发环境，请学习Installationg 页面。

这个最简单的React 例子：

1
2
3
4

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

它渲染了一个打印”Hello World” 在浏览器页面上。

此文章是翻译thingking in react这篇React（版本v15.4.0）官方文档。

Thinking in React

在我们看来，React 是使用JavaScript 构建大型开始Web 应用的首选。它已经在Facebook 和Instagram 中被广泛应用了。

React 最大的方面是使你考虑如果构建你的应用。在这篇文档中，我们将带你浏览通过使用React 构建一个searchable product data的思维过程。

此文章是翻译composition vs inheritance这篇React（版本v15.4.0）官方文档。

Composition vs Inheritance

React 有一个非常强大的组合模式（composition model），在组件之间，我们建议使用组合（composition）而不是继承（inheritance）。

在这个部分，我们将会考虑几个对React 开发新手来说经常遇到的几个继承问题，展示我们如何使用组合方式来解决它们。

此文章是翻译lifting-state-up这篇React（版本v15.4.0）官方文档。

Lifting State Up

通常，几个组件需要响应相同的数据变化。我们建议提升共享状态（lifting the shared state up）到距离它们最近的父组件。让我们看看这是如何运转的。

在这部分，我们将要创建一个温度计算器来计算给定的温度是否使水沸腾。

我们将创建一个BoilingVerdict 组件。它接受一个celsius 温度作为props，然后输出是否能够使水沸腾：

1
2
3
4
5
6
7

function BoilingVerdict(props){
  if(props.celsius >= 100){
    return <p>The water would boil.</p>
  }else{
    return <p>The water would nott boil.</p>
  }
}

然后，我们会创建一个Calculator 组件。它渲染一个<input> 接受你的键入的温度（ temperature），并将此值保存在this.state.value 中。