Merge pull request #239 from reactjs/sync-de497e25

Sync with reactjs.org @ de497e2

Author: potato4d

content/blog/2015-09-02-new-react-developer-tools.md

@@ -20,7 +20,7 @@ It contains a handful of new features, including:
 
 ## Installation {#installation}
 
-Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
+Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
 
 If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
 

content/blog/2019-08-15-new-react-devtools.md

@@ -0,0 +1,76 @@
+---
+title: "Introducing the New React DevTools"
+author: [bvaughn]
+---
+We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
+
+## What's changed?
+
+A lot has changed in version 4!
+At a high level, this new version should offer significant performance gains and an improved navigation experience.
+It also offers full support for React Hooks, including inspecting nested objects.
+
+![DevTools version 4 screenshot](../images/blog/devtools-v4-screenshot.png)
+
+[Visit the interactive tutorial](https://react-devtools-tutorial.now.sh/) to try out the new version or [see the changelog](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) for demo videos and more details.
+
+## Which versions of React are supported?
+
+**`react-dom`**
+
+* `0`-`14.x`: Not supported
+* `15.x`: Supported (except for the new component filters feature)
+* `16.x`: Supported
+
+**`react-native`**
+* `0`-`0.61`: Not supported
+* `0.62`: Will be supported (when 0.62 is released)
+
+## How do I get the new DevTools?
+
+React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
+If you have already installed the extension, it should update automatically within the next couple of hours.
+
+If you use the standalone shell (e.g. in React Native or Safari), you can install the new version [from NPM](https://www.npmjs.com/package/react-devtools):
+
+```shell
+npm install -g react-devtools@^4
+```
+
+## Where did all of the DOM elements go?
+
+The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
+Host nodes (e.g. HTML `<div>`, React Native `<View>`) are *hidden by default*, but this filter can be disabled:
+
+![DevTools component filters](../images/blog/devtools-component-filters.gif)
+
+## How do I get the old version back?
+
+If you are working with React Native version 60 (or older) you can install the previous release of DevTools from NPM:
+
+```shell
+npm install --dev react-devtools@^3
+```
+
+For older versions of React DOM (v0.14 or earlier) you will need to build the extension from source:
+
+```shell
+# Checkout the extension source
+git clone https://github.com/facebook/react-devtools
+
+cd react-devtools
+
+# Install dependencies and build the unpacked extension
+yarn install
+yarn build:extension
+
+# Follow the on-screen instructions to complete installation
+```
+
+## Thank you!
+
+We'd like to thank everyone who tested the early release of DevTools version 4.
+Your feedback helped improve this initial release significantly.
+
+We still have many exciting features planned and feedback is always welcome!
+Please feel free to open a [GitHub issue](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools) or tag [@reactjs on Twitter](https://twitter.com/reactjs).

content/community/articles.md

@@ -13,4 +13,4 @@ permalink: community/articles.html
 - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's recommended timeline for learning React and the React ecosystem.
 - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development.
 - [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.
-- [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/)
+- [The Hands-On Guide to Learning React Hooks](https://www.telerik.com/kendo-react-ui/react-hooks-guide/) - Eric Bishard's step-by-step guide to learning React Hooks.

content/community/conferences.md

@@ -82,6 +82,12 @@ May 4-6, 2020. Atlanta, GA, USA.
 
 [Website](https://renderatl.com)
 
+### React Next 2020 {#react-next-2020}
+June 15, 2020. Tel Aviv, Israel.
+
+[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/) 
+
+
 ## Past Conferences {#past-conferences}
 
 ### React.js Conf 2015 {#reactjs-conf-2015}

content/community/meetups.md

@@ -69,6 +69,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## India {#india}
 * [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
+* [Chandigarh](https://www.meetup.com/Chandigarh-React-Developers/)
 * [Chennai](https://www.meetup.com/React-Chennai/)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
 * [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)
@@ -79,6 +80,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Israel {#israel}
 * [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
 
+## Malaysia {#malaysia}
+* [Penang](https://www.facebook.com/groups/reactpenang/)
+
 ## Netherlands {#netherlands}
 * [Amsterdam](https://www.meetup.com/React-Amsterdam/)
 

content/docs/addons-test-utils.md

@@ -124,7 +124,7 @@ it('can render and update a counter', () => {
 
 - DOM イベントのディスパッチは、DOM コンテナが `document` に追加されたときだけ動作することを忘れないでください。[React Testing Library](https://testing-library.com/react) のようなヘルパーを使えばボイラープレートのコードを減らせます。
 
-- [`recipes`](/docs/recipes.html) ドキュメントには `act()` がどのように動作するのかについて例や使用法を交えた詳しい解説があります。
+- [`recipes`](/docs/testing-recipes.html) ドキュメントには `act()` がどのように動作するのかについて例や使用法を交えた詳しい解説があります。
 
 * * *
 

content/docs/hooks-faq.md

@@ -64,13 +64,14 @@ prev: hooks-reference.html
 React バージョン 16.8.0 より、以下においてフックの安定版の実装が含まれています。
 
 * React DOM
+* React Native
 * React DOM Server
 * React Test Renderer
 * React Shallow Renderer
 
 **フックを利用するには、すべての React のパッケージが 16.8.0 以上である必要があります**。例えば React DOM の更新を忘れた場合、フックは動作しません。
 
-React Native はバージョン 0.59 以降でフックをサポートします。
+React Native は[バージョン 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) 以降でフックをサポートします。
 
 ### クラスコンポーネントを全部書き換える必要があるのですか？ {#do-i-need-to-rewrite-all-my-class-components}
 

content/docs/hooks-intro.md

@@ -31,7 +31,7 @@ function Example() {
 
 > 補足
 >
-> React 16.8.0 がフックをサポートする最初のバージョンです。アップグレードの際は、React DOM を含むすべてのパッケージの更新を忘れないようにしてください。React Native は次の安定リリースでフックをサポートします。
+> React 16.8.0 がフックをサポートする最初のバージョンです。アップグレードの際は、React DOM を含むすべてのパッケージの更新を忘れないようにしてください。React Native は [React Native 0.59 リリース](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059)以降でフックをサポートします。
 
 ## ビデオによる紹介 {#video-introduction}
 

content/docs/optimizing-performance.md

@@ -211,24 +211,6 @@ React はレンダーされた UI の内部表現を構築し、維持します
 
 コンポーネントの props や state が変更された場合、React は新しく返された要素と以前にレンダーされたものとを比較することで、実際の DOM の更新が必要かを判断します。それらが等しくない場合、React は DOM を更新します。
 
-以下の React DevTools を使用することで、仮想 DOM のこれらの再レンダーを視覚化できるようになりました。
-
-- [Chrome ブラウザ拡張](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-- [Firefox ブラウザ拡張](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
-- [スタンドアロン Node パッケージ](https://www.npmjs.com/package/react-devtools)
-
-開発者コンソールの **React** タブで **Highlight Updates** オプションを選択します：
-
-<center><img src="../images/blog/devtools-highlight-updates.png" style="max-width:100%; margin-top:10px;" alt="How to enable highlight updates" /></center>
-
-ページを操作すると、再レンダーされたコンポーネントの周囲に色付きの枠線が一定時間表示されます。これにより、不要な再レンダーを見つけることができます。React DevTools のこの機能の詳細については、[Ben Edelstein](https://blog.logrocket.com/@edelstein) による[ブログ投稿](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833)から学ぶことができます。
-
-以下の例を考えてみましょう。
-
-<center><img src="../images/blog/highlight-updates-example.gif" style="max-width:100%; margin-top:20px;" alt="React DevTools Highlight Updates example" /></center>
-
-2 つ目の TODO 項目を入力しているとき、1 つ目の TODO 項目もキーストロークの度に画面上で点滅することに注意してください。これは、入力によって React が一緒に再レンダーしていることを意味します。これは「無駄な」レンダーと呼ばれることがあります。最初の TODO 項目の内容は変更されていないので、再レンダーの必要がないことを我々は知っていますが、React はそれを知りません。
-
 React は変更された DOM ノードだけを更新するとはいえ、再レンダーには時間がかかります。多少の時間がかかっても多くの場合は問題にはなりませんが、遅延が目立つ場合、再レンダープロセスが開始される前にトリガーされるライフサイクル関数 `shouldComponentUpdate` をオーバーライド定義することで、スピードを抜本的に向上できます。この関数のデフォルトの実装は `true` を返し、React に更新処理をそのまま実行させます：
 
 ```javascript
@@ -399,36 +381,4 @@ function updateColorMap(colormap) {
 
 Create React App を使用しているなら、`Object.assign` およびオブジェクトのスプレッド構文の両方がデフォルトで利用できます。
 
-## 不変（イミュータブル）なデータ構造の使用 {#using-immutable-data-structures}
-
-[Immutable.js](https://github.com/facebook/immutable-js) はこの問題を解決する別の方法であり、構造の共有を元にした、不変で永続的なデータのコレクションを提供します。
-
-* *不変性*: 一度作成されたら、データのコレクションはその後で変更されることはない。
-* *永続性*: 既存のコレクションから、あるいはそれに set などの変更操作を行うことで新しいデータのコレクションを作成することができる。元のコレクションは新しいデータのコレクションが作成された後も有効である。
-* *構造の共有*: 新しいデータのコレクションは、元のコレクションが含む同じ構造を可能な限り共有して作られるので、データのコピー量が減りパフォーマンスが向上する。
-
-不変性により、変化を検出するためのコストが下がります。変化したデータは常に新しいオブジェクトになるので、オブジェクトの参照が違うかをどうかをチェックすればよくなるのです。例えば、以下の通常の JavaScript コードにおいて、
-
-```javascript
-const x = { foo: 'bar' };
-const y = x;
-y.foo = 'baz';
-x === y; // true
-```
-
-ここで `y` は編集されたにも関わらず、`x` と同じオブジェクトを参照しているため、上記の比較は `true` を返します。これと似たコードを immutable.js で書くとこうなります：
-
-```javascript
-const SomeRecord = Immutable.Record({ foo: null });
-const x = new SomeRecord({ foo: 'bar' });
-const y = x.set('foo', 'baz');
-const z = x.set('foo', 'bar');
-x === y; // false
-x === z; // true
-```
-
-この場合、`x` を変更すると新しい参照が返されるので、参照の比較 `(x === y)` をするだけで、`y` に保存されている新しい値は `x` に保存されていた値とは違うことが確認できます。
-
-不変データの使用を助けてくる他のライブラリに [Immer](https://github.com/mweststrate/immer) や [immutability-helper](https://github.com/kolodny/immutability-helper)、[seamless-immutable](https://github.com/rtfeldman/seamless-immutable) があります。
-
-不変データ構造はオブジェクトの変化の検出を容易にします。まさにそれが `shouldComponentUpdate` の実装に必要なことのすべてです。これによってパフォーマンスを大幅に向上できる場合があります。
+深くネストされたオブジェクトを扱っている場合、ミューテートを行わない形式で更新することが複雑に感じることがあります。このような問題がある場合は [Immer](https://github.com/mweststrate/immer) や [immutability-helper](https://github.com/kolodny/immutability-helper) を試してみてください。これらのライブラリはミューテートを行わないことによる利点を損なわずに、読みやすいコードを書くのに役立ちます。

content/docs/reference-profiler.md

@@ -44,7 +44,7 @@ render(
     <Profiler id="Main" onRender={callback}>
       <Main {...props} />
     </Profiler>
-    </App>
+  </App>
 );
 ```
 

content/docs/reference-test-renderer.md

@@ -103,7 +103,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
 TestRenderer.create(element, options);
 ```
 
-渡された React 要素から `TestRenderer` インスタンスを作成します。実際の DOM は使用しませんが、コンポーネントを完全な形でメモリにレンダーするので、アサーションを行うことができます。返されたインスタンスは、次のメソッドとプロパティを持ちます。
+渡された React 要素から `TestRenderer` インスタンスを作成します。実際の DOM は使用しませんが、コンポーネントを完全な形でメモリにレンダーするので、アサーションを行うことができます。返り値は [TestRenderer のインスタンス](#testrenderer-instance)となります。
 
 ### `TestRenderer.act()` {#testrendereract}
 

content/docs/static-type-checking.md

@@ -88,21 +88,21 @@ Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を
 yarn を使っている場合：
 
 ```bash
-yarn add --dev babel-preset-flow
+yarn add --dev @babel/preset-flow
 ```
 
 npm を使っている場合：
 
 ```bash
-npm install --save-dev babel-preset-flow
+npm install --save-dev @babel/preset-flow
 ```
 
 そして、`flow` のプリセットを [Babel の設定ファイル](https://babeljs.io/docs/usage/babelrc/) に追加してください。例えば、Babel の設定を `.babelrc` ファイルで行っている場合は以下のようになります。
 
 ```js{3}
 {
   "presets": [
-    "flow",
+    "@babel/preset-flow",
     "react"
   ]
 }

content/images/blog/devtools-component-filters.gif

@@ -270,7 +270,7 @@ class CodeEditor extends Component {
 
   _updateState(code, showJSX = true) {
     try {
-      let newState = {
+      const newState = {
         compiled: compileES5(code),
         error: null,
       };