Skip to content

Commit f11294b

Browse files
merging all conflicts
2 parents 133bbdf + 9aa2e36 commit f11294b

File tree

13 files changed

+95
-44
lines changed

13 files changed

+95
-44
lines changed

src/content/blog/2023/03/16/introducing-react-dev.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ body {
269269
function Item({ name, isPacked }) {
270270
return (
271271
<li className="item">
272-
{name} {isPacked && ''}
272+
{name} {isPacked && ''}
273273
</li>
274274
);
275275
}
@@ -307,7 +307,7 @@ export default function PackingList() {
307307
function Item({ name, isPacked }) {
308308
return (
309309
<li className="item">
310-
{name} {isPacked ? '' : ''}
310+
{name} {isPacked ? '' : ''}
311311
</li>
312312
);
313313
}

src/content/community/conferences.md

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,6 @@ title: React カンファレンス
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13-
### React Nexus 2024 {/*react-nexus-2024*/}
14-
July 04 & 05, 2024. Bangalore, India (In-person event)
15-
16-
[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
17-
18-
### Chain React 2024 {/*chain-react-2024*/}
19-
July 17-19, 2024. In-person in Portland, OR, USA
20-
21-
[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
22-
23-
### The Geek Conf 2024 {/*the-geek-conf-2024*/}
24-
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
25-
26-
[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
27-
28-
### React Rally 2024 🐙 {/*react-rally-2024*/}
29-
August 12-13, 2024. Park City, UT, USA
30-
31-
[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
32-
3313
### React Universe Conf 2024 {/*react-universe-conf-2024*/}
3414
September 5-6, 2024. Wrocław, Poland.
3515

@@ -55,13 +35,48 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)
5535

5636
[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
5737

38+
### React Advanced London 2024 {/*react-advanced-london-2024*/}
39+
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
40+
41+
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
42+
43+
### React Summit US 2024 {/*react-summit-us-2024*/}
44+
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
45+
46+
[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
47+
5848
### React Africa 2024 {/*react-africa-2024*/}
5949
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
6050

6151
[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
6252

53+
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
54+
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
55+
56+
[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
57+
6358
## Past Conferences {/*past-conferences*/}
6459

60+
### React Rally 2024 🐙 {/*react-rally-2024*/}
61+
August 12-13, 2024. Park City, UT, USA
62+
63+
[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
64+
65+
### The Geek Conf 2024 {/*the-geek-conf-2024*/}
66+
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
67+
68+
[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
69+
70+
### Chain React 2024 {/*chain-react-2024*/}
71+
July 17-19, 2024. In-person in Portland, OR, USA
72+
73+
[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
74+
75+
### React Nexus 2024 {/*react-nexus-2024*/}
76+
July 04 & 05, 2024. Bangalore, India (In-person event)
77+
78+
[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
79+
6580
### React Summit 2024 {/*react-summit-2024*/}
6681
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
6782

src/content/learn/conditional-rendering.md

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,17 @@ export default function PackingList() {
5252
5353
</Sandpack>
5454
55+
<<<<<<< HEAD
5556
複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` が `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
57+
=======
58+
Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
59+
>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
5660
5761
これは [`if`/`else` 文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)を使って、以下のように書くことができます。
5862
5963
```js
6064
if (isPacked) {
61-
return <li className="item">{name} </li>;
65+
return <li className="item">{name} </li>;
6266
}
6367
return <li className="item">{name}</li>;
6468
```
@@ -70,7 +74,7 @@ return <li className="item">{name}</li>;
7074
```js
7175
function Item({ name, isPacked }) {
7276
if (isPacked) {
73-
return <li className="item">{name} </li>;
77+
return <li className="item">{name} </li>;
7478
}
7579
return <li className="item">{name}</li>;
7680
}
@@ -159,7 +163,7 @@ export default function PackingList() {
159163
前の例では、コンポーネントが複数の JSX ツリーのうちどれを返すのか(あるいは何も返さないのか)をコントロールしていました。しかし、レンダー出力に重複があることに気付かれたでしょう。
160164
161165
```js
162-
<li className="item">{name} </li>
166+
<li className="item">{name} </li>
163167
```
164168
165169
これは以下とほとんど同じです。
@@ -172,7 +176,7 @@ export default function PackingList() {
172176
173177
```js
174178
if (isPacked) {
175-
return <li className="item">{name} </li>;
179+
return <li className="item">{name} </li>;
176180
}
177181
return <li className="item">{name}</li>;
178182
```
@@ -187,7 +191,7 @@ JavaScript には、条件式を書くためのコンパクトな構文があり
187191
188192
```js
189193
if (isPacked) {
190-
return <li className="item">{name} </li>;
194+
return <li className="item">{name} </li>;
191195
}
192196
return <li className="item">{name}</li>;
193197
```
@@ -197,12 +201,16 @@ return <li className="item">{name}</li>;
197201
```js
198202
return (
199203
<li className="item">
200-
{isPacked ? name + ' ' : name}
204+
{isPacked ? name + ' ' : name}
201205
</li>
202206
);
203207
```
204208
209+
<<<<<<< HEAD
205210
これは「*`isPacked` が true なら `name + ''` をレンダーし、それ以外 (`:`) の場合は `name` をレンダーする*」というように読んでください。
211+
=======
212+
You can read it as *"if `isPacked` is true, then (`?`) render `name + ''`, otherwise (`:`) render `name`"*.
213+
>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
206214
207215
<DeepDive>
208216
@@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
222230
<li className="item">
223231
{isPacked ? (
224232
<del>
225-
{name + ' '}
233+
{name + ' '}
226234
</del>
227235
) : (
228236
name
@@ -265,7 +273,7 @@ export default function PackingList() {
265273
```js
266274
return (
267275
<li className="item">
268-
{name} {isPacked && ''}
276+
{name} {isPacked && ''}
269277
</li>
270278
);
271279
```
@@ -280,7 +288,7 @@ return (
280288
function Item({ name, isPacked }) {
281289
return (
282290
<li className="item">
283-
{name} {isPacked && ''}
291+
{name} {isPacked && ''}
284292
</li>
285293
);
286294
}
@@ -337,7 +345,7 @@ let itemContent = name;
337345
338346
```js
339347
if (isPacked) {
340-
itemContent = name + " ";
348+
itemContent = name + " ";
341349
}
342350
```
343351
@@ -357,7 +365,7 @@ if (isPacked) {
357365
function Item({ name, isPacked }) {
358366
let itemContent = name;
359367
if (isPacked) {
360-
itemContent = name + " ";
368+
itemContent = name + " ";
361369
}
362370
return (
363371
<li className="item">
@@ -401,7 +409,7 @@ function Item({ name, isPacked }) {
401409
if (isPacked) {
402410
itemContent = (
403411
<del>
404-
{name + " "}
412+
{name + " "}
405413
</del>
406414
);
407415
}
@@ -464,7 +472,7 @@ JavaScript に慣れていない場合、これだけ多様なスタイルがあ
464472
function Item({ name, isPacked }) {
465473
return (
466474
<li className="item">
467-
{name} {isPacked && ''}
475+
{name} {isPacked && ''}
468476
</li>
469477
);
470478
}
@@ -502,7 +510,7 @@ export default function PackingList() {
502510
function Item({ name, isPacked }) {
503511
return (
504512
<li className="item">
505-
{name} {isPacked ? '' : ''}
513+
{name} {isPacked ? '' : ''}
506514
</li>
507515
);
508516
}

src/content/learn/describing-the-ui.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ export function getImageUrl(person, size = 's') {
327327
function Item({ name, isPacked }) {
328328
return (
329329
<li className="item">
330-
{name} {isPacked && ''}
330+
{name} {isPacked && ''}
331331
</li>
332332
);
333333
}

src/content/learn/react-compiler.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ React Comiler は多くの React のルールを静的に検証でき、エラ
121121
コンパイラをインストールする前に、まずコードベースが互換性があるかどうかを確認してください。
122122

123123
<TerminalBlock>
124-
npx react-compiler-healthcheck@latest
124+
npx react-compiler-healthcheck@experimental
125125
</TerminalBlock>
126126

127127
このスクリプトは以下をチェックします。
@@ -143,7 +143,7 @@ Found no usage of incompatible libraries.
143143
React Compiler は eslint プラグインも提供しています。eslint プラグインはコンパイラとは**独立して**使用できるため、コンパイラを使用しなくても eslint プラグインだけを使用できます。
144144

145145
<TerminalBlock>
146-
npm install eslint-plugin-react-compiler
146+
npm install eslint-plugin-react-compiler@experimental
147147
</TerminalBlock>
148148

149149
次に、eslint の設定に以下を追加します。
@@ -203,7 +203,7 @@ export default function App() {
203203
### Babel {/*usage-with-babel*/}
204204

205205
<TerminalBlock>
206-
npm install babel-plugin-react-compiler
206+
npm install babel-plugin-react-compiler@experimental
207207
</TerminalBlock>
208208

209209
コンパイラには、ビルドパイプラインでコンパイラを実行するために使用できる Babel プラグインが含まれています。
@@ -258,7 +258,7 @@ Next.js には React Compiler を有効にするための実験的な設定が
258258
- `babel-plugin-react-compiler` をインストールする
259259

260260
<TerminalBlock>
261-
npm install next@canary babel-plugin-react-compiler
261+
npm install next@canary babel-plugin-react-compiler@experimental
262262
</TerminalBlock>
263263

264264
次に以下のようにして `next.config.js` 内で実験的オプションを設定します。

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -408,9 +408,15 @@ function Game() {
408408
409409
このコードには 2 つの問題があります。
410410
411+
<<<<<<< HEAD
411412
1 つ目の問題は、非常に効率が悪いことです。コンポーネント(およびその子)は、連鎖内の各 `set` コールの間で毎回再レンダーする必要があります。上記の例では、最悪の場合、下位のツリーに 3 回の不要な再レンダー(`setCard` → レンダー → `setGoldCardCount` → レンダー → `setRound` → レンダー → `setIsGameOver` → レンダー)が発生することになります。
412413
413414
たとえこれが遅くなかったとしても、コードが発展するにつれ、書いた「チェイン」が新しい要件に適合しないケースが出てきます。例えばゲームの手順を遡る機能を追加しているとしましょう。このためには、各 state 変数を過去のある時点の値に再セットしていくことになります。しかし過去の値から `card` の state をセットした時点で再びエフェクトの連鎖処理がトリガされ、表示されるデータが変更されてしまいます。このようなコードは、硬直的で壊れやすいものです。
415+
=======
416+
First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
417+
418+
The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
419+
>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
414420
415421
このような場合、レンダー中に計算できるものはそこで行い、イベントハンドラで state の調整を終わらせる方が良いでしょう。
416422

src/content/reference/react-dom/components/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ React は、ブラウザ組み込みのすべての [HTML](https://developer.moz
3434

3535
## リソース・メタデータ関連コンポーネント {/*resource-and-metadata-components*/}
3636

37+
<<<<<<< HEAD
3738
以下のブラウザ組み込みコンポーネントを用いて、外部リソースを読み込んだり、ドキュメントにメタデータを付与したりすることができます。
39+
=======
40+
These built-in browser components let you load external resources or annotate the document with metadata:
41+
>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
3842
3943
* [`<link>`](/reference/react-dom/components/link)
4044
* [`<meta>`](/reference/react-dom/components/meta)

src/content/reference/react/cache.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ async function AnimatedWeatherCard({city}) {
226226
```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
227227
const getUser = cache(async (id) => {
228228
return await db.user.query(id);
229-
})
229+
});
230230

231231
async function Profile({id}) {
232232
const user = await getUser(id);
@@ -327,7 +327,7 @@ React がメモ化された関数に対してキャッシュアクセスを提
327327
'use client';
328328

329329
function WeatherReport({record}) {
330-
const avgTemp = useMemo(() => calculateAvg(record)), record);
330+
const avgTemp = useMemo(() => calculateAvg(record), record);
331331
// ...
332332
}
333333

src/content/reference/react/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,17 @@ React リファレンスは機能別にいくつかのサブセクションに
1414

1515
プログラムから利用する React の機能です。
1616

17+
<<<<<<< HEAD
1718
* [フック](/reference/react/hooks) - コンポーネント内から使用する様々な React の機能
1819
* [コンポーネント](/reference/react/components) - JSX 内で用いる組み込みコンポーネント
1920
* [API](/reference/react/apis) - コンポーネントの定義に用いる API
2021
* [ディレクティブ](/reference/rsc/directives) - React Server Components 互換のバンドラに与えるための指示情報
22+
=======
23+
* [Hooks](/reference/react/hooks) - Use different React features from your components.
24+
* [Components](/reference/react/components) - Built-in components that you can use in your JSX.
25+
* [APIs](/reference/react/apis) - APIs that are useful for defining components.
26+
* [Directives](/reference/rsc/directives) - Provide instructions to bundlers compatible with React Server Components.
27+
>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
2128
2229
## React DOM {/*react-dom*/}
2330

src/content/reference/react/lazy.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
7878
<Suspense fallback={<Loading />}>
7979
<h2>Preview</h2>
8080
<MarkdownPreview />
81-
</Suspense>
81+
</Suspense>
8282
```
8383

8484
この例では、`MarkdownPreview` のコードはレンダーしようとするまで読み込まれません。もし `MarkdownPreview` がまだ読み込まれていない場合、その代わりに `Loading` が表示されます。チェックボックスをオンにしてみてください。

0 commit comments

Comments
 (0)