Merge pull request #170 from blkclct/docs/adding-react-components

translated docs/adding react components

Author: BSKY

docs/docs/adding-react-components.md

@@ -1,20 +1,20 @@
 ---
-title: Adding React Components
+title: React コンポーネントを追加する
 ---
 
-This guide covers how to add React components, including those from third-party component libraries, to your Gatsby site.
+このガイドは、あなたの Gatsby サイトにサードパーティコンポーネントライブラリーも含む React コンポーネントの追加方法を解説します。
 
-## React components
+## React コンポーネント
 
-React components are prebuilt elements or groups of elements that can be used to split your user interface (UI) into independent, reusable pieces. There are multiple types of components you can write but this guide covers functional components. For more in-depth information on writing React components, including classes, check out the [React documentation](https://reactjs.org/docs/components-and-props.html).
+React コンポーネントは、ユーザーインターフェース（UI）を独立した再利用可能な部品として分割するために使えるすでに構築された要素、もしくは要素の集合です。React コンポーネントで書くことができるコンポーネントの種類は多くあるのですが、このガイドでは、関数コンポーネントを使用します。クラスコンポーネントを含む React コンポーネントの書き方について詳細を知りたい場合は、こちらの [React ドキュメント](https://ja.reactjs.org/docs/components-and-props.html)をご覧ください。
 
-Components can also be customized using inputs, better known as "props" (properties). Props can be of any JavaScript data type, such as Boolean, String, or Object.
+コンポーネントは、"props"（プロパティ）として知られる入力を用いてカスタマイズされる機能も提供されています。 Props は、ブーリアンや文字列、オブジェクトのような JavaScript の型になりえます。
 
-For example, you could use a component for Buttons on your site. This would enable them to be used multiple times across pages with different labels or actions each time.
+例えば、あなたのサイト上のボタンに対してコンポーネントを使えます。これで、毎回異なるラベルやアクションを持つページを越えて、複数回使用できます。
 
-## Importing React components
+## React コンポーネントをインポートする
 
-In Gatsby, when using React components, you can import and use them like you would in a React application. Here's an example of the [Gatsby Link](/docs/gatsby-link/) component in action, which brings with it extra functionality for performance:
+Gatsby で React コンポーネントを使うときは、React アプリケーションと同じようにしてインポートして使用できます。ここでは、動作している [Gatsby Link](/docs/gatsby-link/) を例にします。そして、パフォーマンスのための追加機能をもたらします。
 
 ```jsx
 import React from "react"
@@ -27,68 +27,68 @@ export default () => (
 )
 ```
 
-### Importing third-party components
+### サードパーティコンポーネントをインポートする
 
-Just like React, Gatsby also supports third-party components and libraries. You can install a third-party component or library via your package manager. We tend to favor and use npm and we will reflect this in our examples.
+React と同様にして、Gatsby でもサードパーティコンポーネントとライブラリはサポートしています。あなたは、パッケージマネジャ経由でサードパーティコンポーネントやライブラリをインストールできます。私たちは、npm を好んで使用する傾向にあるので、npm を例にしています。
 
-Here's an example of adding a third-party component to your site.
+ここでは、サイトにサードパーティコンポーネントを追加する一例を挙げています。
 
-First, you have to install the component or library's package via a package manager. It's recommended not to mix package managers, so if you use npm, don't use another and vice versa. If there's a relevant Gatsby plugin, you should install and use that plugin.
+はじめに、パッケージマネジャでコンポーネントやライブラリのパッケージをインストールしなければなりません。パッケージマネジャを組み合わせることはおすすめしません。なので、もしあなたが npm を使用するなら別のものは使用しないことをおすすめします。また逆もまた然りです。もし関連する Gatsby プラグインがある場合は、そのプラグインをインストールして使用する必要があります。
 
-In this example, you'll install both a plugin and the library it depends on:
+この例では、プラグインとプラグインに依存するライブラリーの両方をインストールします。
 
 ```shell
 npm install gatsby-plugin-material-ui @material-ui/core
 ```
 
-After installation, add any necessary plugins to the plugins array in `gatsby-config.js`:
+パッケージのインストールが完了したら、`gatsby-config.js` のプラグイン配列に必要なプラグインを追加します。
 
 ```js:title=gatsby-config.js
 module.exports = {
   plugins: [`gatsby-plugin-material-ui`],
 }
 ```
 
-Import and use the library in your page's source:
+そして、あなたのページのソースコード上でインポートして使用します。
 
 ```jsx:title=index.js
 import React from "react"
 
-// import my fancy third-party component
+// わたしの素敵なサードパーティコンポーネントをインポートする
 import Button from "@material-ui/core/Button"
 
 export default () => (
   <div>
-    <p>This is my super awesome page made with Gatsby!</p>
+    <p>これは、わたしの超すごい Gatsby でできたページです!</p>
 
-    {/* use my fancy third-party component */}
-    <Button variant="contained">Fancy button!</Button>
+    {/* わたしの素敵なサードパーティコンポーネントを使用する */}
+    <Button variant="contained">素敵なボタン!</Button>
   </div>
 )
 ```
 
-## Things to watch out for
+## 気をつけるべきこと
 
-Since Gatsby uses server-side rendering (SSR) to generate your site's pages, the JSX code you write is usually compiled before the browser loads the page. Because of this, certain features are not available at compile time and can cause a build error.
+Gatsby は、サーバサイドレンダリング（SSR）を使用してサイトのページを生成しているため、たいていの場合、ブラウザがページをロードする前にあなたが書いた JSX のコードが、コンパイルされます。このため、ある機能は、コンパイルした時に利用できずビルドエラーとなることがあります。
 
-### Use of browser globals
+### ブラウザグローバルの使用について
 
-Some components or code reference browser globals such as `window`, `document` or `localStorage`. These objects are not available at [build](/docs/glossary#build) time and can result in a webpack error when compiling:
+一部のコンポーネントやコードでは、`window`、`document`、`localStorage` のようなブラウザグローバルを参照することがあります。それらのオブジェクトでは、[ビルド](/docs/glossary#build)時点では利用できず、コンパイル時に webpack エラーが発生することもあります。
 
 ```text
 WebpackError: ReferenceError: window is not defined
 ```
 
-To learn more about solutions for supporting SSR and client-side libraries, check out the related documentation section on [Porting from Create React App](/docs/porting-from-create-react-app-to-gatsby#server-side-rendering-and-browser-apis).
+SSR およびクライアントサイドライブラリをサポートする解決策については、[Create React App から Gatsby への移植](/docs/porting-from-create-react-app-to-gatsby#server-side-rendering-and-browser-apis)に関連するセクションをご覧ください。
 
-#### Fixing third-party modules
+#### サードパーティモジュールを直す
 
-Some packages expect `window` or another browser global to be defined. These packages will have to be patched.
+一部のパッケージは、`window` もしくは、別のブラウザグローバルが定義されることを期待します。それらのパッケージは、パッチを適用する必要があります。
 
-You can learn how to patch these packages on the [Debugging HTML Builds documentation](/docs/debugging-html-builds/#fixing-third-party-modules).
+[HTML ビルドのデバッグ](/docs/debugging-html-builds/#fixing-third-party-modules)でそれらのパッケージにパッチを適用する方法を学べます。
 
-### Components without server-side rendering
+### サーバサイドレンダリングなしのコンポーネント
 
-Server-side rendering means pages and content are built out by the Node.js server and then sent to a browser ready to go. It’s like your pages are constructed before even being sent to the user. Gatsby is server-side rendered at build time, meaning that the code that gets to your browser has already been run to build pages and content, but this doesn’t mean you can’t still have dynamic pages.
+サーバサイドレンダリングは、ページとコンテンツが Node.js サーバーでビルドされ、ブラウザーに送信されることを意味します。ユーザーに送信される前で、ページが構築されるようなものです。Gatsby では、ビルド時にサーバサイドでレンダリングされます。つまり、ブラウザーに到達するコードは、すでにページとコンテンツをビルドするために実行されています。しかし、これはまだ動的なページを保持できないことを意味します。
 
-Some React components don't have server-side rendering support (SSR) out-of-the-box so you might have to add SSR yourself.
+一部の React コンポーネントは、デフォルトでサーバサイドレンダリング（SSR）がサポートされていないため、SSR を自分自身で追加する必要があるかもしれません。