From 2bfefeb2ba085b7fc7d0640421dd1e4e0c3001d0 Mon Sep 17 00:00:00 2001 From: rewrite0w0 <55968557+rewrite0w0@users.noreply.github.com> Date: Sat, 27 Mar 2021 02:11:51 +0900 Subject: edit react_components (#197) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * edit react_components * Change the highlights of missing translations in React ja documents. & add React ko directory. * done. part react_getting_started(ko) * Correcting a slight typo (react_getting_started(ko)) * remove korean document && modified react_components * Modified according to the Editorial Guideline. * Awkward translation changes. * 細部の修正 Co-authored-by: Masahiro FUJIMOTO --- .../react_components/index.html | 285 +++++++++++---------- 1 file changed, 147 insertions(+), 138 deletions(-) (limited to 'files/ja') diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html index 43eedc76eb..4535ed86af 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html @@ -1,7 +1,16 @@ --- title: React アプリのコンポーネント化 slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components +tags: + - Beginner + - Frameworks + - JavaScript + - Learn + - React + - client-side + - events + - interactivity + - state ---
{{LearnSidebar}}
@@ -12,51 +21,51 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_ - + - +
前提条件：前提条件: -

HTML、CSS、JavaScript のコア言語に精通していること、ターミナル/コマンドラインの知識があること。

+

HTML、CSS、JavaScript のコア言語に精通していること、ターミナル/コマンドラインの知識があること。
目的：目的: Todo リストアプリをコンポーネントに分割するための賢明な方法を示すこと。
-

最初のコンポーネントの定義

+

最初のコンポーネントの定義

コンポーネントの定義は、ある程度練習をするまでは難しいと思われるかもしれませんが、要点は以下の通りです。

-

2 番目の箇条書きは特に価値があります: 一般的な UI 要素からコンポーネントを作成することで、コードを一箇所で変更することができ、そのコンポーネントが使用される場所のどこでも変更内容を確認することができます。また、すぐにすべてをコンポーネントに分割する必要もありません。2 つ目の箇条書きをヒントに、UI の中で最も再利用され、最も重要な部分である TODO リスト項目からコンポーネントを作成してみましょう。

+

2 番目の箇条書きは特に価値があります: 一般的な UI 要素からコンポーネントを作成することで、コードを一箇所で変更することができ、そのコンポーネントが使用される場所のどこでも変更内容を確認することができます。また、すぐにすべてをコンポーネントに分割する必要もありません。2つ目の箇条書きをヒントに、UI の中で最も再利用され、最も重要な部分である TODO リスト項目からコンポーネントを作成してみましょう。

-

<Todo />の作成

+

<Todo /> の作成

-

コンポーネントを作る前に、そのための新しいファイルを作らなければなりません。実は、コンポーネント用の新しいディレクトリの作成が必要です。次のコマンドは、components ディレクトリを作成し、その中に Todo.js というファイルを作成します。これらを実行する前に、アプリのルートにいることを確認してください！

+

コンポーネントを作る前に、そのための新しいファイルを作らなければなりません。実際は、コンポーネント用の新しいディレクトリーの作成が必要です。次のコマンドは、components ディレクトリーを作成し、その中に Todo.js というファイルを作成します。これらを実行する前に、アプリのルートにいることを確認してください！

-
mkdir src/components
+
mkdir src/components
 touch src/components/Todo.js

 
 
新しい Todo.js ファイルは今は空です。ファイルを開いて最初の行に次を入力してください。

 
-
import React from "react";

+
import React from "react";

 
 
今回は Todo というコンポーネントを作る予定なので、以下のように Todo.js にもそのためのコードを追加していきます。このコードでは、関数の定義とエクスポートを一行で定義しています。

 
-
export default function Todo() {
+
export default function Todo() {
   return (
 
   );
 }

 
-
ここまでは問題ありませんが、このコンポーネントは何かを返さなければなりません！src/App.js に戻って、最初の <li> をコピーし、Todo.js に貼り付けて、以下のように読み込みます。

+
ここまでは問題ありませんが、このコンポーネントは何かを返さなければなりません！src/App.js に戻って、最初の <li> をコピーし、Todo.js に貼り付けて、以下のようになります。

 
-
export default function Todo() {
+
export default function Todo() {
   return (
     <li className="todo stack-small">
       <div className="c-cb">
@@ -77,17 +86,17 @@ touch src/components/Todo.js

   );
 }

 
-

-
注意: コンポーネントは常に何かを返さなければなりません。もし今後あなたが何も返さないコンポーネントをレンダリングしようとしたら、React はブラウザにエラーを表示するでしょう。

+

+
注: コンポーネントは常に何かを返さなければなりません。もし今後あなたが何も返さないコンポーネントをレンダリングしようとしたら、React はブラウザーにエラーを表示するでしょう。

 

 
 
これで Todo コンポーネントは完成しました。App.js で、ファイルの先頭付近に次の行を追加して Todo をインポートします。

 
-
import Todo from "./components/Todo";

+
import Todo from "./components/Todo";

 
 
このコンポーネントをインポートすると、App.js の <li> 要素をすべて <Todo /> コンポーネント呼び出しに置き換えることができます。<ul> は以下のようになるはずです。

 
-
<ul
+
<ul
   role="list"
   className="todo-list stack-large stack-exception"
   aria-labelledby="list-heading"
@@ -97,35 +106,35 @@ touch src/components/Todo.js

   <Todo />
 </ul>

 
-
ブラウザに戻ってみると、何か不幸なことに気づくでしょう: あなたのリストは、最初のタスクを3回繰り返すようになりました！

+
ブラウザーに戻ってみると、何か不幸なことに気づくでしょう: あなたのリストは、最初のタスクを3回繰り返すようになりました！

 
-
Our todo list app, with todo components repeating because the label is hardcoded into the component

+
Todo リストアプリの Todo コンポーネントラベルがコンポーネントにハードコードされているため、繰り返し使用されています。

 
-
私たちは食べたいだけではなく、他にもやるべきこと — そう、TODO があります。次に、異なるコンポーネント呼び出しで別々のコンテンツをレンダリングする方法を見てみましょう。

+
私たちがすべきことは、食べることだけではありません。そう、他にもすべきことがあります。— そう、TODO があります。次に、異なるコンポーネント呼び出しで別々のコンテンツをレンダリングする方法を見てみましょう。

 
-
「一意の」 <Todo /> を作成

+
「一意の」 <Todo /> を作成

 
-
コンポーネントが強力なのは、UI の一部を再利用し、その UI のソースを 1 か所で参照できるからです。問題は、通常、各コンポーネントのすべてを再利用するのではなく、ほとんどの部分を再利用しつつ小さな部分を変更したいということです。そこでプロップ( props )の出番です。

+
コンポーネントが強力なのは、UI の一部を再利用し、その UI のソースを 1か所で参照できるからです。問題は、通常、各コンポーネントのすべてを再利用するのではなく、ほとんどの部分を再利用しつつ小さな部分を変更したいということです。そこで props の出番です。

 
-
name に何が入るでしょう？

+
name に何が入るでしょう？

 
 
完了させたいタスクの名前を追跡するために、それぞれの <Todo /> コンポーネントが一意の名前を表示するようにしなければなりません。

 
-
App.jsでは、それぞれの <Todo /> に名前のプロップを与えます。先ほどのタスクの名前を使ってみましょう。

+
App.js では、それぞれの <Todo /> に name の prop を与えます。先ほどのタスクの名前を使ってみましょう。

 
-
<Todo name="Eat" />
+
<Todo name="Eat" />
 <Todo name="Sleep" />
 <Todo name="Repeat" />

 
-
ブラウザを更新すると...以前と全く同じものが表示されます。<Todo /> にプロップを与えましたが、まだ使っていません。Todo.js に戻って解決しましょう。

+
ブラウザーを更新すると...以前と全く同じものが表示されます。<Todo /> に props を与えましたが、まだ使っていません。Todo.js に戻って解決しましょう。

 
 
最初に Todo() 関数の定義を変更して、props をパラメータとして受け取るようにします。props がコンポーネントによって正しく受信されているかどうかを確認したい場合は、先ほどと同様に console.log() で props を取得することができます。

 
-
コンポーネントが props を取得していることを確認したら、Eat を name のプロップで置き換えることができます。覚えておいてください: JSX の式の途中では、中括弧を使って変数の値を注入します。

+
コンポーネントが props を取得していることを確認したら、Eat を name の props で置き換えることができます。覚えておいてください: JSX の式の途中では、中括弧を使って変数の値を注入します。

 
 
これらをまとめると、Todo() 関数は次のようになるはずです。

 
-
export default function Todo(props) {
+
export default function Todo(props) {
   return (
     <li className="todo stack-small">
       <div className="c-cb">
@@ -146,86 +155,86 @@ touch src/components/Todo.js

   );
 }

 
-
これで、ブラウザには3つの一意のタスクが表示されるようになりました。しかし、もう一つの問題が残っています: これらはすべてデフォルトでチェックされています。

+
これで、ブラウザーには 3 つの一意のタスクが表示されるようになりました。しかし、もう一つの問題が残っています: これらはすべてデフォルトでチェックされています。

 
-
Our todo list, with different todo labels now they are passed into the components as props

+
Todo リストアプリには、異なる Todo ラベルが付けられており、それらはコンポーネントに props として渡されます。

 
-
それは completed ですか？

+
それは completed ですか？

 
-
元の静的リストでは、Eat だけがチェックされていました。もう一度言いますが、<Todo />コンポーネントを構成するUIのほとんどを再利用しつつ、一つだけ変更したいのです。これは別のプロップが良い仕事をしてくれます！App.js での各 <Todo /> の呼び出しには、完了したことを示す新しいプロップを与えます。最初の (Eat) は true の値を持ち、残りは false にします。

+
元の静的リストでは、Eat だけがチェックされていました。もう一度言いますが、<Todo /> コンポーネントを構成する UI のほとんどを再利用しつつ、一つだけ変更したいのです。これは別の props が良い仕事をしてくれます！ App.js での各 <Todo /> の呼び出しには、完了したことを示す新しい props を与えます。最初の (Eat) は true の値を持ち、残りは false にします。

 
-
<Todo name="Eat" completed={true} />
+
<Todo name="Eat" completed={true} />
 <Todo name="Sleep" completed={false} />
 <Todo name="Repeat" completed={false} />

 
-
先ほどと同様に、これらのプロップを実際に使用するためには Todo.js に戻る必要があります。<input /> の defaultChecked 属性の値が completed したプロップと同じになるように変更します。これで、Todo コンポーネントの <input /> 要素は次のようになります。

+
先ほどと同様に、これらの props を実際に使用するためには Todo.js に戻る必要があります。<input /> の defaultChecked 属性の値が completed した props と同じになるように変更します。これで、Todo コンポーネントの <input /> 要素は次のようになります。

 
-
<input id="todo-0" type="checkbox" defaultChecked={props.completed} />

+
<input id="todo-0" type="checkbox" defaultChecked={props.completed} />

 
-
そして、ブラウザを更新すると、Eat だけがチェックされていることが表示されるようになるはずです。

+
そして、ブラウザーを更新すると、Eat だけがチェックされていることが表示されるようになるはずです。

 
-
Our todo list app, now with differing checked states - some checkboxes are checked, others not

+
Todo リストアプリで、チェックの状態が異なるようになった。- あるチェックボックスはチェックされ、他のチェックボックスはチェックされない。

 
-
各 <Todo /> コンポーネントのconpleted プロップを変更すると、ブラウザはそれに応じてレンダリングされた同等のチェックボックスをチェックしたり、チェックを外したりします。

+
各 <Todo /> コンポーネントの completed props を変更すると、ブラウザーはそれに応じてレンダリングされた同等のチェックボックスをチェックしたり、チェックを外したりします。

 
-
id をください

+
id をください

 
-
現在、<Todo /> コンポーネントはすべてのタスクに todo-0 という id 属性を与えています。これは悪い HTML です、なぜなら id 属性は一意でなければならないからです (CSS や JavaScript などでドキュメントフラグメントの一意な識別子として使用されます)。つまり、各 Todo に対して一意の値を取る id プロップをコンポーネントに与えるべきです。

+
現在、<Todo /> コンポーネントはすべてのタスクに todo-0 という id 属性を与えています。これは悪い HTML です、なぜなら id 属性 は一意でなければならないからです (CSS や JavaScript などでドキュメントフラグメントの一意な識別子として使用されます)。つまり、各 Todo に対して一意の値を取る  id props をコンポーネントに与えるべきです。

 
 
最初と同じパターンに従うために、<Todo /> コンポーネントの各インスタンスに todo-i の形式で ID を与えてみましょう。i は毎回1つずつ大きくなっていきます。

 
-
<Todo name="Eat" completed={true} id="todo-0" />
+
<Todo name="Eat" completed={true} id="todo-0" />
 <Todo name="Sleep" completed={false} id="todo-1" />
 <Todo name="Repeat" completed={false} id="todo-2" />

 
-
ここで Todo.js に戻り、id プロップを使うようにします。これは <input /> 要素の id 属性の値とラベルの htmlFor 属性の値を置き換える必要があります。

+
ここで Todo.js に戻り、id props を使うようにします。これは <input /> 要素の id 属性の値とラベルの htmlFor 属性の値を置き換える必要があります。

 
-
<div className="c-cb">
+
<div className="c-cb">
   <input id={props.id} type="checkbox" defaultChecked={props.completed} />
   <label className="todo-label" htmlFor={props.id}>
     {props.name}
   </label>
 </div>

 
-
ここまでは順調ですか？

+
ここまでは順調ですか？

 
-
今のところ React をうまく使っていますが、もっとうまくできるかもしれません！今のコードは反復的です。<Todo /> コンポーネントをレンダリングする3つの行はほぼ同じですが、1つだけ違う点があります: それぞれのプロップの値です。

+
今のところ React をうまく使っていますが、もっとうまくできるかもしれません！今のコードは反復的です。<Todo /> コンポーネントをレンダリングする3つの行はほぼ同じですが、1つだけ違う点があります: それぞれの props の値です。

 
 
JavaScript のコアな能力の一つであるイテレーション（反復処理）を使えば、コードをクリーンアップすることができます。イテレーションを使うためには、まず自分のタスクを再考する必要があります。

 
-
データとしてのタスク

+
データとしてのタスク

 
-
それぞれのタスクには現在、3つの情報が含まれています: 名前、チェック済みかどうか、そして一意なIDです。このデータはうまくオブジェクトに変換されます。複数のタスクがあるので、このデータを表現するにはオブジェクトの配列が有効です。

+
それぞれのタスクには現在、3つの情報が含まれています: 名前、チェック済みかどうか、そして一意な ID です。このデータはうまくオブジェクトに変換されます。複数のタスクがあるので、このデータを表現するにはオブジェクトの配列が有効です。

 
-
import の後 ReactDOM.render() より前の行で以下の const を作成してください。

+
src/index.js で、 import の後 ReactDOM.render() より前の行で以下の const を作成してください。

 
-
const DATA = [
+
const DATA = [
   { id: "todo-0", name: "Eat", completed: true },
   { id: "todo-1", name: "Sleep", completed: false },
   { id: "todo-2", name: "Repeat", completed: false }
 ];

 
-
次に、tasks という名前のプロップとして <App /> に DATA を渡します。src/index.js の最終行は以下のようになるはずです。

+
次に、tasks という名前の props として <App /> に DATA を渡します。src/index.js の最終行は以下のようになるはずです。

 
-
ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"));

+
ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"));

 
-
この配列は、App コンポーネントで props.tasks として利用できるようになりました。よかったら console.log() で確認してください。

+
この配列は、App コンポーネントで props.tasks として利用できるようになりました。よかったら console.log() で確認してください。

 
-

-
注意: ALL_CAPS 定数名は JavaScript では特別な意味はありません; 他の開発者に「このデータはここで定義された後は変更されません」と伝えるための慣習です。

+

+
注: すべて大文字の (ALL_CAPS のような) 定数名は JavaScript では特別な意味はありません。他の開発者に「このデータはここで定義された後は変更されません」と伝えるための慣習です。 

 

 
-
イテレーションによるレンダリング

+
イテレーションによるレンダリング

 
-
オブジェクトの配列をレンダリングするには、それぞれのオブジェクトを <Todo /> コンポーネントに変換しなければなりません。JavaScript では、データを別のものに変換するための配列メソッド Array.prototype.map() を提供しています。

+
オブジェクトの配列をレンダリングするには、それぞれのオブジェクトを <Todo /> コンポーネントに変換しなければなりません。JavaScript では、データを別のものに変換するための配列メソッド Array.prototype.map() を提供しています。

 
-
Above the return statement of App(), make a new const called taskList and use map() to transform it. Let's start by turning our tasks array into something simple: the name of each task:

+
App() の return 文の上に、taskList という新しい const を作り、map() を使って変換します。まず、 tasks の配列を、各タスクの名前というシンプルなものに変えてみましょう。

 
-
const taskList = props.tasks.map(task => task.name);

+
const taskList = props.tasks.map(task => task.name);

 
-
Let’s try replacing all the children of the <ul> with taskList:

+
<ul> のすべての子を taskListに置き換えてみましょう。

 
-
<ul
+
<ul
   role="list"
   className="todo-list stack-large stack-exception"
   aria-labelledby="list-heading"
@@ -233,67 +242,67 @@ touch src/components/Todo.js

   {taskList}
 </ul>

 
-
This gets us some of the way towards showing all the components again, but we’ve got more work to do: the browser currently renders each task's name as unstructured text. We’re missing our HTML structure — the <li> and its checkboxes and buttons!

+
これで、すべてのコンポーネントを再表示できるようになりましたが、まだやるべきことがあります。現在、ブラウザーは各タスクの名前を構造化されていないテキストとして表示しています。私たちが HTML の構造を見失っているからです。— <li> とチェックボックス、ボタンのことです。

 
-
Our todo list app with the todo item labels just shown bunched up on one line

+
Todo リストアプリで、Todo アイテムのラベルが1行にまとまって表示されています。

 
-
To fix this, we need to return a <Todo /> component from our map() function — remember that JSX allows us to mix up JavaScript and markup structures! Let's try the following instead of what we have already:

+
この問題を解決するには、map() 関数から <Todo /> コンポーネントを返す必要があります — JSX では、JavaScript とマークアップ構造を混在させることができることを覚えておいてください! 今あるものの代わりに、次のものを試してみましょう。

 
-
 const taskList = props.tasks.map(task => <Todo />);

+
 const taskList = props.tasks.map(task => <Todo />);

 
-
Look again at your app; now our tasks look more like they used to, but they’re missing the names of the tasks themselves.  Remember that each task we map over has the id, name, and checked properties we want to pass into our <Todo /> component. If we put that knowledge together, we get code like this:

+
アプリをもう一度見てみましょう。タスクは以前のように見えますが、タスク自体の名前がありません。私たちがマッピングした各タスクには、id、name、checked のプロパティがあり、<Todo /> コンポーネントに渡したいことを覚えておいてください。これらの知識をまとめると、次のようなコードになります。

 
-
const taskList = props.tasks.map(task => (
+
const taskList = props.tasks.map(task => (
   <Todo id={task.id} name={task.name} completed={task.completed} />
 ));

 
-
Now the app looks like it did before, and our code is less repetitive.

+
今では、アプリは以前のように見え、私たちのコードの繰り返しも少なくなりました。

 
-
Unique keys

+
固有なキー

 
-
Now that React is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly. React tries to do its own guesswork to keep track of things, but we can help it out by passing a key prop to our <Todo /> components. key is a special prop that's managed by React – you cannot use the word key for any other purpose.

+
React は配列からタスクをレンダリングしているので、それらを適切にレンダリングするために、どれがどれなのかを追跡しなければなりません。どれがどれなのかを把握して、適切にレンダリングする必要があります。React は自分自身で推測で物事を把握しようとしますが、それを助けるために key prop を<Todo /> コンポーネントに渡すことで助けてあげることができます。key は React で管理されている特別なpropです。key という単語を他の目的で使用することはできません。

 
-
Because keys should be unique, we're going to re-use the id of each task object as its key. Update your taskList constant like so:

+
key は固有であるべきなので、各タスクオブジェクトの id を key として再利用します。taskList は次のように更新します。

 
-
const taskList = props.tasks.map(task => (
+
const taskList = props.tasks.map(task => (
     <Todo
       id={task.id}
       name={task.name}
       completed={task.completed}
       key={task.id}
-    />
-  )
+   />
+ )
 );

 
-
You should always pass a unique key to anything you render with iteration. Nothing obvious will change in your browser, but if you do not use unique keys, React will log warnings to your console and your app may behave strangely!

+
イテレーションでレンダリングするものには、常に固有な key を渡す必要があります。ブラウザー上では何も明らかな変化はありませんが、もし固有な key を使用していない場合、React はコンソールに警告し、アプリは奇妙な動作をするかもしれません。

 
-
Componentizing the rest of the app

+
アプリの残り部分をコンポーネント化 

 
-
Now that we've got our most important component sorted out, we can turn the rest of our app into components. Remembering that components are either obvious pieces of UI, or reused pieces of UI, or both, we can make two more components:

+
最も重要なコンポーネントを整理したので、アプリの残りの部分をコンポーネント化することができます。アプリの残りの部分をコンポーネント化します。ここでコンポーネントは次のいずれかであることを覚えておいてください。コンポーネントが UI の一部か、再利用された UI の一部、またはその両方であることを覚えておいて、さらに2つのコンポーネントを作ります。

 
 
    
  
  • <Form/>
    • 
  
  • <FilterButton/>
    • 
 

 
-
Since we know we need both, we can batch some of the file creation work together with a terminal command. Run this command in your terminal, taking care that you're in the root directory of your app:

+
両方、必要ですのでファイルをターミナルコマンドで一括して行いましょう。ターミナルで次のコマンドを実行してください。アプリのルートディレクトリーにいることに注意してください。

 
-
touch src/components/Form.js src/components/FilterButton.js

+
touch src/components/Form.js src/components/FilterButton.js

 
-
The <Form />

+
The <Form />

 
-
Open components/Form.js and do the following:

+
components/Form.js を開いて、以下のようにしてください。

 
 
    
- 
  • Import React at the top of the file, like we did in Todo.js.
    • 
- 
  • Make yourself a new Form() component with the same basic structure as Todo(), and export that component.
    • 
- 
  • Copy the <form> tags and everything between them from inside App.js, and paste them inside Form()’s return statement.
    • 
- 
  • Export Form at the end of the file.
    • 
+ 
  • Todo.js で行ったように、ファイルの先頭で React を import します。
    • 
+ 
  • Todo() と同じ基本構造を持つ新しい Form() コンポーネントを作成し、そのコンポーネントを export します。
    • 
+ 
  • App.js の中から <form> タグとその間のものをコピーして、Form() の return 文の中に貼り付けます。
    • 
+ 
  • 最後に Form を export します。
    • 
 

 
-
Your Form.js file should read like this:

+
あなたの Form.js ファイルは次のようになります。

 
-
import React from "react";
+
import React from "react";
 
 function Form(props) {
   return (
@@ -319,39 +328,39 @@ function Form(props) {
 
 export default Form;

 
-
The <FilterButton />

+
The <FilterButton />

 
-
Do the same things you did to create Form.js inside FilterButton.js, but call the component FilterButton() and copy the HTML for the first button inside the <div> element with the class of filters from App.js into the return statement.

+
FilterButton.js を Form.js のようにします。でもコンポーネントの FilterButton() を呼び出し、
要素内の最初のボタンの HTML をコピーして App.js の filters の class を return 文に入れます。

 
-
The file should read like this:

+
ファイルの内容は以下のようになります。

 
-
import React from "react";
+
import React from "react";
 
 function FilterButton(props) {
   return (
     <button type="button" className="btn toggle-btn" aria-pressed="true">
-      <span className="visually-hidden">Show </span>
-      <span>all </span>
-      <span className="visually-hidden"> tasks</span>
+    <span className="visually-hidden">Show </span>
+    <span>all </span>
+    <span className="visually-hidden"> tasks</span>
     </button>
   );
 }
-
+  
 export default FilterButton;

 
-

-
Note: You might notice that we are making the same mistake here as we first made for the <Todo /> component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in Back to the filter buttons.

+

+
注: ここでは、最初に <Todo /> コンポーネントで行ったのと同じ間違いをしていることに気づくかもしれません。つまり、それぞれのボタンは同じものになるということです。これでいいのです。このコンポーネントの修正は、後ほどで行います。(Back to the filter buttons)

 

 
-
Importing all our components

+
すべてのコンポーネントの Import

 
-
Let's make use of our new components.

+
新しいコンポーネントを使ってみましょう。

 
-
Add some more import statements to the top of App.js, to import them.

+
さらにいくつかの import 文を App.js の上に追加して、import します。

 
-
Then, update the return statement of App() so that it renders our components. When you’re done, App.js will read like this:

+
次に、App() の return 文を更新して、私たちのコンポーネントをレンダリングするようにします。コンポーネントのレンダリングを行うと、App.js は次のようになります。

 
-
import React from "react";
+
import React from "react";
 import Form from "./components/Form";
 import FilterButton from "./components/FilterButton";
 import Todo from "./components/Todo";
@@ -388,63 +397,63 @@ function App(props) {
 
 export default App;

 
-
With this in place, we’re almost ready to tackle some interactivity in our React app!

+
これで、React アプリでインタラクティブな処理を行う準備がほぼ整いました。

 
-
Summary

+
まとめ

 
-
And that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. Now we'll go on to look at how we handle events in React, and start adding some interactivity.

+
この記事では、アプリをコンポーネントにうまく分割し、それらを効率的にレンダリングする方法について、詳しく説明しました。今回は、アプリをコンポーネントにうまく分割し、それらを効率的にレンダリングする方法について詳しく説明しました。さて、次は React でイベントを処理する方法を見て、いくつかのインタラクティブ機能を追加していきます。

 
 
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

 
 
In this module

 
 
+
\ No newline at end of file
-- 
cgit v1.2.3-54-g00ecf