From d506bc724a3bdcd1fdc5cc1020155243bd1bd480 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Sun, 3 Feb 2019 01:41:48 +0900
Subject: [PATCH 01/25] doc: Translate API Reference of React

---
 content/docs/reference-react.md | 147 +++++++++++++++++---------------
 1 file changed, 76 insertions(+), 71 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 68a00c4c0..50af3ff95 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -1,6 +1,6 @@
 ---
 id: react-api
-title: React Top-Level API
+title: React の最上位 API
 layout: docs
 category: Reference
 permalink: docs/react-api.html
@@ -13,43 +13,47 @@ redirect_from:
   - "docs/top-level-api-zh-CN.html"
 ---
 
-`React` is the entry point to the React library. If you load React from a `<script>` tag, these top-level APIs are available on the `React` global. If you use ES6 with npm, you can write `import React from 'react'`. If you use ES5 with npm, you can write `var React = require('react')`.
+`React` は React ライブラリのエントリポイントです。`<script>` タグから React を読み込む場合、これらの最上位 API をグローバルの `React` から利用できます。
+npm と ES6 を使う場合、 `import React from 'react'` と書けます。npm と ES5 を使う場合、 `var React = require('react')` と書けます。
 
 ## Overview
 
 ### Components
 
-React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing `React.Component` or `React.PureComponent`.
+React コンポーネントを使用するとUIを独立した再利用可能な部分に分割し、各部分を個別に考えることができます。
+React コンポーネントは `React.Component` または `React.PureComponent` をサブクラス化することで定義することができます。
 
  - [`React.Component`](#reactcomponent)
  - [`React.PureComponent`](#reactpurecomponent)
 
-If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/docs/react-without-es6.html) for more information.
+ES6 クラスを使う代わりに、 `create-react-class` を使うことができます。
+詳しくは [Using React without ES6](/docs/react-without-es6.html) を見てください。
 
-React components can also be defined as functions which can be wrapped:
+React コンポーネントは関数をラップして定義することもできます：
 
 - [`React.memo`](#reactmemo)
 
 ### Creating React Elements
 
-We recommend [using JSX](/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX.
+UI がどのように見えるかを記述するために [using JSX](/docs/introducing-jsx.html) を推奨します。 JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。
+JSX を使用している場合は、通常、次のメソッドを直接呼び出さないでください。
 
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)
 
-See [Using React without JSX](/docs/react-without-jsx.html) for more information.
+詳しくは [Using React without JSX](/docs/react-without-jsx.html) を見てください。
 
-### Transforming Elements
+### 要素を変換する
 
-`React` provides several APIs for manipulating elements:
+`React` は要素を操作するためのいくつかの API を提供しています。
 
 - [`cloneElement()`](#cloneelement)
 - [`isValidElement()`](#isvalidelement)
 - [`React.Children`](#reactchildren)
 
-### Fragments
+### フラグメント
 
-`React` also provides a component for rendering multiple elements without a wrapper.
+`React` はラッパーなしで、複数の要素をレンダリングするコンポーネントを提供しています。
 
 - [`React.Fragment`](#reactfragment)
 
@@ -58,20 +62,22 @@ See [Using React without JSX](/docs/react-without-jsx.html) for more information
 - [`React.createRef`](#reactcreateref)
 - [`React.forwardRef`](#reactforwardref)
 
-### Suspense
+### サスペンス
 
-Suspense lets components "wait" for something before rendering. Today, Suspense only supports one use case: [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy). In the future, it will support other use cases like data fetching.
+サスペンスを使用すると、コンポーネントはレンダリングの前に何かを待機することができます。
+現在、サスペンスは1つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
+将来的にはデータの取得のような他のユースケースもサポートされます。
 
 - [`React.lazy`](#reactlazy)
 - [`React.Suspense`](#reactsuspense)
 
 * * *
 
-## Reference
+## 参考
 
 ### `React.Component`
 
-`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes):
+React コンポーネントが [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) を用いて定義されている場合、 `React.Component` はそれらの基底クラスになります。
 
 ```javascript
 class Greeting extends React.Component {
@@ -81,21 +87,21 @@ class Greeting extends React.Component {
 }
 ```
 
-See the [React.Component API Reference](/docs/react-component.html) for a list of methods and properties related to the base `React.Component` class.
+基底クラス `React.Component` に関するメソッドとプロパティの一覧については、 [React.Component API Reference](/docs/react-component.html) を参照してください。
 
 * * *
 
 ### `React.PureComponent`
 
-`React.PureComponent` is similar to [`React.Component`](#reactcomponent). The difference between them is that [`React.Component`](#reactcomponent) doesn't implement [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate), but `React.PureComponent` implements it with a shallow prop and state comparison. 
+`React.PureComponent` は [`React.Component`](#reactcomponent) と似ています。両者の違いは [`React.Component`](#reactcomponent) が [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) を実装していないことに対し、 `React.PureComponent` は props と state を浅く (shallow) 比較することでそれを実装していることです。
 
-If your React component's `render()` function renders the same result given the same props and state, you can use `React.PureComponent` for a performance boost in some cases.
+React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダリングするときは、 パフォーマンスを向上させるために `React.PureComponent` を使用することができます。
 
-> Note
+> 補足
 >
-> `React.PureComponent`'s `shouldComponentUpdate()` only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend `PureComponent` when you expect to have simple props and state, or use [`forceUpdate()`](/docs/react-component.html#forceupdate) when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
+> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、全体では差分があっても差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [immutable objects](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
-> Furthermore, `React.PureComponent`'s `shouldComponentUpdate()` skips prop updates for the whole component subtree. Make sure all the children components are also "pure".
+> さらに、 `React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが純粋コンポーネントであることを確認してください。
 
 * * *
 
@@ -107,11 +113,11 @@ const MyComponent = React.memo(function MyComponent(props) {
 });
 ```
 
-`React.memo` is a [higher order component](/docs/higher-order-components.html). It's similar to [`React.PureComponent`](#reactpurecomponent) but for function components instead of classes.
+`React.memo` は [higher order component](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネントです。
 
-If your function component renders the same result given the same props, you can wrap it in a call to `React.memo` for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
+ある関数コンポーネントが同じpropsを与えられたときに同じ結果をレンダリングするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダリングをスキップし、最後のレンダリング結果を再利用します。
 
-By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
+デフォルトではpropsオブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は2番目の引数でカスタム比較関数を指定することができます。
 
 ```javascript
 function MyComponent(props) {
@@ -119,19 +125,19 @@ function MyComponent(props) {
 }
 function areEqual(prevProps, nextProps) {
   /*
-  return true if passing nextProps to render would return
-  the same result as passing prevProps to render,
-  otherwise return false
+  nextPropsをrenderに渡したときに
+  prevPropsをrenderに渡したときと同じ結果になるときにtrue
+  それ以外のときにfalseを返す
   */
 }
 export default React.memo(MyComponent, areEqual);
 ```
 
-This method only exists as a **[performance optimization](/docs/optimizing-performance.html).** Do not rely on it to "prevent" a render, as this can lead to bugs.
+これは **[performance optimization](/docs/optimizing-performance.html)** のためだけの方法です。バグを引き起こす可能性があるため、レンダリングを防ぐために使用しないでください。
 
-> Note
+> 注意
 >
-> Unlike the [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method on class components, the `areEqual` function returns `true` if the props are equal and `false` if the props are not equal. This is the inverse from `shouldComponentUpdate`.
+> クラスコンポーネントの [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) とは異なり、この `areEqual` 関数は props が等しいときに `true` を返し、 props が等しくないときに `false` を返します。これは `shouldComponentUpdate` とは逆です。
 
 * * *
 
@@ -145,9 +151,9 @@ React.createElement(
 )
 ```
 
-Create and return a new [React element](/docs/rendering-elements.html) of the given type. The type argument can be either a tag name string (such as `'div'` or `'span'`), a [React component](/docs/components-and-props.html) type (a class or a function), or a [React fragment](#reactfragment) type.
+与えられた型の新しい [React element](/docs/rendering-elements.html) を作成して返します。type 引数はタグ名の文字列（`div` や `span` など）、[React component](/docs/components-and-props.html) 型（クラスもしくは関数）、[React fragment](#reactfragment) 型のいずれかです。
 
-Code written with [JSX](/docs/introducing-jsx.html) will be converted to use `React.createElement()`. You will not typically invoke `React.createElement()` directly if you are using JSX. See [React Without JSX](/docs/react-without-jsx.html) to learn more.
+JSX で書かれたコードは `React.createElement()` を用いて変換されます。JSX を使っていれば通常 `React.createElement()` を直接呼び出すことはありません。詳しくは [React Without JSX](/docs/react-without-jsx.html) を参照してください。
 
 * * *
 
@@ -161,17 +167,17 @@ React.cloneElement(
 )
 ```
 
-Clone and return a new React element using `element` as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. `key` and `ref` from the original element will be preserved.
+`element` から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい小要素は既存の小要素を置き換えます。 `key` と `ref` は元の要素から保持されます。
 
-`React.cloneElement()` is almost equivalent to:
+`React.cloneElement()` とほぼ同等：
 
 ```js
 <element.type {...element.props} {...props}>{children}</element.type>
 ```
 
-However, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
+ただし、 `ref` は保持されます。つまり `ref` から子要素を得ても、間違って祖先から誤ってそれを盗むことはありません。新しい要素にも同じ `ref` が取り付けられます。
 
-This API was introduced as a replacement of the deprecated `React.addons.cloneWithProps()`.
+この API は非推奨の `React.addons.cloneWithProps()` の代替として導入されました。
 
 * * *
 
@@ -181,11 +187,11 @@ This API was introduced as a replacement of the deprecated `React.addons.cloneWi
 React.createFactory(type)
 ```
 
-Return a function that produces React elements of a given type. Like [`React.createElement()`](#createElement), the type argument can be either a tag name string (such as `'div'` or `'span'`), a [React component](/docs/components-and-props.html) type (a class or a function), or a [React fragment](#reactfragment) type.
+与えられた型の React 要素を生成する関数を返します。[`React.createElement()`](#createElement) と同様に、type 引数はタグ名の文字列（`div` や `span` など）、[React component](/docs/components-and-props.html) 型（クラスもしくは関数）、[React fragment](#reactfragment) 型のいずれかです。
 
-This helper is considered legacy, and we encourage you to either use JSX or use `React.createElement()` directly instead.
+このヘルパーはレガシーと見なされます。JSX か `React.createElement()` を直接使用することを勧めます。
 
-You will not typically invoke `React.createFactory()` directly if you are using JSX. See [React Without JSX](/docs/react-without-jsx.html) to learn more.
+JSX を使っていれば通常  `React.createFactory()` を直接呼び出すことはありません。詳しくは [React Without JSX](/docs/react-without-jsx.html) を見てください。
 
 * * *
 
@@ -195,13 +201,13 @@ You will not typically invoke `React.createFactory()` directly if you are using
 React.isValidElement(object)
 ```
 
-Verifies the object is a React element. Returns `true` or `false`.
+オブジェクトが React 要素であることを確認します。 `true` または `false` を返します。
 
 * * *
 
 ### `React.Children`
 
-`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
+`React.Children` はデータ構造が不透明な `this.props.children` を扱うためのユーティリティを提供します。
 
 #### `React.Children.map`
 
@@ -209,11 +215,11 @@ Verifies the object is a React element. Returns `true` or `false`.
 React.Children.map(children, function[(thisArg)])
 ```
 
-Invokes a function on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is an array it will be traversed and the function will be called for each child in the array. If children is `null` or `undefined`, this method will return `null` or `undefined` rather than an array.
+`this` を `thisArg` に設定して、 `children` 内に含まれるすべての直下の子要素に対して関数を呼び出します。 `children` が配列の場合は走査され、配列の各要素に対して関数が呼び出されます。 `children` が `null` または `undefined` の場合はこのメソッドは配列ではなく `null` または `undefined` を返します。
 
-> Note
+> 補足
 >
-> If `children` is a `Fragment` it will be treated as a single child and not traversed.
+> `children` が `Fragment` の場合、それは1つの子要素として扱われ、走査されません。
 
 #### `React.Children.forEach`
 
@@ -221,7 +227,7 @@ Invokes a function on every immediate child contained within `children` with `th
 React.Children.forEach(children, function[(thisArg)])
 ```
 
-Like [`React.Children.map()`](#reactchildrenmap) but does not return an array.
+[`React.Children.map()`](#reactchildrenmap) と似ていますが、配列を返しません。
 
 #### `React.Children.count`
 
@@ -229,7 +235,7 @@ Like [`React.Children.map()`](#reactchildrenmap) but does not return an array.
 React.Children.count(children)
 ```
 
-Returns the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.
+`children` のコンポーネントの数を返します。これは `map` または `forEach` に渡したコールバックが呼ばれる回数と同じです。
 
 #### `React.Children.only`
 
@@ -237,11 +243,11 @@ Returns the total number of components in `children`, equal to the number of tim
 React.Children.only(children)
 ```
 
-Verifies that `children` has only one child (a React element) and returns it. Otherwise this method throws an error.
+`children` が1つの子要素しか持たないことを確認します。そうでない場合、このメソッドはエラーを投げます。
 
-> Note:
+> 補足:
 >
->`React.Children.only()` does not accept the return value of [`React.Children.map()`](#reactchildrenmap) because it is an array rather than a React element.
+> [`React.Children.map()`](#reactchildrenmap) の返り値は React 要素ではなく配列なため、 `React.Children.only()` はそれを受け付けません。
 
 #### `React.Children.toArray`
 
@@ -249,17 +255,17 @@ Verifies that `children` has only one child (a React element) and returns it. Ot
 React.Children.toArray(children)
 ```
 
-Returns the `children` opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice `this.props.children` before passing it down.
+それぞれの要素に割り当てられたキーを持つ不透明なデータ構造の `children` を平坦な配列として返します。レンダリングメソッド内で子の集合を操作したい場合、特に `this.props.children` を渡す前に並べ替えたりスライスしたい場合に便利です。
 
-> Note:
+> 補足:
 >
-> `React.Children.toArray()` changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, `toArray` prefixes each key in the returned array so that each element's key is scoped to the input array containing it.
+> `React.Children.toArray()` は子のリストを平坦にするときにネストされた配列の意味を保つためにキーを変更します。つまり、 `toArray` は配列のそれぞれの要素の key に接頭辞を付けて返します。
 
 * * *
 
 ### `React.Fragment`
 
-The `React.Fragment` component lets you return multiple elements in a `render()` method without creating an additional DOM element:
+`React.Fragment` コンポーネントを使用すると追加の DOM 要素を作成することなく `render()` メソッドで複数の要素を返すことができます。
 
 ```javascript
 render() {
@@ -272,51 +278,50 @@ render() {
 }
 ```
 
-You can also use it with the shorthand `<></>` syntax. For more information, see [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html).
+また、フラグメントを `<></>` という短縮構文で使用することもできます。詳しくは [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html) を見てください。
 
 
 ### `React.createRef`
 
-`React.createRef` creates a [ref](/docs/refs-and-the-dom.html) that can be attached to React elements via the ref attribute.
-`embed:16-3-release-blog-post/create-ref-example.js`
+`React.createRef` は [ref](/docs/refs-and-the-dom.html) を作成します。ref は ref 属性を介して React 要素に取り付けることができます。
 
 ### `React.forwardRef`
 
-`React.forwardRef` creates a React component that forwards the [ref](/docs/refs-and-the-dom.html) attribute it receives to another component below in the tree. This technique is not very common but is particularly useful in two scenarios:
+`React.forwardRef` は [ref](/docs/refs-and-the-dom.html) を配下のツリーの別のコンポーネントに受け渡す React コンポーネントを作成します。この手法はあまり一般的ではありませんが、2つのシナリオで特に役立ちます：
 
 * [Forwarding refs to DOM components](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
 * [Forwarding refs in higher-order-components](/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components)
 
-`React.forwardRef` accepts a rendering function as an argument. React will call this function with `props` and `ref` as two arguments. This function should return a React node.
+`React.forwardRef` はレンダリング関数を引数として受け入れます。Reactは props と ref を2つの引数として呼び出します。この関数は React ノードを返す必要があります。
 
 `embed:reference-react-forward-ref.js`
 
-In the above example, React passes a `ref` given to `<FancyButton ref={ref}>` element as a second argument to the rendering function inside the `React.forwardRef` call. This rendering function passes the `ref` to the `<button ref={ref}>` element.
+上の例では、React は `<FancyButton ref={ref}>` 要素に与えた `ref` を `React.forwardRef` の呼び出し内のレンダリング関数の2番目の引数として渡します。このレンダリング関数は `ref` を `<button ref={ref}>` 要素に渡します。
 
-As a result, after React attaches the ref, `ref.current` will point directly to the `<button>` DOM element instance.
+結果として、Reactが `ref` を取り付けた後、`ref.current` は `<button>` の DOM 要素のインスタンスを直接指すようになります。
 
-For more information, see [forwarding refs](/docs/forwarding-refs.html).
+詳しくは [forwarding refs](/docs/forwarding-refs.html) を見てください。
 
 ### `React.lazy`
 
-`React.lazy()` lets you define a component that is loaded dynamically. This helps reduce the bundle size to delay loading components that aren't used during the initial render.
+`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義することができます。これにより、バンドルサイズを削減して、最初のレンダリング時に使用されなかったコンポーネントの読み込みを遅らせることができます。
 
-You can learn how to use it from our [code splitting documentation](/docs/code-splitting.html#reactlazy). You might also want to check out [this article](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) explaining how to use it in more detail.
+[code splitting documentation](/docs/code-splitting.html#reactlazy) から使用方法を学ぶことが出来ます。また、使い方をより詳しく説明した [this article](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) もチェックしてみてください。
 
 ```js
 // This component is loaded dynamically
 const SomeComponent = React.lazy(() => import('./SomeComponent'));
 ```
 
-Note that rendering `lazy` components requires that there's a `<React.Suspense>` component higher in the rendering tree. This is how you specify a loading indicator.
+`lazy` コンポーネントをレンダリングするには `<React.Suspense>` がレンダリングツリーの上位に必要です。これはローディングインジケータを指定する方法です。
 
-> **Note**
+> **補足**
 >
-> Using `React.lazy`with dynamic import requires Promises to be available in the JS environment. This requires a polyfill on IE11 and below.
+> `React.lazy` を使って動的にインポートするには Promise が JS 環境で使用できる必要があります。これはIE11以前の環境にポリフィルを要求します。
 
 ### `React.Suspense`
 
-`React.Suspense` let you specify the loading indicator in case some components in the tree below it are not yet ready to render. Today, lazy loading components is the **only** use case supported by `<React.Suspense>`:
+`React.Suspense` を使用することで、その配下にレンダリングする準備ができていないコンポーネントがあるときにローディングインジケータを指定することができます。現在、遅延読み込みコンポーネントは `<React.Suspense>` のみによってサポートされています。
 
 ```js
 // This component is loaded dynamically
@@ -334,10 +339,10 @@ function MyComponent() {
 }
 ```
 
-It is documented in our [code splitting guide](/docs/code-splitting.html#reactlazy). Note that `lazy` components can be deep inside the `Suspense` tree -- it doesn't have to wrap every one of them. The best practice is to place `<Suspense>` where you want to see a loading indicator, but to use `lazy()` wherever you want to do code splitting.
+これは [code splitting guide](/docs/code-splitting.html#reactlazy) で文書化されています。遅延コンポーネントを `Suspense` ツリーの奥深くに置くこともできますが、それらすべてをラップする必要はありません。ベストプラクティスは `<Suspense>` をローディングインジケータを表示したい場所に配置することですが、コードを分割したい場合は `lazy()` を使用してください。
 
-While this is not supported today, in the future we plan to let `Suspense` handle more scenarios such as data fetching. You can read about this in [our roadmap](/blog/2018/11/27/react-16-roadmap.html).
+これらは現在サポートされていませんが、将来的には `Suspense` にデータの取得などのより多くのシナリオを処理させる予定です。この計画について、 [our roadmap](/blog/2018/11/27/react-16-roadmap.html) を読むことができます。
 
->Note:
+>注意:
 >
->`React.lazy()` and `<React.Suspense>` are not yet supported by `ReactDOMServer`. This is a known limitation that will be resolved in the future.
+>`React.lazy()` と `<React.Suspense>` は `ReactDOMServer` ではまだサポートされていません。これは既知の制限であり、今後解決されます。

From f4b4891a65c697c865adcff712ff8b77640c507b Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Sun, 3 Feb 2019 14:42:29 +0900
Subject: [PATCH 02/25] doc: Remove spaces after punctuations

---
 content/docs/reference-react.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 50af3ff95..a2ed19fd8 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -14,7 +14,7 @@ redirect_from:
 ---
 
 `React` は React ライブラリのエントリポイントです。`<script>` タグから React を読み込む場合、これらの最上位 API をグローバルの `React` から利用できます。
-npm と ES6 を使う場合、 `import React from 'react'` と書けます。npm と ES5 を使う場合、 `var React = require('react')` と書けます。
+npm と ES6 を使う場合、`import React from 'react'` と書けます。npm と ES5 を使う場合、`var React = require('react')` と書けます。
 
 ## Overview
 
@@ -26,7 +26,7 @@ React コンポーネントは `React.Component` または `React.PureComponent`
  - [`React.Component`](#reactcomponent)
  - [`React.PureComponent`](#reactpurecomponent)
 
-ES6 クラスを使う代わりに、 `create-react-class` を使うことができます。
+ES6 クラスを使う代わりに、`create-react-class` を使うことができます。
 詳しくは [Using React without ES6](/docs/react-without-es6.html) を見てください。
 
 React コンポーネントは関数をラップして定義することもできます：
@@ -35,7 +35,7 @@ React コンポーネントは関数をラップして定義することもで
 
 ### Creating React Elements
 
-UI がどのように見えるかを記述するために [using JSX](/docs/introducing-jsx.html) を推奨します。 JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。
+UI がどのように見えるかを記述するために [using JSX](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。
 JSX を使用している場合は、通常、次のメソッドを直接呼び出さないでください。
 
 - [`createElement()`](#createelement)
@@ -77,7 +77,7 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 
 ### `React.Component`
 
-React コンポーネントが [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) を用いて定義されている場合、 `React.Component` はそれらの基底クラスになります。
+React コンポーネントが [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) を用いて定義されている場合、`React.Component` はそれらの基底クラスになります。
 
 ```javascript
 class Greeting extends React.Component {
@@ -87,21 +87,21 @@ class Greeting extends React.Component {
 }
 ```
 
-基底クラス `React.Component` に関するメソッドとプロパティの一覧については、 [React.Component API Reference](/docs/react-component.html) を参照してください。
+基底クラス `React.Component` に関するメソッドとプロパティの一覧については、[React.Component API Reference](/docs/react-component.html) を参照してください。
 
 * * *
 
 ### `React.PureComponent`
 
-`React.PureComponent` は [`React.Component`](#reactcomponent) と似ています。両者の違いは [`React.Component`](#reactcomponent) が [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) を実装していないことに対し、 `React.PureComponent` は props と state を浅く (shallow) 比較することでそれを実装していることです。
+`React.PureComponent` は [`React.Component`](#reactcomponent) と似ています。両者の違いは [`React.Component`](#reactcomponent) が [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) を実装していないことに対し、`React.PureComponent` は props と state を浅く (shallow) 比較することでそれを実装していることです。
 
-React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダリングするときは、 パフォーマンスを向上させるために `React.PureComponent` を使用することができます。
+React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダリングするときは、パフォーマンスを向上させるために `React.PureComponent` を使用することができます。
 
 > 補足
 >
 > `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、全体では差分があっても差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [immutable objects](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
-> さらに、 `React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが純粋コンポーネントであることを確認してください。
+> さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが純粋コンポーネントであることを確認してください。
 
 * * *
 
@@ -137,7 +137,7 @@ export default React.memo(MyComponent, areEqual);
 
 > 注意
 >
-> クラスコンポーネントの [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) とは異なり、この `areEqual` 関数は props が等しいときに `true` を返し、 props が等しくないときに `false` を返します。これは `shouldComponentUpdate` とは逆です。
+> クラスコンポーネントの [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) とは異なり、この `areEqual` 関数は props が等しいときに `true` を返し、props が等しくないときに `false` を返します。これは `shouldComponentUpdate` とは逆です。
 
 * * *
 
@@ -167,7 +167,7 @@ React.cloneElement(
 )
 ```
 
-`element` から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい小要素は既存の小要素を置き換えます。 `key` と `ref` は元の要素から保持されます。
+`element` から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい小要素は既存の小要素を置き換えます。`key` と `ref` は元の要素から保持されます。
 
 `React.cloneElement()` とほぼ同等：
 
@@ -175,7 +175,7 @@ React.cloneElement(
 <element.type {...element.props} {...props}>{children}</element.type>
 ```
 
-ただし、 `ref` は保持されます。つまり `ref` から子要素を得ても、間違って祖先から誤ってそれを盗むことはありません。新しい要素にも同じ `ref` が取り付けられます。
+ただし、`ref` は保持されます。つまり `ref` から子要素を得ても、間違って祖先から誤ってそれを盗むことはありません。新しい要素にも同じ `ref` が取り付けられます。
 
 この API は非推奨の `React.addons.cloneWithProps()` の代替として導入されました。
 
@@ -201,7 +201,7 @@ JSX を使っていれば通常  `React.createFactory()` を直接呼び出す
 React.isValidElement(object)
 ```
 
-オブジェクトが React 要素であることを確認します。 `true` または `false` を返します。
+オブジェクトが React 要素であることを確認します。`true` または `false` を返します。
 
 * * *
 
@@ -215,7 +215,7 @@ React.isValidElement(object)
 React.Children.map(children, function[(thisArg)])
 ```
 
-`this` を `thisArg` に設定して、 `children` 内に含まれるすべての直下の子要素に対して関数を呼び出します。 `children` が配列の場合は走査され、配列の各要素に対して関数が呼び出されます。 `children` が `null` または `undefined` の場合はこのメソッドは配列ではなく `null` または `undefined` を返します。
+`this` を `thisArg` に設定して、`children` 内に含まれるすべての直下の子要素に対して関数を呼び出します。`children` が配列の場合は走査され、配列の各要素に対して関数が呼び出されます。`children` が `null` または `undefined` の場合はこのメソッドは配列ではなく `null` または `undefined` を返します。
 
 > 補足
 >
@@ -247,7 +247,7 @@ React.Children.only(children)
 
 > 補足:
 >
-> [`React.Children.map()`](#reactchildrenmap) の返り値は React 要素ではなく配列なため、 `React.Children.only()` はそれを受け付けません。
+> [`React.Children.map()`](#reactchildrenmap) の返り値は React 要素ではなく配列なため、`React.Children.only()` はそれを受け付けません。
 
 #### `React.Children.toArray`
 
@@ -259,7 +259,7 @@ React.Children.toArray(children)
 
 > 補足:
 >
-> `React.Children.toArray()` は子のリストを平坦にするときにネストされた配列の意味を保つためにキーを変更します。つまり、 `toArray` は配列のそれぞれの要素の key に接頭辞を付けて返します。
+> `React.Children.toArray()` は子のリストを平坦にするときにネストされた配列の意味を保つためにキーを変更します。つまり、`toArray` は配列のそれぞれの要素の key に接頭辞を付けて返します。
 
 * * *
 
@@ -341,7 +341,7 @@ function MyComponent() {
 
 これは [code splitting guide](/docs/code-splitting.html#reactlazy) で文書化されています。遅延コンポーネントを `Suspense` ツリーの奥深くに置くこともできますが、それらすべてをラップする必要はありません。ベストプラクティスは `<Suspense>` をローディングインジケータを表示したい場所に配置することですが、コードを分割したい場合は `lazy()` を使用してください。
 
-これらは現在サポートされていませんが、将来的には `Suspense` にデータの取得などのより多くのシナリオを処理させる予定です。この計画について、 [our roadmap](/blog/2018/11/27/react-16-roadmap.html) を読むことができます。
+これらは現在サポートされていませんが、将来的には `Suspense` にデータの取得などのより多くのシナリオを処理させる予定です。この計画について、[our roadmap](/blog/2018/11/27/react-16-roadmap.html) を読むことができます。
 
 >注意:
 >

From 8a64bdb28b78972267878171581f1d38a039c721 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Sun, 3 Feb 2019 14:49:44 +0900
Subject: [PATCH 03/25] doc: Space before and after alphabetic

---
 content/docs/reference-react.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index a2ed19fd8..2b3c38479 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -20,7 +20,7 @@ npm と ES6 を使う場合、`import React from 'react'` と書けます。npm
 
 ### Components
 
-React コンポーネントを使用するとUIを独立した再利用可能な部分に分割し、各部分を個別に考えることができます。
+React コンポーネントを使用すると UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。
 React コンポーネントは `React.Component` または `React.PureComponent` をサブクラス化することで定義することができます。
 
  - [`React.Component`](#reactcomponent)
@@ -115,9 +115,9 @@ const MyComponent = React.memo(function MyComponent(props) {
 
 `React.memo` は [higher order component](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネントです。
 
-ある関数コンポーネントが同じpropsを与えられたときに同じ結果をレンダリングするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダリングをスキップし、最後のレンダリング結果を再利用します。
+ある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダリングするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダリングをスキップし、最後のレンダリング結果を再利用します。
 
-デフォルトではpropsオブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は2番目の引数でカスタム比較関数を指定することができます。
+デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は2番目の引数でカスタム比較関数を指定することができます。
 
 ```javascript
 function MyComponent(props) {

From a67ef940bdc0c1c15a5a1ac5caf1dfb85d617b50 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Sun, 3 Feb 2019 15:07:06 +0900
Subject: [PATCH 04/25] doc: Space before and after number

---
 content/docs/reference-react.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 2b3c38479..98c5db4d8 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -27,7 +27,7 @@ React コンポーネントは `React.Component` または `React.PureComponent`
  - [`React.PureComponent`](#reactpurecomponent)
 
 ES6 クラスを使う代わりに、`create-react-class` を使うことができます。
-詳しくは [Using React without ES6](/docs/react-without-es6.html) を見てください。
+詳しくは [Using React without ES6](/docs/react-without-es6.html) を参照してください。
 
 React コンポーネントは関数をラップして定義することもできます：
 
@@ -41,7 +41,7 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)
 
-詳しくは [Using React without JSX](/docs/react-without-jsx.html) を見てください。
+詳しくは [Using React without JSX](/docs/react-without-jsx.html) を参照してください。
 
 ### 要素を変換する
 
@@ -51,7 +51,7 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 - [`isValidElement()`](#isvalidelement)
 - [`React.Children`](#reactchildren)
 
-### フラグメント
+### フラグメント (Fragment)
 
 `React` はラッパーなしで、複数の要素をレンダリングするコンポーネントを提供しています。
 
@@ -62,10 +62,10 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 - [`React.createRef`](#reactcreateref)
 - [`React.forwardRef`](#reactforwardref)
 
-### サスペンス
+### サスペンス (Suspense)
 
 サスペンスを使用すると、コンポーネントはレンダリングの前に何かを待機することができます。
-現在、サスペンスは1つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
+現在、サスペンスは 1 つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
 将来的にはデータの取得のような他のユースケースもサポートされます。
 
 - [`React.lazy`](#reactlazy)
@@ -73,7 +73,7 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 
 * * *
 
-## 参考
+## レファレンス
 
 ### `React.Component`
 
@@ -191,7 +191,7 @@ React.createFactory(type)
 
 このヘルパーはレガシーと見なされます。JSX か `React.createElement()` を直接使用することを勧めます。
 
-JSX を使っていれば通常  `React.createFactory()` を直接呼び出すことはありません。詳しくは [React Without JSX](/docs/react-without-jsx.html) を見てください。
+JSX を使っていれば通常  `React.createFactory()` を直接呼び出すことはありません。詳しくは [React Without JSX](/docs/react-without-jsx.html) を参照してください。
 
 * * *
 
@@ -219,7 +219,7 @@ React.Children.map(children, function[(thisArg)])
 
 > 補足
 >
-> `children` が `Fragment` の場合、それは1つの子要素として扱われ、走査されません。
+> `children` が `Fragment` の場合、それは 1 つの子要素として扱われ、走査されません。
 
 #### `React.Children.forEach`
 
@@ -243,7 +243,7 @@ React.Children.count(children)
 React.Children.only(children)
 ```
 
-`children` が1つの子要素しか持たないことを確認します。そうでない場合、このメソッドはエラーを投げます。
+`children` が 1 つの子要素しか持たないことを確認します。そうでない場合、このメソッドはエラーを投げます。
 
 > 補足:
 >
@@ -278,7 +278,7 @@ render() {
 }
 ```
 
-また、フラグメントを `<></>` という短縮構文で使用することもできます。詳しくは [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html) を見てください。
+また、フラグメントを `<></>` という短縮構文で使用することもできます。詳しくは [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html) を参照してください。
 
 
 ### `React.createRef`
@@ -287,12 +287,12 @@ render() {
 
 ### `React.forwardRef`
 
-`React.forwardRef` は [ref](/docs/refs-and-the-dom.html) を配下のツリーの別のコンポーネントに受け渡す React コンポーネントを作成します。この手法はあまり一般的ではありませんが、2つのシナリオで特に役立ちます：
+`React.forwardRef` は [ref](/docs/refs-and-the-dom.html) を配下のツリーの別のコンポーネントに受け渡す React コンポーネントを作成します。この手法はあまり一般的ではありませんが、2 つのシナリオで特に役立ちます：
 
 * [Forwarding refs to DOM components](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
 * [Forwarding refs in higher-order-components](/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components)
 
-`React.forwardRef` はレンダリング関数を引数として受け入れます。Reactは props と ref を2つの引数として呼び出します。この関数は React ノードを返す必要があります。
+`React.forwardRef` はレンダリング関数を引数として受け入れます。Reactは props と ref を 2 つの引数として呼び出します。この関数は React ノードを返す必要があります。
 
 `embed:reference-react-forward-ref.js`
 
@@ -300,7 +300,7 @@ render() {
 
 結果として、Reactが `ref` を取り付けた後、`ref.current` は `<button>` の DOM 要素のインスタンスを直接指すようになります。
 
-詳しくは [forwarding refs](/docs/forwarding-refs.html) を見てください。
+詳しくは [forwarding refs](/docs/forwarding-refs.html) を参照してください。
 
 ### `React.lazy`
 

From be54af61e14315ea85573100241414738c2f9a48 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Sun, 3 Feb 2019 15:22:14 +0900
Subject: [PATCH 05/25] doc: Improve translations

---
 content/docs/reference-react.md | 42 ++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 98c5db4d8..d6fe20fa6 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -35,7 +35,7 @@ React コンポーネントは関数をラップして定義することもで
 
 ### Creating React Elements
 
-UI がどのように見えるかを記述するために [using JSX](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。
+UI がどのように見えるかを記述するために [JSX の使用](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。
 JSX を使用している場合は、通常、次のメソッドを直接呼び出さないでください。
 
 - [`createElement()`](#createelement)
@@ -99,7 +99,7 @@ React コンポーネントの `render()` 関数が同じ props と state を与
 
 > 補足
 >
-> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、全体では差分があっても差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [immutable objects](https://facebook.github.io/immutable-js/) の使用を検討してください。
+> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [immutable objects](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
 > さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが純粋コンポーネントであることを確認してください。
 
@@ -113,11 +113,11 @@ const MyComponent = React.memo(function MyComponent(props) {
 });
 ```
 
-`React.memo` は [higher order component](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネントです。
+`React.memo` は [高階コンポーネント](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネントです。
 
-ある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダリングするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダリングをスキップし、最後のレンダリング結果を再利用します。
+ある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
 
-デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は2番目の引数でカスタム比較関数を指定することができます。
+デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定することができます。
 
 ```javascript
 function MyComponent(props) {
@@ -133,7 +133,7 @@ function areEqual(prevProps, nextProps) {
 export default React.memo(MyComponent, areEqual);
 ```
 
-これは **[performance optimization](/docs/optimizing-performance.html)** のためだけの方法です。バグを引き起こす可能性があるため、レンダリングを防ぐために使用しないでください。
+これは**[パフォーマンス最適化](/docs/optimizing-performance.html)**のためだけの方法です。バグを引き起こす可能性があるため、レンダーを「抑止する」ために使用しないでください。
 
 > 注意
 >
@@ -151,9 +151,9 @@ React.createElement(
 )
 ```
 
-与えられた型の新しい [React element](/docs/rendering-elements.html) を作成して返します。type 引数はタグ名の文字列（`div` や `span` など）、[React component](/docs/components-and-props.html) 型（クラスもしくは関数）、[React fragment](#reactfragment) 型のいずれかです。
+与えられた型の新しい [React 要素](/docs/rendering-elements.html)を作成して返します。`type` 引数はタグ名の文字列（`'div'` や `'span'` など）、[React component](/docs/components-and-props.html) 型（クラスもしくは関数）、[React fragment](#reactfragment) 型のいずれかです。
 
-JSX で書かれたコードは `React.createElement()` を用いて変換されます。JSX を使っていれば通常 `React.createElement()` を直接呼び出すことはありません。詳しくは [React Without JSX](/docs/react-without-jsx.html) を参照してください。
+JSX で書かれたコードは `React.createElement()` を用いるコードに変換されます。JSX を使っていれば通常 `React.createElement()` を直接呼び出すことはありません。詳しくは [JSX なしで React を使う](/docs/react-without-jsx.html)を参照してください。
 
 * * *
 
@@ -169,13 +169,13 @@ React.cloneElement(
 
 `element` から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい小要素は既存の小要素を置き換えます。`key` と `ref` は元の要素から保持されます。
 
-`React.cloneElement()` とほぼ同等：
+`React.cloneElement()` は以下のコードとほぼ同等です：
 
 ```js
 <element.type {...element.props} {...props}>{children}</element.type>
 ```
 
-ただし、`ref` は保持されます。つまり `ref` から子要素を得ても、間違って祖先から誤ってそれを盗むことはありません。新しい要素にも同じ `ref` が取り付けられます。
+ただし、`ref` も保持されます。つまり `ref` のある子要素を得ても、間違って祖先から誤ってそれを盗むことはありません。新しい要素にも同じ `ref` が取り付けられます。
 
 この API は非推奨の `React.addons.cloneWithProps()` の代替として導入されました。
 
@@ -187,11 +187,11 @@ React.cloneElement(
 React.createFactory(type)
 ```
 
-与えられた型の React 要素を生成する関数を返します。[`React.createElement()`](#createElement) と同様に、type 引数はタグ名の文字列（`div` や `span` など）、[React component](/docs/components-and-props.html) 型（クラスもしくは関数）、[React fragment](#reactfragment) 型のいずれかです。
+与えられた型の React 要素を生成する関数を返します。[`React.createElement()`](#createElement) と同様に、`type` 引数はタグ名の文字列（`'div'` や `'span'` など）、[React コンポーネント](/docs/components-and-props.html)型（クラスもしくは関数）、[React フラグメント](#reactfragment)型のいずれかです。
 
 このヘルパーはレガシーと見なされます。JSX か `React.createElement()` を直接使用することを勧めます。
 
-JSX を使っていれば通常  `React.createFactory()` を直接呼び出すことはありません。詳しくは [React Without JSX](/docs/react-without-jsx.html) を参照してください。
+JSX を使っていれば通常  `React.createFactory()` を直接呼び出すことはありません。詳しくは [JSX なしで React を使う](/docs/react-without-jsx.html)を参照してください。
 
 * * *
 
@@ -207,7 +207,7 @@ React.isValidElement(object)
 
 ### `React.Children`
 
-`React.Children` はデータ構造が不透明な `this.props.children` を扱うためのユーティリティを提供します。
+`React.Children` はデータ構造が非公開の `this.props.children` を扱うためのユーティリティを提供します。
 
 #### `React.Children.map`
 
@@ -255,11 +255,11 @@ React.Children.only(children)
 React.Children.toArray(children)
 ```
 
-それぞれの要素に割り当てられたキーを持つ不透明なデータ構造の `children` を平坦な配列として返します。レンダリングメソッド内で子の集合を操作したい場合、特に `this.props.children` を渡す前に並べ替えたりスライスしたい場合に便利です。
+データ構造が非公開の `children` を平坦な配列として返し、それぞれの要素に key を割り当てます。レンダーメソッド内で子の集合を操作したい場合、特に `this.props.children` を渡す前に並べ替えたりスライスしたい場合に便利です。
 
 > 補足:
 >
-> `React.Children.toArray()` は子のリストを平坦にするときにネストされた配列の意味を保つためにキーを変更します。つまり、`toArray` は配列のそれぞれの要素の key に接頭辞を付けて返します。
+> `React.Children.toArray()` は子のリストを平坦にするときにネストされた配列の意味を保つために key を変更します。つまり、`toArray` は配列のそれぞれの要素の key に接頭辞を付けて返します。
 
 * * *
 
@@ -296,7 +296,7 @@ render() {
 
 `embed:reference-react-forward-ref.js`
 
-上の例では、React は `<FancyButton ref={ref}>` 要素に与えた `ref` を `React.forwardRef` の呼び出し内のレンダリング関数の2番目の引数として渡します。このレンダリング関数は `ref` を `<button ref={ref}>` 要素に渡します。
+上の例では、React は `<FancyButton ref={ref}>` 要素に与えた `ref` を `React.forwardRef` の呼び出し内のレンダリング関数の 2 番目の引数として渡します。このレンダリング関数は `ref` を `<button ref={ref}>` 要素に渡します。
 
 結果として、Reactが `ref` を取り付けた後、`ref.current` は `<button>` の DOM 要素のインスタンスを直接指すようになります。
 
@@ -304,9 +304,9 @@ render() {
 
 ### `React.lazy`
 
-`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義することができます。これにより、バンドルサイズを削減して、最初のレンダリング時に使用されなかったコンポーネントの読み込みを遅らせることができます。
+`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義することができます。これにより、バンドルサイズを削減して、最初のレンダリング時に使用されないコンポーネントの読み込みを遅らせることができます。
 
-[code splitting documentation](/docs/code-splitting.html#reactlazy) から使用方法を学ぶことが出来ます。また、使い方をより詳しく説明した [this article](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) もチェックしてみてください。
+[code splitting のドキュメント](/docs/code-splitting.html#reactlazy)から使用方法を学ぶことが出来ます。また、使い方をより詳しく説明した[こちらの記事](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d)もチェックしてみてください。
 
 ```js
 // This component is loaded dynamically
@@ -317,7 +317,7 @@ const SomeComponent = React.lazy(() => import('./SomeComponent'));
 
 > **補足**
 >
-> `React.lazy` を使って動的にインポートするには Promise が JS 環境で使用できる必要があります。これはIE11以前の環境にポリフィルを要求します。
+> `React.lazy` を使って動的にインポートするには JS 環境で Promise が使用できる必要があります。これは IE11 以前の環境ではポリフィルが必要だということです。
 
 ### `React.Suspense`
 
@@ -339,9 +339,9 @@ function MyComponent() {
 }
 ```
 
-これは [code splitting guide](/docs/code-splitting.html#reactlazy) で文書化されています。遅延コンポーネントを `Suspense` ツリーの奥深くに置くこともできますが、それらすべてをラップする必要はありません。ベストプラクティスは `<Suspense>` をローディングインジケータを表示したい場所に配置することですが、コードを分割したい場合は `lazy()` を使用してください。
+これは [code splitting guide](/docs/code-splitting.html#reactlazy) で文書化されています。遅延される (lazy) コンポーネントを `Suspense` ツリーの奥深くに置くことができ、それらを 1 つずつラップする必要はありません。ベストプラクティスは `<Suspense>` をローディングインジケータを表示したい場所に配置することですが、コードを分割したい場合は `lazy()` を使用してください。
 
-これらは現在サポートされていませんが、将来的には `Suspense` にデータの取得などのより多くのシナリオを処理させる予定です。この計画について、[our roadmap](/blog/2018/11/27/react-16-roadmap.html) を読むことができます。
+これらは現在サポートされていませんが、将来的には `Suspense` にデータの取得などのより多くのシナリオを処理させる予定です。これについては[ロードマップ](/blog/2018/11/27/react-16-roadmap.html)で読めます。
 
 >注意:
 >

From 424e8ddc4e0aae22de25cc68cbb7e10f317cd116 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Sun, 3 Feb 2019 15:29:22 +0900
Subject: [PATCH 06/25] doc: Improve translations

---
 content/docs/reference-react.md | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index d6fe20fa6..073c0c7e2 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -20,23 +20,20 @@ npm と ES6 を使う場合、`import React from 'react'` と書けます。npm
 
 ### Components
 
-React コンポーネントを使用すると UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。
-React コンポーネントは `React.Component` または `React.PureComponent` をサブクラス化することで定義することができます。
+React コンポーネントを使用すると UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。React コンポーネントは `React.Component` または `React.PureComponent` をサブクラス化することで定義することができます。
 
  - [`React.Component`](#reactcomponent)
  - [`React.PureComponent`](#reactpurecomponent)
 
-ES6 クラスを使う代わりに、`create-react-class` を使うことができます。
-詳しくは [Using React without ES6](/docs/react-without-es6.html) を参照してください。
+ES6 クラスを使う代わりに、`create-react-class` を使うことができます。詳しくは [Using React without ES6](/docs/react-without-es6.html) を参照してください。
 
-React コンポーネントは関数をラップして定義することもできます：
+React コンポーネントは関数で定義することもでき、その際に以下の関数でラップすることもできます：
 
 - [`React.memo`](#reactmemo)
 
 ### Creating React Elements
 
-UI がどのように見えるかを記述するために [JSX の使用](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。
-JSX を使用している場合は、通常、次のメソッドを直接呼び出さないでください。
+UI がどのように見えるかを記述するために [JSX の使用](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。JSX を使用している場合は、通常、次のメソッドを直接呼び出さないでください。
 
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)
@@ -53,7 +50,7 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 
 ### フラグメント (Fragment)
 
-`React` はラッパーなしで、複数の要素をレンダリングするコンポーネントを提供しています。
+`React` はラッパーなしで複数の要素をレンダリングするためのコンポーネントを提供しています。
 
 - [`React.Fragment`](#reactfragment)
 
@@ -64,7 +61,7 @@ JSX を使用している場合は、通常、次のメソッドを直接呼び
 
 ### サスペンス (Suspense)
 
-サスペンスを使用すると、コンポーネントはレンダリングの前に何かを待機することができます。
+サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」することができます。
 現在、サスペンスは 1 つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
 将来的にはデータの取得のような他のユースケースもサポートされます。
 

From 34453623f5135b24b1723b5a97680cf6d39557eb Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 12:33:50 +0900
Subject: [PATCH 07/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 073c0c7e2..1d5ddcbb5 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -25,7 +25,7 @@ React コンポーネントを使用すると UI を独立した再利用可能
  - [`React.Component`](#reactcomponent)
  - [`React.PureComponent`](#reactpurecomponent)
 
-ES6 クラスを使う代わりに、`create-react-class` を使うことができます。詳しくは [Using React without ES6](/docs/react-without-es6.html) を参照してください。
+ES6 クラスを使わない場合は、代わりに `create-react-class` モジュールを使うことができます。詳しくは [Using React without ES6](/docs/react-without-es6.html) を参照してください。
 
 React コンポーネントは関数で定義することもでき、その際に以下の関数でラップすることもできます：
 

From 55622fe95c71dc41223ada2094a8b137452094ce Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 12:34:09 +0900
Subject: [PATCH 08/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 1d5ddcbb5..47932efe6 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -33,7 +33,7 @@ React コンポーネントは関数で定義することもでき、その際
 
 ### Creating React Elements
 
-UI がどのように見えるかを記述するために [JSX の使用](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。JSX を使用している場合は、通常、次のメソッドを直接呼び出さないでください。
+UI がどのように見えるべきかを記述するために [JSX の使用](/docs/introducing-jsx.html) を推奨します。JSX のそれぞれの要素は [`React.createElement()`](#createelement) を呼ぶための単なる糖衣構文です。JSX を使用している場合は、通常、次のメソッドを直接呼び出すことはありません。
 
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)

From eb619844413ee73d306e89f3e547eae92e9f1718 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 12:34:35 +0900
Subject: [PATCH 09/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 47932efe6..c85e6c5d6 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -63,7 +63,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 
 サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」することができます。
 現在、サスペンスは 1 つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
-将来的にはデータの取得のような他のユースケースもサポートされます。
+将来的にはデータの取得のような他のユースケースもサポートされるでしょう。
 
 - [`React.lazy`](#reactlazy)
 - [`React.Suspense`](#reactsuspense)

From 96a7075b7bcd859550a06d6a69e52511023bcf0d Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 12:34:58 +0900
Subject: [PATCH 10/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index c85e6c5d6..0e7256996 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -123,7 +123,7 @@ function MyComponent(props) {
 function areEqual(prevProps, nextProps) {
   /*
   nextPropsをrenderに渡したときに
-  prevPropsをrenderに渡したときと同じ結果になるときにtrue
+  prevPropsをrenderに渡したときと同じ結果になるときにtrueを返す
   それ以外のときにfalseを返す
   */
 }

From 54074706111813b98dfefc8920c0438671292f0d Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 12:35:34 +0900
Subject: [PATCH 11/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 0e7256996..3bdd01225 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -172,7 +172,7 @@ React.cloneElement(
 <element.type {...element.props} {...props}>{children}</element.type>
 ```
 
-ただし、`ref` も保持されます。つまり `ref` のある子要素を得ても、間違って祖先から誤ってそれを盗むことはありません。新しい要素にも同じ `ref` が取り付けられます。
+ただし、`ref` も保持されます。つまり `ref` のある子要素を受け取っても、間違って元の React 要素から  `ref` を盗むことはありません。新しい要素にも同じ `ref` が追加されます。
 
 この API は非推奨の `React.addons.cloneWithProps()` の代替として導入されました。
 

From 98b00fb386cff854c218bcfdfeaf0aee287e8315 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 12:35:50 +0900
Subject: [PATCH 12/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 3bdd01225..f4829281a 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -164,7 +164,7 @@ React.cloneElement(
 )
 ```
 
-`element` から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい小要素は既存の小要素を置き換えます。`key` と `ref` は元の要素から保持されます。
+`element` から新しい React 要素を複製して返します。結果の要素は元の要素の props と新しい props が浅くマージされたものを持ちます。新しい子要素は既存の子要素を置き換えます。`key` と `ref` は元の要素から保持されます。
 
 `React.cloneElement()` は以下のコードとほぼ同等です：
 

From b73551ccc024ec0692ed78f07f30bffc602be821 Mon Sep 17 00:00:00 2001
From: takanorip <takanori0170@gmail.com>
Date: Mon, 4 Feb 2019 17:18:59 +0900
Subject: [PATCH 13/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index f4829281a..31ae9f941 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -232,7 +232,7 @@ React.Children.forEach(children, function[(thisArg)])
 React.Children.count(children)
 ```
 
-`children` のコンポーネントの数を返します。これは `map` または `forEach` に渡したコールバックが呼ばれる回数と同じです。
+`children` に含まれるコンポーネントの総数を返します。これは `map` または `forEach` に渡したコールバックが呼ばれる回数と同じです。
 
 #### `React.Children.only`
 

From 81d54b43837f1b637659deebca59d16d1b70eb39 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Mon, 4 Feb 2019 17:30:50 +0900
Subject: [PATCH 14/25] doc: Simplify expressions

---
 content/docs/reference-react.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 31ae9f941..cd5838d4c 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -20,14 +20,14 @@ npm と ES6 を使う場合、`import React from 'react'` と書けます。npm
 
 ### Components
 
-React コンポーネントを使用すると UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。React コンポーネントは `React.Component` または `React.PureComponent` をサブクラス化することで定義することができます。
+React コンポーネントを使用すると UI を独立した再利用可能な部分に分割し、各部分を個別に考えることができます。React コンポーネントは `React.Component` または `React.PureComponent` をサブクラス化することで定義できます。
 
  - [`React.Component`](#reactcomponent)
  - [`React.PureComponent`](#reactpurecomponent)
 
 ES6 クラスを使わない場合は、代わりに `create-react-class` モジュールを使うことができます。詳しくは [Using React without ES6](/docs/react-without-es6.html) を参照してください。
 
-React コンポーネントは関数で定義することもでき、その際に以下の関数でラップすることもできます：
+React コンポーネントは関数で定義でき、その際に以下の関数でラップできます：
 
 - [`React.memo`](#reactmemo)
 
@@ -61,7 +61,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 
 ### サスペンス (Suspense)
 
-サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」することができます。
+サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」できます。
 現在、サスペンスは 1 つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
 将来的にはデータの取得のような他のユースケースもサポートされるでしょう。
 
@@ -92,7 +92,7 @@ class Greeting extends React.Component {
 
 `React.PureComponent` は [`React.Component`](#reactcomponent) と似ています。両者の違いは [`React.Component`](#reactcomponent) が [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) を実装していないことに対し、`React.PureComponent` は props と state を浅く (shallow) 比較することでそれを実装していることです。
 
-React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダリングするときは、パフォーマンスを向上させるために `React.PureComponent` を使用することができます。
+React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダリングするときは、パフォーマンスを向上させるために `React.PureComponent` を使用できます。
 
 > 補足
 >
@@ -114,7 +114,7 @@ const MyComponent = React.memo(function MyComponent(props) {
 
 ある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
 
-デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定することができます。
+デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定できます。
 
 ```javascript
 function MyComponent(props) {
@@ -275,7 +275,7 @@ render() {
 }
 ```
 
-また、フラグメントを `<></>` という短縮構文で使用することもできます。詳しくは [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html) を参照してください。
+また、フラグメントを `<></>` という短縮構文で使用できます。詳しくは [React v16.2.0: Improved Support for Fragments](/blog/2017/11/28/react-v16.2.0-fragment-support.html) を参照してください。
 
 
 ### `React.createRef`
@@ -301,9 +301,9 @@ render() {
 
 ### `React.lazy`
 
-`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義することができます。これにより、バンドルサイズを削減して、最初のレンダリング時に使用されないコンポーネントの読み込みを遅らせることができます。
+`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義できます。これにより、バンドルサイズを削減して、最初のレンダリング時に使用されないコンポーネントの読み込みを遅らせることができます。
 
-[code splitting のドキュメント](/docs/code-splitting.html#reactlazy)から使用方法を学ぶことが出来ます。また、使い方をより詳しく説明した[こちらの記事](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d)もチェックしてみてください。
+[code splitting のドキュメント](/docs/code-splitting.html#reactlazy)から使用方法を学ぶことができます。また、使い方をより詳しく説明した[こちらの記事](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d)もチェックしてみてください。
 
 ```js
 // This component is loaded dynamically
@@ -318,7 +318,7 @@ const SomeComponent = React.lazy(() => import('./SomeComponent'));
 
 ### `React.Suspense`
 
-`React.Suspense` を使用することで、その配下にレンダリングする準備ができていないコンポーネントがあるときにローディングインジケータを指定することができます。現在、遅延読み込みコンポーネントは `<React.Suspense>` のみによってサポートされています。
+`React.Suspense` を使用することで、その配下にレンダリングする準備ができていないコンポーネントがあるときにローディングインジケータを指定できます。現在、遅延読み込みコンポーネントは `<React.Suspense>` のみによってサポートされています。
 
 ```js
 // This component is loaded dynamically

From 15ec3cf4a6130da3c10865c24ca770d07cb92e2d Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Mon, 4 Feb 2019 17:45:41 +0900
Subject: [PATCH 15/25] =?UTF-8?q?doc:=20Improve=20translations=20(Replace?=
 =?UTF-8?q?=20'=E3=83=AC=E3=83=B3=E3=83=80=E3=83=AA=E3=83=B3=E3=82=B0',=20?=
 =?UTF-8?q?etc)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/reference-react.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index cd5838d4c..d7f94fa0c 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -50,7 +50,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 
 ### フラグメント (Fragment)
 
-`React` はラッパーなしで複数の要素をレンダリングするためのコンポーネントを提供しています。
+`React` はラッパーなしで複数の要素をレンダーするためのコンポーネントを提供しています。
 
 - [`React.Fragment`](#reactfragment)
 
@@ -92,13 +92,13 @@ class Greeting extends React.Component {
 
 `React.PureComponent` は [`React.Component`](#reactcomponent) と似ています。両者の違いは [`React.Component`](#reactcomponent) が [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) を実装していないことに対し、`React.PureComponent` は props と state を浅く (shallow) 比較することでそれを実装していることです。
 
-React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダリングするときは、パフォーマンスを向上させるために `React.PureComponent` を使用できます。
+React コンポーネントの `render()` 関数が同じ props と state を与えられたときに同じ結果をレンダーするときは、パフォーマンスを向上させるために `React.PureComponent` を使用できます。
 
 > 補足
 >
 > `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [immutable objects](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
-> さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが純粋コンポーネントであることを確認してください。
+> さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが「純粋な」コンポーネントであることを確認してください。
 
 * * *
 
@@ -186,7 +186,7 @@ React.createFactory(type)
 
 与えられた型の React 要素を生成する関数を返します。[`React.createElement()`](#createElement) と同様に、`type` 引数はタグ名の文字列（`'div'` や `'span'` など）、[React コンポーネント](/docs/components-and-props.html)型（クラスもしくは関数）、[React フラグメント](#reactfragment)型のいずれかです。
 
-このヘルパーはレガシーと見なされます。JSX か `React.createElement()` を直接使用することを勧めます。
+このヘルパーはレガシーだと考えられているため、代わりに JSX か `React.createElement()` を直接使用することをおすすめします。
 
 JSX を使っていれば通常  `React.createFactory()` を直接呼び出すことはありません。詳しくは [JSX なしで React を使う](/docs/react-without-jsx.html)を参照してください。
 
@@ -240,7 +240,7 @@ React.Children.count(children)
 React.Children.only(children)
 ```
 
-`children` が 1 つの子要素しか持たないことを確認します。そうでない場合、このメソッドはエラーを投げます。
+`children` が 1 つの子要素しか持たないことを確認し、結果を返します。そうでない場合、このメソッドはエラーを投げます。
 
 > 補足:
 >
@@ -289,11 +289,11 @@ render() {
 * [Forwarding refs to DOM components](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
 * [Forwarding refs in higher-order-components](/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components)
 
-`React.forwardRef` はレンダリング関数を引数として受け入れます。Reactは props と ref を 2 つの引数として呼び出します。この関数は React ノードを返す必要があります。
+`React.forwardRef` はレンダー関数を引数として受け入れます。Reactは props と ref を 2 つの引数として呼び出します。この関数は React ノードを返す必要があります。
 
 `embed:reference-react-forward-ref.js`
 
-上の例では、React は `<FancyButton ref={ref}>` 要素に与えた `ref` を `React.forwardRef` の呼び出し内のレンダリング関数の 2 番目の引数として渡します。このレンダリング関数は `ref` を `<button ref={ref}>` 要素に渡します。
+上の例では、React は `<FancyButton ref={ref}>` 要素に与えた `ref` を `React.forwardRef` の呼び出し内のレンダー関数の 2 番目の引数として渡します。このレンダー関数は `ref` を `<button ref={ref}>` 要素に渡します。
 
 結果として、Reactが `ref` を取り付けた後、`ref.current` は `<button>` の DOM 要素のインスタンスを直接指すようになります。
 
@@ -301,7 +301,7 @@ render() {
 
 ### `React.lazy`
 
-`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義できます。これにより、バンドルサイズを削減して、最初のレンダリング時に使用されないコンポーネントの読み込みを遅らせることができます。
+`React.lazy()` を使用すると、動的に読み込まれるコンポーネントを定義できます。これにより、バンドルサイズを削減して、最初のレンダー時に使用されないコンポーネントの読み込みを遅らせることができます。
 
 [code splitting のドキュメント](/docs/code-splitting.html#reactlazy)から使用方法を学ぶことができます。また、使い方をより詳しく説明した[こちらの記事](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d)もチェックしてみてください。
 
@@ -310,7 +310,7 @@ render() {
 const SomeComponent = React.lazy(() => import('./SomeComponent'));
 ```
 
-`lazy` コンポーネントをレンダリングするには `<React.Suspense>` がレンダリングツリーの上位に必要です。これはローディングインジケータを指定する方法です。
+`lazy` コンポーネントをレンダーするには `<React.Suspense>` がレンダリングツリーの上位に必要です。これはローディングインジケータを指定する方法です。
 
 > **補足**
 >
@@ -318,7 +318,7 @@ const SomeComponent = React.lazy(() => import('./SomeComponent'));
 
 ### `React.Suspense`
 
-`React.Suspense` を使用することで、その配下にレンダリングする準備ができていないコンポーネントがあるときにローディングインジケータを指定できます。現在、遅延読み込みコンポーネントは `<React.Suspense>` のみによってサポートされています。
+`React.Suspense` を使用することで、その配下にレンダーする準備ができていないコンポーネントがあるときにローディングインジケータを指定できます。現在、遅延読み込みコンポーネントは `<React.Suspense>` のみによってサポートされています。
 
 ```js
 // This component is loaded dynamically

From 91f2ce9ff20d66c849e440aa3479b3766abbc856 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Mon, 4 Feb 2019 18:01:27 +0900
Subject: [PATCH 16/25] doc: Translate external links

---
 content/docs/reference-react.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index d7f94fa0c..8509d778f 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -62,7 +62,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 ### サスペンス (Suspense)
 
 サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」できます。
-現在、サスペンスは 1 つのユースケースのみをサポートしています： [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy)。
+現在、サスペンスは 1 つのユースケースのみをサポートしています：[`React.lazy` を使ってコンポーネントを動的に読み込む](/docs/code-splitting.html#reactlazy)。
 将来的にはデータの取得のような他のユースケースもサポートされるでしょう。
 
 - [`React.lazy`](#reactlazy)
@@ -74,7 +74,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 
 ### `React.Component`
 
-React コンポーネントが [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) を用いて定義されている場合、`React.Component` はそれらの基底クラスになります。
+React コンポーネントが [ES6 クラス](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) を用いて定義されている場合、`React.Component` はそれらの基底クラスになります。
 
 ```javascript
 class Greeting extends React.Component {
@@ -96,7 +96,7 @@ React コンポーネントの `render()` 関数が同じ props と state を与
 
 > 補足
 >
-> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [immutable objects](https://facebook.github.io/immutable-js/) の使用を検討してください。
+> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [イミュータブルなオブジェクト](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
 > さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが「純粋な」コンポーネントであることを確認してください。
 

From d497a56cd7c5956c0aa46f558753ccc218bb7b8d Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Mon, 4 Feb 2019 18:01:41 +0900
Subject: [PATCH 17/25] doc: Improve translation

---
 content/docs/reference-react.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 8509d778f..415225e0f 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -122,9 +122,9 @@ function MyComponent(props) {
 }
 function areEqual(prevProps, nextProps) {
   /*
-  nextPropsをrenderに渡したときに
-  prevPropsをrenderに渡したときと同じ結果になるときにtrueを返す
-  それ以外のときにfalseを返す
+  nextProps を render に渡した結果が
+  prevProps を render に渡した結果となるときに true を返し
+  それ以外のときに false を返す
   */
 }
 export default React.memo(MyComponent, areEqual);

From e1f95177550ea7ba5b513c07a84b341d09bfcdcf Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Mon, 4 Feb 2019 18:32:46 +0900
Subject: [PATCH 18/25] doc: Remove line feeds not existing in original text
 and Restore incorrectly removed line

---
 content/docs/reference-react.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 415225e0f..11cd35a13 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -13,8 +13,7 @@ redirect_from:
   - "docs/top-level-api-zh-CN.html"
 ---
 
-`React` は React ライブラリのエントリポイントです。`<script>` タグから React を読み込む場合、これらの最上位 API をグローバルの `React` から利用できます。
-npm と ES6 を使う場合、`import React from 'react'` と書けます。npm と ES5 を使う場合、`var React = require('react')` と書けます。
+`React` は React ライブラリのエントリポイントです。`<script>` タグから React を読み込む場合、これらの最上位 API をグローバルの `React` から利用できます。npm と ES6 を使う場合、`import React from 'react'` と書けます。npm と ES5 を使う場合、`var React = require('react')` と書けます。
 
 ## Overview
 
@@ -61,9 +60,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 
 ### サスペンス (Suspense)
 
-サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」できます。
-現在、サスペンスは 1 つのユースケースのみをサポートしています：[`React.lazy` を使ってコンポーネントを動的に読み込む](/docs/code-splitting.html#reactlazy)。
-将来的にはデータの取得のような他のユースケースもサポートされるでしょう。
+サスペンスを使用すると、コンポーネントはレンダーの前に何かを「待機」できます。現在、サスペンスは 1 つのユースケースのみをサポートしています：[`React.lazy` を使ってコンポーネントを動的に読み込む](/docs/code-splitting.html#reactlazy)。将来的にはデータの取得のような他のユースケースもサポートされるでしょう。
 
 - [`React.lazy`](#reactlazy)
 - [`React.Suspense`](#reactsuspense)
@@ -282,6 +279,8 @@ render() {
 
 `React.createRef` は [ref](/docs/refs-and-the-dom.html) を作成します。ref は ref 属性を介して React 要素に取り付けることができます。
 
+`embed:16-3-release-blog-post/create-ref-example.js`
+
 ### `React.forwardRef`
 
 `React.forwardRef` は [ref](/docs/refs-and-the-dom.html) を配下のツリーの別のコンポーネントに受け渡す React コンポーネントを作成します。この手法はあまり一般的ではありませんが、2 つのシナリオで特に役立ちます：

From d0b2843f2aac554ad3d9208af9ea0172684a2376 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Mon, 4 Feb 2019 18:55:06 +0900
Subject: [PATCH 19/25] doc: Convert attribute name to code

---
 content/docs/reference-react.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 11cd35a13..81dcbc034 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -277,8 +277,7 @@ render() {
 
 ### `React.createRef`
 
-`React.createRef` は [ref](/docs/refs-and-the-dom.html) を作成します。ref は ref 属性を介して React 要素に取り付けることができます。
-
+`React.createRef` は [ref](/docs/refs-and-the-dom.html) を作成します。ref は `ref` 属性を介して React 要素に取り付けることができます。
 `embed:16-3-release-blog-post/create-ref-example.js`
 
 ### `React.forwardRef`

From 860d10a37fb6319a78f37b97adccb66e319bd8ce Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Sun, 10 Feb 2019 20:44:43 +0900
Subject: [PATCH 20/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index ba3742f24..60c3cc686 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -37,7 +37,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)
 
-詳しくは [Using React without JSX](/docs/react-without-jsx.html) を参照してください。
+詳しくは [JSX なしで React を使う](/docs/react-without-jsx.html) を参照してください。
 
 ### 要素を変換する #{transforming-elements}
 

From 4093d103089d93bdb34f8139f5413ad1174a17c3 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Sun, 10 Feb 2019 20:46:09 +0900
Subject: [PATCH 21/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 60c3cc686..0f5cc7ae0 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -124,7 +124,7 @@ const MyComponent = React.memo(function MyComponent(props) {
 });
 ```
 
-`React.memo` は [高階コンポーネント](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネントです。
+`React.memo` は [高階コンポーネント](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネント用です。
 
 ある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
 

From 9be479170ef1d5a9a70989aa2fcfc224120892c5 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Sun, 10 Feb 2019 20:46:48 +0900
Subject: [PATCH 22/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 0f5cc7ae0..709ef86b2 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -126,7 +126,7 @@ const MyComponent = React.memo(function MyComponent(props) {
 
 `React.memo` は [高階コンポーネント](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネント用です。
 
-ある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするとき、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップして呼び出すことができます。つまり、Reactはコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
+もしある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップすることができます。つまり、Reactはコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
 
 デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定できます。
 

From f352e35e043c7fe30b4c45ef3750afb8e0091fc6 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Wed, 13 Feb 2019 20:02:33 +0900
Subject: [PATCH 23/25] =?UTF-8?q?Replace=20'=E3=83=AC=E3=83=95=E3=82=A1?=
 =?UTF-8?q?=E3=83=AC=E3=83=B3=E3=82=B9'=20with=20'=E3=83=AA=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=83=AC=E3=83=B3=E3=82=B9'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 709ef86b2..9119f0f30 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -84,7 +84,7 @@ UI がどのように見えるべきかを記述するために [JSX の使用](
 
 * * *
 
-## レファレンス {#reference}
+## リファレンス {#reference}
 
 ### `React.Component` {#reactcomponent}
 

From f2063995450d75a7d96334adfc5510984f28efe0 Mon Sep 17 00:00:00 2001
From: lightnet328 <lightnet328@gmail.com>
Date: Wed, 13 Feb 2019 20:10:36 +0900
Subject: [PATCH 24/25] Fix lint errors

---
 content/docs/reference-react.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 9119f0f30..0e5bad9bf 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -110,7 +110,7 @@ React コンポーネントの `render()` 関数が同じ props と state を与
 
 > 補足
 >
-> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstateを持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [イミュータブルなオブジェクト](https://facebook.github.io/immutable-js/) の使用を検討してください。
+> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstate を持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [イミュータブルなオブジェクト](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
 > さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが「純粋な」コンポーネントであることを確認してください。
 
@@ -126,7 +126,7 @@ const MyComponent = React.memo(function MyComponent(props) {
 
 `React.memo` は [高階コンポーネント](/docs/higher-order-components.html) です。これは [`React.PureComponent`](#reactpurecomponent) に似ていますが、クラスではなく関数コンポーネント用です。
 
-もしある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップすることができます。つまり、Reactはコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
+もしある関数コンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
 
 デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定できます。
 
@@ -304,13 +304,13 @@ render() {
 * [Forwarding refs to DOM components](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)
 * [Forwarding refs in higher-order-components](/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components)
 
-`React.forwardRef` はレンダー関数を引数として受け入れます。Reactは props と ref を 2 つの引数として呼び出します。この関数は React ノードを返す必要があります。
+`React.forwardRef` はレンダー関数を引数として受け入れます。React は props と ref を 2 つの引数として呼び出します。この関数は React ノードを返す必要があります。
 
 `embed:reference-react-forward-ref.js`
 
 上の例では、React は `<FancyButton ref={ref}>` 要素に与えた `ref` を `React.forwardRef` の呼び出し内のレンダー関数の 2 番目の引数として渡します。このレンダー関数は `ref` を `<button ref={ref}>` 要素に渡します。
 
-結果として、Reactが `ref` を取り付けた後、`ref.current` は `<button>` の DOM 要素のインスタンスを直接指すようになります。
+結果として、React が `ref` を取り付けた後、`ref.current` は `<button>` の DOM 要素のインスタンスを直接指すようになります。
 
 詳しくは [forwarding refs](/docs/forwarding-refs.html) を参照してください。
 

From 5821616e21f84ca7ea97ce20bc8cd180c7eabdc0 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Wed, 13 Feb 2019 20:23:12 +0900
Subject: [PATCH 25/25] Update content/docs/reference-react.md

Co-Authored-By: lightnet328 <lightnet328@gmail.com>
---
 content/docs/reference-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md
index 0e5bad9bf..f93687a03 100644
--- a/content/docs/reference-react.md
+++ b/content/docs/reference-react.md
@@ -110,7 +110,7 @@ React コンポーネントの `render()` 関数が同じ props と state を与
 
 > 補足
 >
-> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props とstate を持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [イミュータブルなオブジェクト](https://facebook.github.io/immutable-js/) の使用を検討してください。
+> `React.PureComponent` の `shouldComponentUpdate()` は オブジェクトの浅い比較のみを行います。これらに複雑なデータ構造が含まれていると、深い部分のみに差分があるために、本当は差分があるにも関わらず差分がないと見なされる場合があります。単純な props と state を持つ場合にのみ `PureComponent` を継承するか、深いデータ構造が変更されたとわかっているときに [`forceUpdate()`](/docs/react-component.html#forceupdate) を使用してください。あるいは、ネストされたデータ構造の高速な比較を容易にするために [イミュータブルなオブジェクト](https://facebook.github.io/immutable-js/) の使用を検討してください。
 >
 > さらに、`React.PureComponent` の `shouldComponentUpdate()` はサブツリー全体のコンポーネントの props の更新をスキップします。子コンポーネントの全てが「純粋な」コンポーネントであることを確認してください。