Skip to content

Sync with reactjs.org @ ddbd064d #237

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 37 commits into from
Aug 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
d818c19
fix 'Going Big with React' part 👻 .. (#2192)
3imed-jaberi Aug 7, 2019
ccdcf45
Update Footer link to
Aug 8, 2019
129df30
Profiler API docs (#2176)
Aug 8, 2019
4867765
Update website to v16.9 (#2210)
Aug 8, 2019
8be8bf9
Testing Docs (#2165)
Aug 8, 2019
c2d1794
Capitalization
gaearon Aug 8, 2019
a2a9051
Blog post for 16.9 (#2208)
gaearon Aug 8, 2019
cd27138
mod typo (#2213)
piglovesyou Aug 9, 2019
a7c8782
Update 2019-08-08-react-v16.9.0.md (#2211)
sophiebits Aug 9, 2019
3f6d60a
Update testing-recipes.md (#2212)
wyze Aug 9, 2019
4463b79
typo fix: 'although' (#2216)
mungojam Aug 9, 2019
4559e1c
Type fix 'Diffrent' ➡️ 'Different' (#2215)
Aug 9, 2019
164a82b
Fix a typo (#2214)
stsourlidakis Aug 9, 2019
911f5d1
[easy] copyedit testing-recipes.md (#2220)
Aug 9, 2019
29f7552
Fix typo in React v16.9.0 blog post (#2217)
mariusschulz Aug 9, 2019
53cce1d
Adds a TOC to testing-recipes.md (#2221)
Aug 9, 2019
12a8402
Update testing-recipes.md with English correct. (#2224)
tchaffee Aug 10, 2019
7382e4e
Link FAQ to testing recipes
gaearon Aug 10, 2019
181c499
Add a note about the codemod on the lifecycle warnings post (#2219)
Aug 10, 2019
17f4dee
Update languages.yml
tesseralis Aug 11, 2019
0b92a4d
Add React Conf Iran 2019 (#2228)
iammilaad Aug 12, 2019
a2b1f06
Add Joinville to meetups (#1828)
vitorebatista Aug 12, 2019
efc3958
Added missing function bracket in hooks-effect.md (#2207)
h-dong Aug 12, 2019
b839ec7
Update meetups.md (#2196)
jorgemasta Aug 12, 2019
6be7304
Update article.md (#2195)
httpJunkie Aug 12, 2019
e8ccec4
Update conferences.md
lex111 Aug 12, 2019
40ae16a
Mention Rollup (#2187)
mhienle Aug 12, 2019
975b4d2
Fix typo (#2183)
erwstout Aug 12, 2019
176e85f
Update meetups.md (#2178)
adriancodes Aug 12, 2019
8cd5737
Update componentDidCatch argument name like demo (#2180)
behnammodi Aug 12, 2019
6a1d86c
Links to React Redux hooks api (#2202)
Aug 12, 2019
1fc2859
Fetch latest babel link (#2153)
swarnava Aug 12, 2019
dea7ea1
Add React Knowledgeable (Singapore) to meetups (#2150)
wgao19 Aug 12, 2019
ddbd064
Add React Spring to Animation on Styling FAQ (#2147)
james-innes Aug 12, 2019
f108283
merging all conflicts
reactjs-translation-bot Aug 12, 2019
7e155a1
Resolve conflicts
smikitky Aug 13, 2019
6ff11de
Resolve a conflict
koba04 Aug 15, 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
9 changes: 9 additions & 0 deletions content/blog/2018-03-27-update-on-async-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,15 @@ These lifecycle methods have often been misunderstood and subtly misused; furthe

We maintain over 50,000 React components at Facebook, and we don't plan to rewrite them all immediately. We understand that migrations take time. We will take the gradual migration path along with everyone in the React community.

If you don't have the time to migrate or test these components, we recommend running a ["codemod"](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) script that renames them automatically:

```bash
cd your_project
npx react-codemod rename-unsafe-lifecycles
```

Learn more about this codemod on the [16.9.0 release post.](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#renaming-unsafe-lifecycle-methods)

---

## Migrating from Legacy Lifecycles {#migrating-from-legacy-lifecycles}
Expand Down
5 changes: 5 additions & 0 deletions content/blog/2018-11-27-react-16-roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ author: [gaearon]
---

You might have heard about features like "Hooks", "Suspense", and "Concurrent Rendering" in the previous blog posts and talks. In this post, we'll look at how they fit together and the expected timeline for their availability in a stable release of React.

> An Update from August, 2019
>
> You can find an update to this roadmap in the [React 16.9 release blog post](/blog/2019/08/08/react-v16.9.0.html#an-update-to-the-roadmap).


## tl;dr {#tldr}

Expand Down
4 changes: 2 additions & 2 deletions content/blog/2019-02-06-react-v16.8.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Even while Hooks were in alpha, the React community created many interesting [ex

## Testing Hooks {#testing-hooks}

We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries can also wrap their APIs with it (for example, [`react-testing-library`](https://github.com/kentcdodds/react-testing-library)'s `render` and `fireEvent` utilities do this).
We have added a new API called `ReactTestUtils.act()` in this release. It ensures that the behavior in your tests matches what happens in the browser more closely. We recommend to wrap any code rendering and triggering updates to your components into `act()` calls. Testing libraries can also wrap their APIs with it (for example, [`react-testing-library`](https://testing-library.com/react)'s `render` and `fireEvent` utilities do this).

For example, the counter example from [this page](/docs/hooks-effect.html) can be tested like this:

Expand Down Expand Up @@ -95,7 +95,7 @@ The calls to `act()` will also flush the effects inside of them.

If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.

To reduce the boilerplate, we recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to encourage writing tests that use your components as the end users do.
To reduce the boilerplate, we recommend using [`react-testing-library`](https://testing-library.com/react) which is designed to encourage writing tests that use your components as the end users do.

## Thanks {#thanks}

Expand Down
241 changes: 241 additions & 0 deletions content/blog/2019-08-08-react-v16.9.0.md

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions content/community/articles.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +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/)
5 changes: 5 additions & 0 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {#upcoming-conferences}

### React Conf Iran 2019 {#react-conf-iran-2019}
August 29, 2019. Tehran, Iran.

[Website](https://reactconf.ir/) - [Twitter](https://twitter.com/reactconf_ir) - [Instagram](https://www.instagram.com/reactconf/)

### React Rally 2019 {#react-rally-2019}
August 22-23, 2019. Salt Lake City, USA.

Expand Down
6 changes: 6 additions & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Brazil {#brazil}
* [Belo Horizonte](https://www.meetup.com/reactbh/)
* [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
* [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)

Expand Down Expand Up @@ -107,8 +108,12 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Scotland (UK) {#scotland-uk}
* [Edinburgh](https://www.meetup.com/React-Scotland/)

## Singapore {#singapore}
* [Singapore - React Knowledgeable](https://reactknowledgeable.org/)

## Spain {#spain}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
* [Canarias](https://www.meetup.com/React-Canarias/)

## Sweden {#sweden}
* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
Expand All @@ -130,6 +135,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Leesburg, VA - ReactJS](https://www.meetup.com/React-NOVA/)
* [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
* [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
* [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
Expand Down
2 changes: 0 additions & 2 deletions content/community/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@
title: Model Management
- id: data-fetching
title: Data Fetching
- id: testing
title: Testing
- id: ui-components
title: UI Components
- id: misc
Expand Down
13 changes: 0 additions & 13 deletions content/community/tools-testing.md

This file was deleted.

3 changes: 1 addition & 2 deletions content/community/videos.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,7 @@ Facebook engineers Bill Fisher and Jing Chen talk about Flux and React at Forwar
### Going Big with React {#going-big-with-react}

Areeb Malik investigates how React performs in a high stress situation, and how it helped his team build safe code on a massive scale - (2014 - 0h31m).
[![going big with React](https://i.vimeocdn.com/video/481670116_650.jpg)]

<iframe title="Areeb Malik : Going big with React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/9qcBlN6-qwY" frameborder="0" allowfullscreen></iframe>

### Rethinking Best Practices {#rethinking-best-practices}

Expand Down
6 changes: 4 additions & 2 deletions content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,9 @@ it('can render and update a counter', () => {
});
```

DOM イベントのディスパッチは、DOM コンテナが `document` に追加されたときだけ動作することを忘れないでください。[`react-testing-library`](https://github.com/kentcdodds/react-testing-library) のようなヘルパーを使えばボイラープレートのコードを減らせます。
- DOM イベントのディスパッチは、DOM コンテナが `document` に追加されたときだけ動作することを忘れないでください。[React Testing Library](https://testing-library.com/react) のようなヘルパーを使えばボイラープレートのコードを減らせます。

- [`recipes`](/docs/recipes.html) ドキュメントには `act()` がどのように動作するのかについて例や使用法を交えた詳しい解説があります。

* * *

Expand All @@ -139,7 +141,7 @@ mockComponent(

> 補足:
>
> `mockComponent()` はレガシーな API です。その代わりとして [shallow rendering](/docs/test-utils.html#shallow-rendering) や [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) の使用をおすすめします。
> `mockComponent()` はレガシーな API です。その代わりとして [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) の使用をおすすめします。

* * *

Expand Down
2 changes: 1 addition & 1 deletion content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ permalink: docs/code-splitting.html

## バンドル {#bundling}

多くの React アプリケーションは、[Webpack](https://webpack.js.org/) や [Browserify](http://browserify.org/) などの
多くの React アプリケーションは、[Webpack](https://webpack.js.org/)、[Rollup](https://rollupjs.org/) や [Browserify](http://browserify.org/) などの
ツールを使ってファイルを「バンドル」しています。
バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。
このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。
Expand Down
4 changes: 2 additions & 2 deletions content/docs/error-boundaries.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ class ErrorBoundary extends React.Component {
return { hasError: true };
}

componentDidCatch(error, info) {
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
logErrorToMyService(error, errorInfo);
}

render() {
Expand Down
2 changes: 1 addition & 1 deletion content/docs/faq-styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,4 @@ _注意:この機能は React の一部ではありません。サードパー

### React でアニメーションは使えますか? {#can-i-do-animations-in-react}

React を使ってアニメーションを動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/) や [React Motion](https://github.com/chenglou/react-motion) をご覧ください。
React を使ってアニメーションを動かすことは可能です。例として、[React Transition Group](https://reactcommunity.org/react-transition-group/) や [React Motion](https://github.com/chenglou/react-motion)、[React Spring](https://github.com/react-spring/react-spring) をご覧ください。
1 change: 1 addition & 0 deletions content/docs/hooks-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ function Example() {
useEffect(() => {
document.title = `You clicked ${count} times`;
});
}
```

ここでは `count` という state 変数を宣言し、次に副作用を使うことを React に伝えています。`useEffect` フックには関数を渡しています。この関数こそが副作用関数です。この副作用関数内で `document.title` というブラウザ API を使ってドキュメントのタイトルを設定しています。副作用関数は関数スコープ内にあるため最新の `count` の値は副作用内から参照可能です。React がコンポーネントをレンダーする際に React はこの副作用を覚えておき、DOM を更新した後に呼び出します。これは初回を含む毎回のレンダー時に発生します。
Expand Down
12 changes: 10 additions & 2 deletions content/docs/hooks-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,9 @@ React Native はバージョン 0.59 以降でフックをサポートします

これまでと同様に全く同じ API を使用し続けることができます。それらは動作し続けます。

将来的には、これらのライブラリの新バージョンが、例えば `useRedux()` や `useRouter()` のようなカスタムフックをエクスポートし、ラッパコンポーネントなしで同様の機能が使えるようになるかもしれません。
React Redux は v7.1.0 より [フック API をサポート](https://react-redux.js.org/api/hooks)しており、`useDispatch` や `useSelector` といったフックを提供しています。

React Router のようなライブラリも将来的にフックをサポートするかもしれません。

### フックは静的型付けと組み合わせてうまく動きますか? {#do-hooks-work-with-static-typing}

Expand All @@ -118,6 +120,10 @@ React Native はバージョン 0.59 以降でフックをサポートします

React の観点から見れば、フックを使ったコンポーネントは単なる普通のコンポーネントです。あなたのテストソリューションが React の内部動作に依存しているのでない場合、フックを使ったコンポーネントのテストのやり方は、あなたが普段コンポーネントをテストしているやり方と変わらないはずです。

> 補足
>
> [Testing Recipes](/docs/testing-recipes.html) にコピー・ペーストで使えるたくさんの例が掲載されています。

例えばこのようなカウンタコンポーネントがあるとしましょう:

```js
Expand Down Expand Up @@ -180,7 +186,9 @@ it('can render and update a counter', () => {

カスタムフックをテストしたい場合は、テスト内でコンポーネントを作って中でそのカスタムフックを使うようにしてください。そうすればそのコンポーネントをテストできます。

ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、[`react-testing-library`](https://git.io/react-testing-library) の利用をお勧めします。
ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、[React Testing Library](https://testing-library.com/react) の利用をお勧めします。

詳細については、[Testing Recipes](/docs/testing-recipes.html) をご覧ください。

### [Lint ルール](https://www.npmjs.com/package/eslint-plugin-react-hooks) は具体的に何を強制するのですか? {#what-exactly-do-the-lint-rules-enforce}

Expand Down
10 changes: 10 additions & 0 deletions content/docs/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@
title: パフォーマンス最適化
- id: portals
title: ポータル
- id: profiler
title: Profiler
- id: react-without-es6
title: ES6 なしで React を使う
- id: react-without-jsx
Expand Down Expand Up @@ -123,6 +125,14 @@
title: フック API リファレンス
- id: hooks-faq
title: フックに関するよくある質問
- title: Testing
items:
- id: testing
title: Testing Overview
- id: testing-recipes
title: Testing Recipes
- id: testing-environments
title: Testing Environments
- title: Contributing
items:
- id: how-to-contribute
Expand Down
Loading