)}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 2908f9cd0..974e4a825 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -15,8 +15,14 @@ August 17 & 18, 2023. Salt Lake City, UT, USA
[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
+### React Native EU 2023 {/*react-native-eu-2023*/}
+September 7 & 8, 2023. Wrocław, Poland
+
+[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+
+
### React India 2023 {/*react-india-2023*/}
-Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
+October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 382a08695..680fd323b 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -96,12 +96,10 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## India {/*india*/}
* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
-* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
-* [Bangalore](https://www.meetup.com/React-Native-Bangalore-Meetup)
-* [Chandigarh](https://www.meetup.com/Chandigarh-React-Developers/)
+* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
+* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
* [Chennai](https://www.meetup.com/React-Chennai/)
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
-* [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
## Indonesia {/*indonesia*/}
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index d437096e1..439ca680e 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -1,57 +1,57 @@
---
-title: Using TypeScript
+title: TypeScript の使用
re: https://github.com/reactjs/react.dev/issues/5960
---
-TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project.
+TypeScript は JavaScript コードベースに型定義を追加するための人気の方法です。TypeScript は標準で [JSX をサポート](/learn/writing-markup-with-jsx)しており、プロジェクトに [`@types/react`](https://www.npmjs.com/package/@types/react) と [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) を追加することで、React Web に対する完全なサポートを得ることができます。
-* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
-* [Examples of typing with hooks](/learn/typescript#example-hooks)
-* [Common types from `@types/react`](/learn/typescript/#useful-types)
-* [Further learning locations](/learn/typescript/#further-learning)
+* [TypeScript で React コンポーネントを書く方法](/learn/typescript#typescript-with-react-components)
+* [フックの型付けの例](/learn/typescript#example-hooks)
+* [`@types/react` にある一般的な型](/learn/typescript/#useful-types)
+* [さらに学習するためのリソース](/learn/typescript/#further-learning)
-## Installation {/*installation*/}
+## インストール {/*installation*/}
-All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+すべての[本番環境向け React フレームワーク](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks)は TypeScript の使用をサポートしています。フレームワーク個別のガイドに従ってインストールを行ってください。
- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
- [Expo](https://docs.expo.dev/guides/typescript/)
-### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/}
+### 既存の React プロジェクトに TypeScript を追加する {/*adding-typescript-to-an-existing-react-project*/}
-To install the latest version of React's type definitions:
+React の型定義の最新バージョンをインストールするには以下のようにします。
npm install @types/react @types/react-dom
-The following compiler options need to be set in your `tsconfig.json`:
+`tsconfig.json` で以下のコンパイラオプションを設定する必要があります。
-1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
-1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
- If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
+1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) に `dom` が含まれていなければなりません（注：`lib` オプションが指定されない場合、`dom` はデフォルトで含まれます）。
+1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) を有効なオプションのいずれかに設定する必要があります。ほとんどのアプリケーションでは `preserve` で上手くいきます。
+ ライブラリを公開する場合は、選択すべき値について [`jsx` のドキュメンテーション](https://www.typescriptlang.org/tsconfig/#jsx)を参照してください。
-## TypeScript with React Components {/*typescript-with-react-components*/}
+## TypeScript で React コンポーネントを書く方法 {/*typescript-with-react-components*/}
-Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.
+JSX を含むファイルはすべて `.tsx` というファイル拡張子を使用しなければなりません。これは TypeScript 固有の拡張子であり、ファイルに JSX が含まれていることを TypeScript に伝えるためのものです。
-Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors.
+TypeScript で React を書くことは、JavaScript で React を書くことに非常に似ています。コンポーネントを扱う際の主な違いは、コンポーネントの props に対して型が指定できることです。これらの型は、正確性チェックと、エディタ内でのインラインドキュメンテーションの表示に使用できます。
-Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button:
+[クイックスタート](/learn)ガイドの [`MyButton` コンポーネント](/learn#components)を例にすると、ボタンの `title` に型を追加する方法は以下のようになります。
@@ -80,11 +80,11 @@ export default App = AppTSX;
-These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox.
+上記のサンドボックスは TypeScript のコードを扱うことができますが、型チェッカは実行されません。つまりこの TypeScript サンドボックスを書き換えて学習することはできますが、型エラーや警告は得られないということです。型チェックが必要な場合は、[TypeScript Playground](https://www.typescriptlang.org/play) を使用するか、より完全な機能を備えたオンラインサンドボックスを使用してください。
-This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props:
+このインライン形式の構文は、コンポーネントに対して型を指定する最も簡単な方法ですが、記述するフィールドが複数あるときには扱いにくくなることがあります。代わりに、コンポーネントの props を記述するために `interface` または `type` を使用することができます。
@@ -119,32 +119,32 @@ export default App = AppTSX;
-The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases.
+コンポーネントの props を記述する型は、必要に応じて単純なものでも複雑なものでも構いませんが、`type` または `interface` で記述されたオブジェクト型であるべきです。TypeScript でのオブジェクトの記述方法については[オブジェクト型](https://www.typescriptlang.org/docs/handbook/2/objects.html)で学ぶことができます。いくつかの異なる型のうちの 1 つの型になる props を記述するための[ユニオン型](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)や、より高度な使用例である [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) ガイドも参照してください。
-## Example Hooks {/*example-hooks*/}
+## 例：フック {/*example-hooks*/}
-The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types.
+`@types/react` にある型定義には、組み込みのフックに対する型が含まれており、追加のセットアップなしにあなたのコンポーネント内で使用することができます。これらはあなたがコンポーネントに書くコードを考慮できるように作られており、多くの場合は[型の推論](https://www.typescriptlang.org/docs/handbook/type-inference.html)が働くため、理想的にはこまごまと型の指定を行う必要がないようになっています。
-However, we can look at a few examples of how to provide types for hooks.
+とはいえ、フックの型をどのように指定するかについて、ここでいくつかの例を見ておきましょう。
### `useState` {/*typing-usestate*/}
-The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
+[`useState` フック](/reference/react/useState)は、初期 state として渡された値を利用して、その値の型が何であるべきかを決定します。例えば：
```ts
// Infer the type as "boolean"
const [enabled, setEnabled] = useState(false);
```
-Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
+これで `enabled` に `boolean` 型が割り当てられ、また `setEnabled` は引数として `boolean` 値または `boolean` を返す関数を受け取る関数になります。state の型を明示的に指定したい場合は、`useState` の呼び出しに型引数を渡すことで行えます。
```ts
// Explicitly set the type to "boolean"
const [enabled, setEnabled] = useState(false);
```
-This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings:
+上記の例ではあまりこうする意義はありませんが、明示的に型を指定したい一般的なケースとして、ユニオン型を持たせたい場合があります。例えば、以下では `status` はいくつかの異なる文字列のいずれかになります。
```ts
type Status = "idle" | "loading" | "success" | "error";
@@ -152,7 +152,7 @@ type Status = "idle" | "loading" | "success" | "error";
const [status, setStatus] = useState("idle");
```
-Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types:
+または、[state の構造化の原則](/learn/choosing-the-state-structure#principles-for-structuring-state)で推奨されているように、関連する state をオブジェクトとしてグループ化し、オブジェクト型を介して可能性のある状態を記述することができます。
```ts
type RequestState =
@@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState({ status: 'idle'
### `useReducer` {/*typing-usereducer*/}
-The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead:
+[`useReducer` フック](/reference/react/useReducer) は、リデューサ関数と初期 state を受け取る、より複雑なフックです。リデューサ関数の型は初期 state から推論されます。`useReducer` の呼び出しに型引数を含めることで state の型を指定することもできますが、通常は代わりに初期 state 自体に型を指定する方が良いでしょう。
@@ -221,14 +221,14 @@ export default App = AppTSX;
-We are using TypeScript in a few key places:
+ここではいくつかの重要な場所で TypeScript が使用されています。
- - `interface State` describes the shape of the reducer's state.
- - `type CounterAction` describes the different actions which can be dispatched to the reducer.
- - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default.
- - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value.
+ - `interface State` でリデューサの state の型を指定する。
+ - `type CounterAction` でリデューサにディスパッチできる各種のアクションを記述する。
+ - `const initialState: State` で初期 state の型、およびデフォルトで `useReducer` によって使用される型を指定する。
+ - `stateReducer(state: State, action: CounterAction): State` でリデューサ関数の引数と返り値の型を指定する。
-A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`:
+`initialState` に型を指定するよりも明示的な代替手段として、`useReducer` に型引数を渡すこともできます。
```ts
import { stateReducer, State } from './your-reducer-implementation';
@@ -242,9 +242,9 @@ export default function App() {
### `useContext` {/*typing-usecontext*/}
-The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component.
+[`useContext` フック](/reference/react/useContext)は、props を使って多数のコンポーネントを経由させることなく、コンポーネントツリーを通じてデータを下に渡すための技術です。使用するにはプロバイダコンポーネントを作成し、多くの場合は子コンポーネントで値を受け取るためのフックを用います。
-The type of the value provided by the context is inferred from the value passed to the `createContext` call:
+コンテクストが提供する値の型は、`createContext` の呼び出しに渡す値から推論されます。
@@ -284,9 +284,9 @@ export default App = AppTSX;
-This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`.
+意味のあるデフォルト値が存在する場合にはこれでうまくいきます。しかし時にはそうではない場合もあり、デフォルト値として `null` が適切に感じられることもあるでしょう。型システムにあなたのコードを理解させるため、`createContext` 呼び出しで `ContextShape | null` と明示的に指定する必要があります。
-This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present:
+これにより、コンテクストを利用する側で `| null` の可能性を排除する必要が生じます。お勧めの方法は、値が存在することをフックで実行時にチェックし、存在しない場合にエラーをスローするようにすることです。
```js {5, 16-20}
import { createContext, useContext, useState, useMemo } from 'react';
@@ -329,7 +329,7 @@ function MyComponent() {
### `useMemo` {/*typing-usememo*/}
-The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook.
+[`useMemo`](/reference/react/useMemo) フックは、関数呼び出しからの値の作成/再アクセスを行い、2 番目の引数として渡された依存配列が変更されたときにのみ関数を再実行します。フックの呼び出し結果の型は、1 番目の引数として指定した関数の返り値の型から推論されます。フックに型引数を指定することで明示的にすることができます。
```ts
// The type of visibleTodos is inferred from the return value of filterTodos
@@ -339,7 +339,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
### `useCallback` {/*typing-usecallback*/}
-The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook.
+[`useCallback`](/reference/react/useCallback) は、第 2 引数に渡される依存配列が同じである限り、関数への安定した参照を提供するものです。`useMemo` と同様に、関数の型は 1 番目の引数として指定した関数から推論され、フックに型引数を指定することでより明示的にすることができます。
```ts
@@ -348,9 +348,9 @@ const handleClick = useCallback(() => {
}, [todos]);
```
-When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood.
+TypeScript の strict モードで作業している場合、`useCallback` ではコールバックの引数に型を追加する必要があります。これは、コールバックの型が関数から推論されるため、引数がないと型を完全に決定できないからです。
-Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback:
+好みのコードスタイルによっては、React が提供する `*EventHandler` 関数型を使用して、コールバックを定義しながらイベントハンドラの型を提供することができます：
```ts
import { useState, useCallback } from 'react';
@@ -371,13 +371,13 @@ export default function Form() {
}
```
-## Useful Types {/*useful-types*/}
+## 便利な型 {/*useful-types*/}
-There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here.
+`@types/react` パッケージには非常に様々な型が存在しており、React と TypeScript の扱いに慣れたら目を通す価値があります。これらは [DefinitelyTyped 内の React のフォルダ](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)で見ることができます。ここでは一般的な型をいくつか紹介します。
-### DOM Events {/*typing-dom-events*/}
+### DOM イベント {/*typing-dom-events*/}
-When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event.
+React で DOM イベントを扱うとき、イベントの型はイベントハンドラから推論できることもあります。しかし、イベントハンドラに渡すための関数を抽出して別に定義したい場合は、イベントの型を明示的に設定する必要があります。
@@ -407,15 +407,15 @@ export default App = AppTSX;
-There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events).
+React 型定義には多くの種類のイベントが提供されています。完全なリストは[こちら](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373)にあり、[DOM で最も使われるイベント](https://developer.mozilla.org/en-US/docs/Web/Events)に基づいています。
-When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event.
+必要なイベント型を見つけたい場合は、まず使用しているイベントハンドラのホバー情報を見てみると、イベントの型が表示されます。
-If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events.
+このリストに含まれていないイベントを使用する必要がある場合は、すべてのイベントの基本型である `React.SyntheticEvent` 型を使用することができます。
-### Children {/*typing-children*/}
+### 子要素 {/*typing-children*/}
-There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX:
+コンポーネントの子要素を型として記述する一般的な方法は 2 つあります。1 つ目は `React.ReactNode` 型を使用する方法であり、これは JSX で子要素として渡すことが可能なすべての型のユニオン型です。
```ts
interface ModalRendererProps {
@@ -424,7 +424,7 @@ interface ModalRendererProps {
}
```
-This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers:
+これは子要素の非常に包括的な定義です。2 つ目は `React.ReactElement` 型を使用する方法です。こちらは JSX 要素のみを指し、文字列や数値のような JavaScript のプリミティブは含まれません。
```ts
interface ModalRendererProps {
@@ -433,13 +433,13 @@ interface ModalRendererProps {
}
```
-Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
` のみを受け入れるコンポーネントを型システムで記述することはできません。
-You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+[こちらの TypeScript プレイグラウンド](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA)で、`React.ReactNode` と `React.ReactElement` の両方の例を型チェッカ付きで確認することができます。
-### Style Props {/*typing-style-props*/}
+### スタイル props {/*typing-style-props*/}
-When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor.
+React でインラインスタイルを使用する際には、`style` プロパティに渡されるオブジェクト型を記述するために `React.CSSProperties` を使用することができます。この型は可能な CSS プロパティすべてのユニオンであり、有効な CSS プロパティを props として `style` に渡していることを保証し、エディタで自動補完を得るための良い方法です。
```ts
interface MyComponentProps {
@@ -447,17 +447,17 @@ interface MyComponentProps {
}
```
-## Further learning {/*further-learning*/}
+## さらに学ぶ {/*further-learning*/}
-This guide has covered the basics of using TypeScript with React, but there is a lot more to learn.
-Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript.
+このガイドでは React で TypeScript を使用するための基本的な方法を紹介しましたが、まだ学ぶべきことはたくさんあります。
+ドキュメントの個々の API ページには、TypeScript とともに使用する方法についてのより詳細な説明がある場合があります。
-We recommend the following resources:
+以下のリソースがお勧めです。
- - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.
+ - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) は TypeScript の公式ドキュメントであり、ほとんどの主要な言語機能をカバーしています。
- - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth.
+ - [TypeScript のリリースノート](https://devblogs.microsoft.com/typescript/)では、それぞれの新機能が詳細に解説されています。
- - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.
+ - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) はコミュニティによってメンテナンスされている、React で TypeScript を使用するためのチートシートです。多くの有用なエッジケースをカバーしており、このドキュメントよりも広範な解説が得られます。
- - [TypeScript Community Discord](discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
\ No newline at end of file
+ - [TypeScript コミュニティ Discord](https://discord.com/invite/typescript) は、TypeScript と React の問題について質問したり、助けを得たりするための素晴らしい場所です。
\ No newline at end of file
diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md
index 23a9f9618..e47489d4e 100644
--- a/src/content/learn/your-first-component.md
+++ b/src/content/learn/your-first-component.md
@@ -217,7 +217,7 @@ React アプリケーションは "ルート (root)" コンポーネントから
Next.js のようなフレームワークではこれを更に 1 歩押し進めます。空の HTML ファイルから始めて JavaScript で React にページ内容の管理を引き継がせるのではなく、あなたの書いた React コンポーネントから HTML ファイル*自体も*自動生成するのです。これにより、JavaScript コードがロードされる前にコンテンツの一部をアプリが表示できるようになります。
-その一方で、多くのウェブサイトでは React を ["対話機能をちょっと添える"](/learn/add-react-to-a-website) ためにのみ使っています。そのようなサイトはページ全体のためのルートコンポーネントを 1 つだけ持つのではなく、たくさんのルートコンポーネントを持っています。必要しだいで、React を使う量は多くても少なくても構わないのです！
+その一方で、多くのウェブサイトでは React を ["対話機能をちょっと添える"](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) ためにのみ使っています。そのようなサイトはページ全体のためのルートコンポーネントを 1 つだけ持つのではなく、たくさんのルートコンポーネントを持っています。必要しだいで、React を使う量は多くても少なくても構わないのです！
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index d3cc4d5b9..a08cdb921 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -1,10 +1,10 @@
---
-title: "Common components (e.g.
)"
+title: "
などの一般的なコンポーネント"
---
-All built-in browser components, such as [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), support some common props and events.
+[`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) などすべての組み込みブラウザコンポーネントは、いくつかの共通の props とイベントをサポートしています。
@@ -12,262 +12,262 @@ All built-in browser components, such as [`
```
-[See more examples below.](#usage)
-
-#### Props {/*common-props*/}
-
-These special React props are supported for all built-in components:
-
-* `children`: A React node (an element, a string, a number, [a portal,](/reference/react-dom/createPortal) an empty node like `null`, `undefined` and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the `children` prop implicitly by nesting tags like `
`.
-
-* `dangerouslySetInnerHTML`: An object of the form `{ __html: '
some html
' }` with a raw HTML string inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html)
-
-* `ref`: A ref object from [`useRef`](/reference/react/useRef) or [`createRef`](/reference/react/createRef), or a [`ref` callback function,](#ref-callback) or a string for [legacy refs.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Your ref will be filled with the DOM element for this node. [Read more about manipulating the DOM with refs.](#manipulating-a-dom-node-with-a-ref)
-
-* `suppressContentEditableWarning`: A boolean. If `true`, suppresses the warning that React shows for elements that both have `children` and `contentEditable={true}` (which normally do not work together). Use this if you're building a text input library that manages the `contentEditable` content manually.
-
-* `suppressHydrationWarning`: A boolean. If you use [server rendering,](/reference/react-dom/server) normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. [Read about suppressing hydration errors.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)
-
-* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles)
-
-These standard DOM props are also supported for all built-in components:
-
-* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): A string. Specifies a keyboard shortcut for the element. [Not generally recommended.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns)
-* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attributes let you specify the accessibility tree information for this element. See [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
-* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): A string. Specifies whether and how the user input should be capitalized.
-* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): A string. Specifies the element's CSS class name. [Read more about applying CSS styles.](#applying-css-styles)
-* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): A boolean. If `true`, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like [Lexical.](https://lexical.dev/) React warns if you try to pass React children to an element with `contentEditable={true}` because React will not be able to update its content after user edits.
-* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attributes let you attach some string data to the element, for example `data-fruit="banana"`. In React, they are not commonly used because you would usually read data from props or state instead.
-* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Either `'ltr'` or `'rtl'`. Specifies the text direction of the element.
-* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): A boolean. Specifies whether the element is draggable. Part of [HTML Drag and Drop API.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
-* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): A string. Specifies which action to present for the enter key on virtual keyboards.
-* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): A string. For [`