diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 886c77601..af400000f 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: 既存のウェブサイトに React を追加する permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,46 +8,46 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +まずは必要なぶんだけ使ってみましょう。 -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React は段階的に導入することができるように最初からデザインされています。つまり**最小限の部分で React を利用することも、あるいは大規模に React を利用することも可能です**。既存のページにちょっとしたインタラクティブ性をもたせたいだけでも構いません。React コンポーネントを使えばお手の物です。 -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +多くのウェブサイトはシングルページアプリケーションではありませんし、そうする必要もありません。まずは**たった数行のコード**から、あなたのウェブサイトに React を取り入れてみましょう。**ビルドツールは必要ありません**。そこから徐々に React の使用範囲を広げていくのもいいですし、あるいは少しの動的なウィジェットだけにとどめておくのもいいでしょう。 --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [1 分で React を追加する](#add-react-in-one-minute) +- [オプション：React で JSX を使う](#optional-try-react-with-jsx)（バンドルツールは不要です！） -## Add React in One Minute +## 1分で React を導入する -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +このセクションでは、既存の HTML ページに React コンポーネントを導入する方法を説明します。以下の部分では自分のウェブサイトを利用して進めてもいいですし、練習用に空っぽの HTML ファイルを用意するのもいいでしょう。 -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +複雑なツール類や事前にインストールしておかなければいけないものはありません。**インターネットへの接続さえあれば、1 分間でこのセクションを終わらせることができます。** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +オプション：[お手本をダウンロードする (2KB ZIP圧縮)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML +### ステップ 1：HTML に DOM コンテナを追加する -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +まずは編集したい HTML ファイルを開きましょう。React で描画したい箇所を決めて、空っぽの `
` 要素を追加しましょう。例えばこんな感じです。 ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +ここでは `
` 要素にユニークな `id` 属性を指定しています。こうしておけば、後から JavaScript のコードでこの `
` 要素を探し出し、この中に React コンポーネントを表示できます。 ->Tip +>ヒント > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>「コンテナ」としての `
` 要素は `` タグの中であれば**どこにでも**置くことができます。また空っぽの `
` はひとつのページにひとつだけでも、あるいは必要なだけたくさんあっても大丈夫です。`
` 要素は空っぽのことが多いですが、それはたとえ `
` の中に他の要素があったとしても、React が結局その中身を置き換えてしまうからです。 -### Step 2: Add the Script Tags +### ステップ 2：script タグを追加する -Next, add three ` ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +自分のスクリプトを圧縮することがまだできていないのであれば、[例えばこんなやり方があります](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3)。 -## Optional: Try React with JSX +## オプション：React で JSX を使う -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +今までの例では、ブラウザにもともと備わっている機能のみ使ってきました。React コンポーネントを表示するために次のような JavaScript の関数を呼び出していたのはそのためです。 ```js const e = React.createElement; @@ -136,7 +136,7 @@ return e( ); ``` -However, React also offers an option to use [JSX](/docs/introducing-jsx.html) instead: +ただし、React においては [JSX](/docs/introducing-jsx.html) を利用することもできます。 ```js // Display a "Like"