Skip to content

Commit ef5490c

Browse files
merging all conflicts
2 parents 9f58ca2 + 49fd7d5 commit ef5490c

16 files changed

+94
-26
lines changed

content/blog/2017-09-08-dom-attributes-in-react-16.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ React has always provided a JavaScript-centric API to the DOM. Since React compo
3232
<div tabIndex={-1} />
3333
```
3434

35-
This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
35+
This has not changed. However, the way we enforced it in the past forced us to maintain a allowlist of all valid React DOM attributes in the bundle:
3636

3737
```js
3838
// ...
@@ -47,9 +47,9 @@ This had two downsides:
4747

4848
* You could not [pass a custom attribute](https://github.com/facebook/react/issues/140). This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries.
4949

50-
* The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the whitelist helped us reduce the bundle size a little bit.
50+
* The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the allowlist helped us reduce the bundle size a little bit.
5151

52-
With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn't have to include the whole attribute whitelist in the production version.
52+
With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn't have to include the whole attribute allowlist in the production version.
5353

5454
**Note that you should still use the canonical React naming for known attributes:**
5555

content/community/conferences.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,21 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1212

1313
## Upcoming Conferences {#upcoming-conferences}
1414

15-
### React Next 2020 {#react-next-2020}
16-
December 1-2, 2020 - remote event
15+
### React fwdays’21 {#react-fwdays-2021}
16+
March 27, 2021 - remote event
1717

18-
[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/)
18+
[Website](https://fwdays.com/en/event/react-fwdays-2021) - [Twitter](https://twitter.com/fwdays) - [Facebook](https://www.facebook.com/events/1133828147054286) - [LinkedIn](https://www.linkedin.com/events/reactfwdays-21onlineconference6758046347334582273) - [Meetup](https://www.meetup.com/ru-RU/Fwdays/events/275764431/)
1919

2020
### React Summit - Remote Edition 2021 {#react-summit-remote-2021}
2121
April 14-16, 2021, 7am PST / 10am EST / 4pm CEST - remote event
2222

2323
[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
2424

25+
### React Case Study Festival 2021 {#react-case-study-festival-2021}
26+
April 27-28, 2021 - remote event
27+
28+
[Website](https://link.geekle.us/react/offsite) - [LinkedIn](https://www.linkedin.com/events/reactcasestudyfestival6721300943411015680/) - [Facebook](https://www.facebook.com/events/255715435820203)
29+
2530
### render(ATL) 2021 {#render-atlanta-2021}
2631
September 13-15, 2021. Atlanta, GA, USA
2732

@@ -34,6 +39,11 @@ November 12-13, 2021 in Mumbai, India
3439

3540
## Past Conferences {#past-conferences}
3641

42+
### React Next 2020 {#react-next-2020}
43+
December 1-2, 2020 - remote event
44+
45+
[Website](https://react-next.com/) - [Twitter](https://twitter.com/reactnext) - [Facebook](https://www.facebook.com/ReactNext2016/)
46+
3747
### React Conf Brasil 2020 {#react-conf-brasil-2020}
3848
November 21, 2020 - remote event
3949

content/community/meetups.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
5050
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
5151
* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
5252

53+
## Chile {#chile}
54+
* [Santiago](https://www.meetup.com/es-ES/react-santiago/)
55+
5356
## China {#china}
5457
* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)
5558

content/docs/context.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ permalink: docs/context.html
66

77
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。
88

9+
<<<<<<< HEAD
910
典型的な React アプリケーションでは、データは props を通してトップダウン(親から子)で渡されますが、アプリケーション内の多くのコンポーネントから必要とされる特定のタイプのプロパティ(例: ロケール設定、UI テーマ)にとっては面倒です。コンテクストはツリーの各階層で明示的にプロパティを渡すことなく、コンポーネント間でこれらの様な値を共有する方法を提供します。
11+
=======
12+
In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
13+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
1014
1115
- [コンテクストをいつ使用すべきか](#when-to-use-context)
1216
- [コンテクストを使用する前に](#before-you-use-context)
@@ -80,7 +84,11 @@ function Page(props) {
8084

8185
この変更により、一番上の Page コンポーネントだけが、`Link``Avatar` コンポーネントの `user``avatarSize` の使い道について知る必要があります。
8286

87+
<<<<<<< HEAD
8388
この*制御の反転*はアプリケーション内で取り回す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。
89+
=======
90+
This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. Such inversion, however, isn't the right choice in every case; moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want.
91+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
8492
8593
コンポーネントに対して 1 つの子までという制限はありません。複数の子を渡したり、子のために複数の別々の「スロット」を持つことさえできます。[ドキュメントはここにあります。](/docs/composition-vs-inheritance.html#containment)
8694

@@ -118,7 +126,11 @@ const MyContext = React.createContext(defaultValue);
118126

119127
コンテクストオブジェクトを作成します。React がこのコンテクストオブジェクトが登録されているコンポーネントをレンダーする場合、ツリー内の最も近い上位の一致する `Provider` から現在のコンテクストの値を読み取ります。
120128

129+
<<<<<<< HEAD
121130
`defaultValue` 引数は、コンポーネントがツリー内の上位に一致するプロバイダを持っていない場合のみ使用されます。これは、ラップしない単独でのコンポーネントのテストにて役に立ちます。補足: `undefined` をプロバイダの値として渡しても、コンシューマコンポーネントが `defaultValue` を使用することはありません。
131+
=======
132+
The `defaultValue` argument is **only** used when a component does not have a matching Provider above it in the tree. This default value can be helpful for testing components in isolation without wrapping them. Note: passing `undefined` as a Provider value does not cause consuming components to use `defaultValue`.
133+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
122134
123135
### `Context.Provider` {#contextprovider}
124136

@@ -162,7 +174,11 @@ class MyClass extends React.Component {
162174
MyClass.contextType = MyContext;
163175
```
164176

177+
<<<<<<< HEAD
165178
クラスの `contextType` プロパティには [`React.createContext()`](#reactcreatecontext) により作成されたコンテクストオブジェクトを指定することができます。これにより、`this.context` を使って、そのコンテクストタイプの最も近い現在値を利用できます。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。
179+
=======
180+
The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). Using this property lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function.
181+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
166182
167183
> 補足:
168184
>
@@ -188,7 +204,11 @@ class MyClass extends React.Component {
188204
</MyContext.Consumer>
189205
```
190206

207+
<<<<<<< HEAD
191208
コンテクストの変更を購読する React コンポーネントです。[関数コンポーネント](/docs/components-and-props.html#function-and-class-components)内でコンテクストを購読することができます。
209+
=======
210+
A React component that subscribes to context changes. Using this component lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components).
211+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
192212
193213
[function as a child](/docs/render-props.html#using-props-other-than-render) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 `value` は、ツリー内の上位で一番近いこのコンテクスト用のプロバイダの `value` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の `value``createContext()` から渡された `defaultValue` と等しくなります。
194214

content/docs/error-boundaries.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,11 @@ error boundary はコンポーネントに対して JavaScript の `catch {}`
7171

7272
## error boundary を配置すべき場所 {#where-to-place-error-boundaries}
7373

74+
<<<<<<< HEAD
7475
error boundary の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。
76+
=======
77+
The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like how server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
78+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
7579
7680

7781
## エラーがキャッチされなかった場合の新しい動作 {#new-behavior-for-uncaught-errors}
@@ -130,7 +134,11 @@ error boundary はイベントハンドラ内で発生したエラーをキャ
130134

131135
イベントハンドラ内のエラーから回復するのに error boundary は不要です。レンダーメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダー中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。
132136

137+
<<<<<<< HEAD
133138
イベントハンドラ内のエラーをキャッチする必要がある場合は、普通の JavaScript の `try` / `catch` 文を使用してください:
139+
=======
140+
If you need to catch an error inside an event handler, use the regular JavaScript `try` / `catch` statement:
141+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
134142
135143
```js{9-13,17-20}
136144
class MyComponent extends React.Component {

content/docs/higher-order-components.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
1414

1515
コンポーネントが props を UI に変換するのに対して、高階コンポーネントはコンポーネントを別のコンポーネントに変換します。
1616

17+
<<<<<<< HEAD
1718
HOC は Redux における [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) や Relay における [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html) のように、サードパーティ製の React ライブラリでは一般的なものです。
19+
=======
20+
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer).
21+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
1822
1923
このドキュメントでは、なぜ高階コンポーネントが便利で、自身でどのように記述するのかを説明します。
2024

content/docs/hooks-rules.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ prev: hooks-effect.html
1212

1313
### フックを呼び出すのはトップレベルのみ {#only-call-hooks-at-the-top-level}
1414

15+
<<<<<<< HEAD
1516
**フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。**代わりに、あなたの React の関数のトップレベルでのみ呼び出してください。これを守ることで、コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証されます。これが、複数回 `useState``useEffect` が呼び出された場合でも React がフックの状態を正しく保持するための仕組みです(興味がある場合は[ページ下部](#explanation)で詳しく説明しています)。
17+
=======
18+
**Don't call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState` and `useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).)
19+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
1620
1721
### フックを呼び出すのは React の関数内のみ {#only-call-hooks-from-react-functions}
1822

content/docs/how-to-contribute.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,11 @@ React リポジトリをクローンしたあと、`yarn` コマンドで依存
132132

133133
変更を試す一番簡単な方法は `yarn build react/index,react-dom/index --type=UMD` を実行し、`fixtures/packaging/babel-standalone/dev.html` を開くことです。このファイルは `build` フォルダの `react.development.js` を既に使用しているので、変更が反映されます。
134134

135+
<<<<<<< HEAD
135136
あなたの加えた変更を既存の React プロジェクトで試したい場合、`build/dist/react.development.js``build/dist/react-dom.development.js`、もしくは他のビルドされたファイルをあなたのアプリケーションにコピーして安定版の代わりに使用することができます。
137+
=======
138+
If you want to try your changes in your existing React project, you may copy `build/node_modules/react/umd/react.development.js`, `build/node_modules/react-dom/umd/react-dom.development.js`, or any other build products into your app and use them instead of the stable version.
139+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
136140
137141
もし、npm 版の React を使用している場合は `react``react-dom` を依存関係から削除し、`yarn link` を使用してそれらがローカルの `build` フォルダを指すようにしてください。ビルド時には **`--type=UMD` の代わりに `--type=NODE` を渡す必要があることに注意してください**。また `scheduler` パッケージもビルドする必要があります:
138142

content/docs/reference-react.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,11 @@ const MyComponent = React.memo(function MyComponent(props) {
128128

129129
もしあるコンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを `React.memo` でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。
130130

131+
<<<<<<< HEAD
131132
`React.memo` は props の変更のみをチェックします。`React.memo` でラップしているあなたのコンポーネントがその実装内で [`useState`](/docs/hooks-state.html)[`useContext`](/docs/hooks-reference.html#usecontext) フックを使っている場合、state やコンテクストの変化に応じた再レンダーは発生します。
133+
=======
134+
`React.memo` only checks for prop changes. If your function component wrapped in `React.memo` has a [`useState`](/docs/hooks-state.html), [`useReducer`](/docs/hooks-reference.html#usereducer) or [`useContext`](/docs/hooks-reference.html#usecontext) Hook in its implementation, it will still rerender when state or context change.
135+
>>>>>>> 49fd7d5f115378e3663b049f108a2d29b31290c8
132136
133137
デフォルトでは props オブジェクト内の複雑なオブジェクトは浅い比較のみが行われます。比較を制御したい場合は 2 番目の引数でカスタム比較関数を指定できます。
134138

0 commit comments

Comments
 (0)