Skip to content

Commit

Permalink
merging all conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
react-translations-bot committed Sep 23, 2024
2 parents 1ee32c8 + c003ac4 commit f44deb2
Show file tree
Hide file tree
Showing 21 changed files with 206 additions and 56 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ jobs:
analyze:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3

- name: Set up node
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: '20.x'

- name: Install dependencies
uses: bahmutov/npm-install@v1.7.10

- name: Restore next build
uses: actions/cache@v2
uses: actions/cache@v3
id: restore-build-cache
env:
cache-name: cache-next-build
Expand All @@ -41,7 +41,7 @@ jobs:
run: npx -p nextjs-bundle-analysis@0.5.0 report

- name: Upload bundle
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
Expand Down Expand Up @@ -73,7 +73,7 @@ jobs:
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare

- name: Upload analysis comment
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
Expand All @@ -82,7 +82,7 @@ jobs:
run: echo ${{ github.event.number }} > ./pr_number

- name: Upload PR number
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: pr_number
path: ./pr_number
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ export function Footer() {
<div
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
dir="ltr">
&copy;{new Date().getFullYear()}
Copyright &copy; Meta Platforms, Inc
</div>
<div
className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2023/03/16/introducing-react-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ body {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -307,7 +307,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : ''}
{name} {isPacked ? '' : ''}
</li>
);
}
Expand Down
55 changes: 35 additions & 20 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,6 @@ title: React カンファレンス

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

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### React Universe Conf 2024 {/*react-universe-conf-2024*/}
September 5-6, 2024. Wrocław, Poland.

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

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

### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)

[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)

### React Africa 2024 {/*react-africa-2024*/}
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)

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

### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)

## Past Conferences {/*past-conferences*/}

### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)

