Skip to content

Sync with reactjs.org @ de497e25 #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Sep 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
40a652c
Fix link to recipes (#2235)
vldmrkl Aug 12, 2019
a284b96
Add Penang, Malaysia meetup group (#2239)
jiantongc Aug 14, 2019
f4325d0
Change variable declaration of ‘newState’ in CodeEditor.js (#2241)
Pewww Aug 14, 2019
78270c5
Rephrase confusing documentation about TestRenderer.create return (#2…
TPXP Aug 15, 2019
0006b39
Updated babel installation instructions for Flow (#2248)
enero-o Aug 15, 2019
4c5ced7
added 2 react confernces (#2249)
EventHandlerPro Aug 15, 2019
a21a881
Update reference-profiler.md (#2247)
KirillPd Aug 15, 2019
59aac8b
Update articles.md (#2245)
httpJunkie Aug 15, 2019
fbb03df
Hooks intro: Remove message about React Native support (#2244)
MoOx Aug 15, 2019
e08553d
Remove React Week 2020 from conferences list
sophiebits Aug 15, 2019
af4db1d
Remove "highlight updates" from docs
gaearon Aug 15, 2019
3c7837a
React DevTools v4 blog post (#2199)
Aug 15, 2019
972d835
Hooks intro: Add reference to React Native support in 0.59 (#2250)
MoOx Aug 15, 2019
71ec859
Update hooks-faq.md with info for React Native (#1875)
jeremy-deutsch Aug 15, 2019
180cd22
Update 2019-08-15-new-react-devtools.md
gaearon Aug 16, 2019
68cedb3
Deemphasize Immutable.js in docs (#2253)
gaearon Aug 16, 2019
9de5e8c
Update 2015-09-02-new-react-developer-tools.md (#2252)
msal4 Aug 17, 2019
acbc049
Added Meetup Group (#2254)
sarabs3 Aug 17, 2019
de497e2
Clarify effect of ‘only’ language (#2264)
benfletcher Aug 18, 2019
78bf353
merging all conflicts
reactjs-translation-bot Aug 19, 2019
9df0651
Resolve conflicts
smikitky Aug 20, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/blog/2015-09-02-new-react-developer-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
76 changes: 76 additions & 0 deletions content/blog/2019-08-15-new-react-devtools.md
Original file line number Diff line number Diff line change
@@ -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).
2 changes: 1 addition & 1 deletion content/community/articles.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
6 changes: 6 additions & 0 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)
Expand All @@ -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/)

Expand Down
2 changes: 1 addition & 1 deletion content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -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()` がどのように動作するのかについて例や使用法を交えた詳しい解説があります。

* * *

Expand Down
3 changes: 2 additions & 1 deletion content/docs/hooks-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
2 changes: 1 addition & 1 deletion content/docs/hooks-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
52 changes: 1 addition & 51 deletions content/docs/optimizing-performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) を試してみてください。これらのライブラリはミューテートを行わないことによる利点を損なわずに、読みやすいコードを書くのに役立ちます。
2 changes: 1 addition & 1 deletion content/docs/reference-profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ render(
<Profiler id="Main" onRender={callback}>
<Main {...props} />
</Profiler>
</App>
</App>
);
```

Expand Down
2 changes: 1 addition & 1 deletion content/docs/reference-test-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
6 changes: 3 additions & 3 deletions content/docs/static-type-checking.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/images/blog/devtools-v4-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/CodeEditor/CodeEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ class CodeEditor extends Component {

_updateState(code, showJSX = true) {
try {
let newState = {
const newState = {
compiled: compileES5(code),
error: null,
};
Expand Down