Expand Down
36 changes: 22 additions & 14 deletions src/content/learn/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,17 @@ export default function PackingList() {
</Sandpack>
<<<<<<< HEAD
複数の `Item` コンポーネントのうち一部のみで、props である `isPacked` が `false` ではなく `true` になっていることに注意してください。目的は、`isPacked={true}` の場合にのみチェックマーク (✔) を表示させることです。
=======
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}`.
>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
これは [`if`/`else` 文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)を使って、以下のように書くことができます。
```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -70,7 +74,7 @@ return <li className="item">{name}</li>;
```js
function Item({ name, isPacked }) {
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
}
Expand Down Expand Up @@ -159,7 +163,7 @@ export default function PackingList() {
前の例では、コンポーネントが複数の JSX ツリーのうちどれを返すのか(あるいは何も返さないのか)をコントロールしていました。しかし、レンダー出力に重複があることに気付かれたでしょう。
```js
<li className="item">{name} </li>
<li className="item">{name} </li>
```
これは以下とほとんど同じです。
Expand All @@ -172,7 +176,7 @@ export default function PackingList() {
```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -187,7 +191,7 @@ JavaScript には、条件式を書くためのコンパクトな構文があり
```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -197,12 +201,16 @@ return <li className="item">{name}</li>;
```js
return (
<li className="item">
{isPacked ? name + ' ' : name}
{isPacked ? name + ' ' : name}
</li>
);
```
<<<<<<< HEAD
これは「*`isPacked` が true なら `name + ''` をレンダーし、それ以外 (`:`) の場合は `name` をレンダーする*」というように読んでください。
=======
You can read it as *"if `isPacked` is true, then (`?`) render `name + ''`, otherwise (`:`) render `name`"*.
>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
<DeepDive>
Expand All @@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
<li className="item">
{isPacked ? (
<del>
{name + ' '}
{name + ' '}
</del>
) : (
name
Expand Down Expand Up @@ -265,7 +273,7 @@ export default function PackingList() {
```js
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
```
Expand All @@ -280,7 +288,7 @@ return (
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -337,7 +345,7 @@ let itemContent = name;
```js
if (isPacked) {
itemContent = name + " ";
itemContent = name + " ";
}
```
Expand All @@ -357,7 +365,7 @@ if (isPacked) {
function Item({ name, isPacked }) {
let itemContent = name;
if (isPacked) {
itemContent = name + " ";
itemContent = name + " ";
}
return (
<li className="item">
Expand Down Expand Up @@ -401,7 +409,7 @@ function Item({ name, isPacked }) {
if (isPacked) {
itemContent = (
<del>
{name + " "}
{name + " "}
</del>
);
}
Expand Down Expand Up @@ -464,7 +472,7 @@ JavaScript に慣れていない場合、これだけ多様なスタイルがあ
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -502,7 +510,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : ''}
{name} {isPacked ? '' : ''}
</li>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/describing-the-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ export function getImageUrl(person, size = 's') {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down
8 changes: 4 additions & 4 deletions src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ React Comiler は多くの React のルールを静的に検証でき、エラ
コンパイラをインストールする前に、まずコードベースが互換性があるかどうかを確認してください。

<TerminalBlock>
npx react-compiler-healthcheck@latest
npx react-compiler-healthcheck@experimental
</TerminalBlock>

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

<TerminalBlock>
npm install eslint-plugin-react-compiler
npm install eslint-plugin-react-compiler@experimental
</TerminalBlock>

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

<TerminalBlock>
npm install babel-plugin-react-compiler
npm install babel-plugin-react-compiler@experimental
</TerminalBlock>

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

<TerminalBlock>
npm install next@canary babel-plugin-react-compiler
npm install next@canary babel-plugin-react-compiler@experimental
</TerminalBlock>

次に以下のようにして `next.config.js` 内で実験的オプションを設定します。
Expand Down
6 changes: 6 additions & 0 deletions src/content/learn/you-might-not-need-an-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -408,9 +408,15 @@ function Game() {
このコードには 2 つの問題があります。
<<<<<<< HEAD

Check failure on line 411 in src/content/learn/you-might-not-need-an-effect.md

View workflow job for this annotation

GitHub Actions / Lint on node 20.x and ubuntu-latest

コンフリクトマーカーが残っています。コンフリクトを解消してください。
1 つ目の問題は、非常に効率が悪いことです。コンポーネント(およびその子)は、連鎖内の各 `set` コールの間で毎回再レンダーする必要があります。上記の例では、最悪の場合、下位のツリーに 3 回の不要な再レンダー(`setCard` → レンダー → `setGoldCardCount` → レンダー → `setRound` → レンダー → `setIsGameOver` → レンダー)が発生することになります。
たとえこれが遅くなかったとしても、コードが発展するにつれ、書いた「チェイン」が新しい要件に適合しないケースが出てきます。例えばゲームの手順を遡る機能を追加しているとしましょう。このためには、各 state 変数を過去のある時点の値に再セットしていくことになります。しかし過去の値から `card` の state をセットした時点で再びエフェクトの連鎖処理がトリガされ、表示されるデータが変更されてしまいます。このようなコードは、硬直的で壊れやすいものです。
=======
The 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.
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.
>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
このような場合、レンダー中に計算できるものはそこで行い、イベントハンドラで state の調整を終わらせる方が良いでしょう。
Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/react-dom/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@ React は、ブラウザ組み込みのすべての [HTML](https://developer.moz

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

<<<<<<< HEAD
以下のブラウザ組み込みコンポーネントを用いて、外部リソースを読み込んだり、ドキュメントにメタデータを付与したりすることができます。
=======
These built-in browser components let you load external resources or annotate the document with metadata:
>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
* [`<link>`](/reference/react-dom/components/link)
* [`<meta>`](/reference/react-dom/components/meta)
Expand Down
4 changes: 2 additions & 2 deletions src/content/reference/react/cache.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ async function AnimatedWeatherCard({city}) {
```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
const getUser = cache(async (id) => {
return await db.user.query(id);
})
});

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

function WeatherReport({record}) {
const avgTemp = useMemo(() => calculateAvg(record)), record);
const avgTemp = useMemo(() => calculateAvg(record), record);
// ...
}

Expand Down
Loading

0 comments on commit f44deb2

Please sign in to comment.