Reactの始めましょう：初心者のガイド

開発業界で人気のあるJavaScriptライブラリであるReactは、インタラクティブなユーザーインターフェイスを構築するプロセスを簡素化し、アプリケーションの範囲はWebページ、モバイル端末、デスクトッププラットフォームをカバーしています。 NetflixやAirbnbなどの巨人を含む世界中の多くの企業がReactを使用しています。

このガイドでは、Reactをすばやく開始し、そのコアの概念を説明します。 Create Reactアプリツールを使用して、プロジェクトをすばやく構築し、徐々に単純なReactアプリケーションを構築します。研究の後、あなたは反応の基本を習得し、さらなる研究に備えます。

予防策

学習する前に、HTML、CSS、およびJavaScriptの基本的な知識を持つことが最善です。 node.jsおよびNPMパッケージマネージャーを理解することも、学習に役立ちます。

このチュートリアルでは、マシンにノードとNPMをインストールする必要があります。 node.jsダウンロードページにアクセスして、必要なバージョンをダウンロードできます（npmはノードにバンドルされています）。または、チュートリアルを参照して、バージョンマネージャーを使用してノードをインストールすることもできます。

キーポイント

Reactは、ユーザーインターフェイスの構築に焦点を当てたJavaScriptライブラリであり、NetflixやAirbnbなどの企業で広く使用されています。

• 反応を学び始める前に、HTML、CSS、JavaScript、node.js、およびNPMの基本的な知識が必要です。
• Reactアプリケーションは、クラスベースまたは機能ベースである可能性のある再利用可能なコンポーネントを中心に構築されており、フックの出現によりますます人気が高まっています。
• Reactの仮想DOMは、UIコンポーネント状態の変更に応じてHTML Domを効率的に更新することにより、パフォーマンスを向上させます。
• JSXは、JavaScriptファイルにHTMLのようなコードを作成して開発の経験と読みやすさを高めることができるReactで使用される構文拡張機能です。
• 反応コンポーネントは、インラインスタイルまたは外部CSSを使用して直接スタイリングできます。
反応とは何ですか？

Reactは、UIコンポーネントを構築するためのJavaScriptライブラリです。 AngularやVueなどのより完全なフレームワークとは異なり、View Layersのみを対応するため、ルーティング、州管理などを処理するために他のライブラリが必要です。このガイドでは、Reactのすぐに使える機能に焦点を当てます。

Reactアプリケーションは、相互に対話できる再利用可能なUIコンポーネントを使用して構築されます。 Reactコンポーネントは、クラスベースのコンポーネントまたはいわゆる機能コンポーネントです。クラスベースのコンポーネントはES6クラスを使用して定義され、関数コンポーネントは基本的なJavaScript関数です。これらの関数は通常、矢印関数を使用して定義されますが、関数キーワードも使用できます。クラスベースのコンポーネントは、JSXを返すレンダリング関数（通常のJavaScriptへのReactの拡張を反応要素に作成する）を実装し、関数コンポーネントはJSXを直接返します。 JSXのことを聞いたことがない場合は、心配しないでください。後で詳しく説明します。

反応コンポーネントは、ステートフルコンポーネントとステートレスコンポーネントに分けることもできます。ステートレスコンポーネントの仕事は、親の反応コンポーネントから受信するデータを単に表示することです。イベントや入力を受信した場合、それらのイベントまたは入力を親コンポーネントに渡すだけで処理できます。

一方、ステートフルコンポーネントは、特定のアプリケーション状態を維持する責任があります。これには、外部ソースからデータを取得するか、ユーザーがログインしているかどうかを追跡することが含まれます。ステートフルコンポーネントは、イベントや入力に応じてステータスを更新できます。

経験によれば、ステートレスコンポーネントを可能な限り記述する必要があります。これらのコンポーネントは、アプリケーションやその他のプロジェクトで簡単に再利用できます。

仮想dom

を理解します

コーディングを開始する前に、Reactが仮想DOMを使用してページレンダリングを処理することを知る必要があります。 JQueryに精通している場合は、HTML Domを介して直接Webページを操作できることを知っています。多くの場合、この直接的な相互作用はほとんどまたはまったく問題ありません。ただし、非常にインタラクティブなリアルタイムWebアプリケーションの実行など、場合によっては、パフォーマンスが大きな影響を受ける可能性があります。

この問題を解決するために、現在多くの最新のUIフレームワーク（Reactを含む）で使用されている仮想DOM（実際のDOMのメモリ表現）が発明されました。 HTML DOMとは異なり、仮想DOMは操作が簡単で、ページのパフォーマンスに影響を与えることなく、多数の操作をミリ秒で処理できます。 Virtual DomとHTML Domを定期的に比較します。次に、差が計算され、HTML Domに適用されて、仮想DOMと一致します。このようにして、Reactはアプリケーションが毎秒60フレームで安定した60フレームでレンダリングすることを保証します。つまり、ユーザーはほとんど遅延がありません。

空白のReactプロジェクトを開始

前提条件に基づいて、ノード環境をセットアップし、最新バージョンのNPM（またはオプションヤーン）がインストールされていると思います。

次に、Create Reactアプリを使用して、単一のページReactアプリを作成するための公式ユーティリティスクリプトであるFirst Reactアプリを作成します。

今すぐインストールしましょう：

次に、それを使用して新しいReactアプリを作成します。

<code>npm i -g create-react-app</code>

インターネット接続速度に応じて、Create-React-Appコマンドを実行するのが初めてである場合、完了するまでに時間がかかる場合があります。 Webサーバー、コンパイラ、テストツールなど、便利な開発環境をセットアップするために必要な多くのパッケージがプロセスにインストールされています。

<code>create-react-app message-app</code>

グローバルに多くのパッケージをインストールしたくない場合は、NPXを使用することもできます。これにより、パッケージをインストールせずにダウンロードして実行できます。

これらの2つのコマンドのいずれかを実行すると、次のようなものが出力されます。

プロジェクトのセットアッププロセスが完了したら、次のコマンドを実行してReactアプリケーションを開始します。

<code>npx i -g create-react-app</code>

次の出力が表示されます：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

デフォルトのブラウザは自動的に起動する必要があります。次のような画面が表示されます。

<code>cd message-app
npm start</code>

紹介反応プロジェクトがエラーなしで実行されていることを確認したので、舞台裏で何が起こっているのか見てみましょう。お気に入りのコードエディターを使用して、フォルダーメッセージアプリを開くことができます。 Package.JSONファイルから始めましょう：

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

<code>npm i -g create-react-app</code>

ご覧のとおり、Create Reactアプリは私たちのためのいくつかの依存関係をインストールしました。最初の3つはReactテストライブラリに関連しており、（ご想像のとおり）Reactコードをテストすることができます。次に、ReactとReact-Domがあります。これは、Reactアプリケーションのコアパッケージであり、最終的にReactScriptsは開発環境をセットアップしてサーバーを起動します（見たばかりです）。

その後、繰り返しタスクを自動化するための4つのnpmスクリプトがあります：

• START START DEVELOPMENT SERVER
• ビルドアプリケーションの生産対応バージョンを作成
• テスト上記のテストを実行
• ejectはアプリケーションの開発環境を公開します

最後のコマンドは詳細に説明する価値があります。 Create Reactアプリツールは、実際のコードと開発環境を明確に区別します。 npm run ejectを実行すると、Create Reactアプリは舞台裏で行うことを隠す停止を停止し、すべてをプロジェクトのpackage.jsonファイルにダンプします。これにより、アプリケーションの依存関係をより詳細に制御できますが、ビルドプロジェクトとテストプロジェクトで使用されるすべての複雑なコードを管理する必要があるため、これを行わないことをお勧めします。必要に応じて、カスタマイズ-CRAを使用して、ポップアップせずにビルドプロセスを構成できます。

Create Reactアプリは、ESLINT（ESLINTCONFIGプロパティから見られるように）もサポートし、React-AppESLINTルールを使用して構成されています。

package.jsonファイルのbrowserSlistプロパティを使用すると、アプリケーションがサポートするブラウザのリストを指定できます。この構成は、PostCSSツールやBabelなどのコンバーターで使用されます。

Create Reactアプリの最もクールな機能の1つは、箱からのホットリロードを提供することです。これは、コードに変更すると、ブラウザが自動的に更新されることを意味します。 JavaScriptコードの変更はページをリロードし、CSSの変更はリロードせずにDOMを更新します。

さあ、ctrl cを押して、最初に開発サーバーを停止しましょう。サーバーが停止した後、ServiceWorker.jsおよびsetUptests.jsファイルを除くすべてをSRCフォルダーのファイルを削除します。サービスワーカーの役割を理解することに興味がある場合は、こちらをご覧ください。

その他、すべてのコードをゼロから作成して、SRCフォルダー内のすべてを理解できるようにします。

JSX Syntaxの紹介

Reactドキュメントは、JSXを「JavaScriptの文法的拡張」と定義しているため、Reactコンポーネントを簡単に作成できます。 JSXを使用すると、標準のJavaScript値と同様に、HTML構造または反応要素を渡すことができます。

これは簡単な例です：

<code>create-react-app message-app</code>

この行に注意してください

。これはJSXです。 Webブラウザで実行しようとすると、エラーが発生します。ただし、Reactアプリケーションでは、JSXはコンバーター（Babelなど）によって解釈され、Reactが理解できるJavaScriptコードとしてレンダリングされます。 const message = <h1>I'm a heading</h1>;

注：JSXの詳細については、チュートリアル「JSXの初心者」をご覧ください。

過去には、.JSXファイル拡張子を使用するために使用されるJSXファイルのReact。これで、Create React Appツールは、.jsファイル拡張子を使用してReactファイルを生成します。 .jsxファイル拡張子は引き続きサポートされていますが、Reactメンテナーは.jsを使用して推奨しています。ただし、次の理由で.JSX拡張機能を使用することを好む反対のReact開発者（私自身も含めて）のグループもあります。

vsコードでは、emmetを使用して.jsxファイルを使用して使用できます。ただし、すべての.jsファイルをJavascripretrectとして扱うようにコードを構成して、エメットがこれらのファイルで動作できるようにすることができます。
標準のJavaScriptとReact JavaScriptコードには、糸くずのルールが異なります。
ただし、このチュートリアルでは、Create Reactアプリが提供するものに従い、.JSファイルの最後に固執します。

「こんにちは、ワールド！」

コードを書き始めましょう。新しく作成されたメッセージアプリのSRCフォルダーで、index.jsファイルを作成し、次のコードを追加します。

開発サーバーを起動するには、

または

を再度使用します。ブラウザは次のものを表示する必要があります

<code>npm i -g create-react-app</code>

npm start yarn startこれは最も基本的な「Hello World」Reactの例です。 index.jsファイルはプロジェクトのルートディレクトリであり、反応コンポーネントがレンダリングされます。コードがどのように機能するかを説明させてください：

行1：JSX処理を処理するためにReactパッケージをインポートします。

行2：Reactdomパッケージをインポートして、Root Reactコンポーネントをレンダリングします。

行3：レンダリング関数を呼び出して、
• に渡します
• ：jsx要素
• ：HTMLコンテナ（JSX要素はここでレンダリングされます）。
  • <h1>Hello World</h1>
  • document.getElementById('root')HTMLコンテナは、public/index.htmlファイルにあります。 31行目には、
が表示されます。これはルートドムノードと呼ばれます。これは、そのすべてがReact Virtual Domによって管理されるためです。

JSXはHTMLによく似ていますが、いくつかの重要な違いがあります。たとえば、JavaScriptキーワードであるため、クラス属性を使用することはできません。代わりに、代わりにclassNameを使用します。さらに、OnClickのようなイベントは、JSXでOnClickと綴られています。それでは、Hello Worldコードを変更しましょう：

<code>npm i -g create-react-app</code>

JSXコードを要素と呼ばれる一定の変数に移動しました。また、H1タグをDivタグに置き換えました。 JSXが機能するためには、要素を親タグに包む必要があります。

次の例を見てください：

<code>create-react-app message-app</code>

上記のコードは機能しません。囲まれたタグに隣接するJSX要素を含める必要があることを示す構文エラーが届きます。このように：

<code>npx i -g create-react-app</code>

JSXでJavaScript式を計算する方法は？とてもシンプルです。次のように、巻き毛のブレースを使用するだけです

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

…またはこれが好き：

<code>cd message-app
npm start</code>

コードを更新し、ブラウザが「Hello、Jane Doe」を表示していることを確認します。 {5 2}<p>などの他の例をお試しください。 JSXの基本ができたので、先に進んでReactコンポーネントを作成しましょう。 <code>{5 2}

Reactコンポーネントを宣言します

上記の例は、Reactdom.render（）がどのように機能するかを簡単に示す簡単な方法です。通常、すべてのプロジェクトロジックをReactコンポーネントのカプセル化し、ReactDom.render関数に渡します。

ここでは、React.comPonentのサブクラスであるJavaScriptクラスを定義することにより、Reactコンポーネントを作成します。また、JSX要素を返すレンダリング関数も定義します。他のJSXコードを <div>タグに配置できます。次に、ブラウザの反映された変更を確認するために、次のコードでsrc/index.jsを更新してください：<pre class="brush:php;toolbar:false">&lt;code&gt;.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.&lt;/code&gt;</pre> <p> <code><div>最初に、アプリコンポーネントをインポートします。次に、次のようにjsx形式でアプリをレンダリングします：<code> <app></app>。これは、JSXがそれを反応DOMに押し込むことができる要素にコンパイルできるように必要です。変更を保存した後、ブラウザを確認して、正しいメッセージをレンダリングすることを確認します。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-json&quot;&gt;{ &quot;name&quot;: &quot;message-app&quot;, &quot;version&quot;: &quot;0.1.0&quot;, &quot;private&quot;: true, &quot;dependencies&quot;: { &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;, &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;, &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;, &quot;react&quot;: &quot;^16.13.1&quot;, &quot;react-dom&quot;: &quot;^16.13.1&quot;, &quot;react-scripts&quot;: &quot;3.4.3&quot; }, &quot;scripts&quot;: { &quot;start&quot;: &quot;react-scripts start&quot;, &quot;build&quot;: &quot;react-scripts build&quot;, &quot;test&quot;: &quot;react-scripts test&quot;, &quot;eject&quot;: &quot;react-scripts eject&quot; }, &quot;eslintConfig&quot;: { &quot;extends&quot;: &quot;react-app&quot; }, &quot;browserslist&quot;: { &quot;production&quot;: [ &quot;&gt;0.2%&quot;, &quot;not dead&quot;, &quot;not op_mini all&quot; ], &quot;development&quot;: [ &quot;last 1 chrome version&quot;, &quot;last 1 firefox version&quot;, &quot;last 1 safari version&quot; ] } }&lt;/code&gt;</pre> <p>次に、スタイルを適用する方法を学びます。 <code><app></app>

JSX要素のスタイルを設定します

反応コンポーネントをスタイリングするさまざまな方法があります。このチュートリアルでは、2つの方法を紹介します

jsxインラインスタイル

外部スタイルシート

以下は、JSXインラインスタイルの実装方法の例です。
Reactスタイルは通常のCSSによく似ていますが、いくつかの重要な違いがあります。たとえば、HeaderSyleは文字通りのオブジェクトです。通常のようにセミコロンを使用することはできません。さらに、多くのCSS宣言が変更され、JavaScript構文と互換性があります。たとえば、テキスト装飾の代わりにTextDecorationを使用します。基本的に、キャメルの命名法は、大文字から始める必要があるWebKittransitionなどのベンダープレフィックスを除き、すべてのCSSキーに使用されます。

このようにスタイルを実装することもできます：

<code>npm i -g create-react-app</code>

2番目の方法は、外部StyleSheetを使用することです。デフォルトでは、外部CSSスタイルシートはすでにサポートされています。 SASSなどのプリプロセッサを使用する場合は、ドキュメントを参照して、構成方法を学びます。

<code>create-react-app message-app</code>

保存した後、ブラウザのテキストコンテンツサイズに大きな変化が見られるはずです。次のようにCSSクラスを使用することもできます

<code>npx i -g create-react-app</code>

src/app.jsを次のように更新します：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

HTMLのクラス属性は、予約されたJavaScriptキーワードであるため、使用できません。代わりに、classNameを使用します。これが予想される出力です：

<code>cd message-app
npm start</code>

Reactプロジェクトにスタイルを追加する方法を学んだので、StatelessとStateful Reactコンポーネントを学び続けましょう。

ステートレスおよびステートフルなコンポーネント

Dumbコンポーネントとも呼ばれるStatelessコンポーネントは、情報を表示するコンポーネントにすぎません。操作データのロジックは含まれていません。ユーザーからイベントを受信し、処理のために親コンテナに渡すことができます。

ファイルメッセージview.jsを作成し、次のサンプルコードをコピーします。ここに愚かなコンポーネントの完璧な例があります（技術的には静的コンポーネントのようなものですが）：

次に、次のコードを使用して、基本的なスタイルをsrc/app.cssに追加します。

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

これまでの概念を説明したように、これまでのところ、コードは非常に簡単に理解できるはずです。ブラウザを確認すると、次の結果が得られます。

<code class="language-json">{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}</code>

先ほど、Reactはクラスベースと関数ベースのコンポーネントの両方を提供することを前に述べました。次のように、関数構文を使用してメッセージビューを書き換えることができます：

<code class="language-javascript">import React from 'react';

export default function App() {
  const message = <h1>I'm a heading</h1>;  //JSX FTW!
  return ( message );
}</code>

関数の構文では必要ないため、コンポーネントのインポートを削除したことに注意してください。このスタイルは最初は混乱しているかもしれませんが、すぐに執筆の反応コンポーネントがより速くなることを学ぶでしょう。

さらに、Reactフックの出現により、このスタイルのライティングReactコンポーネントがますます人気が高まっています。

小道具を介してデータを転送します

ステートレスの反応コンポーネントを正常に作成しました。ただし、ステートフルなコンポーネントやコンテナと適切に統合するために追加の作業が必要であるため、完全ではありません。現在、MessageViewは静的データを表示します。入力パラメーターを受け入れることができるように変更する必要があります。いわゆる小道具を使用してこれを達成します - 親コンポーネントから渡すデータ。

<code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));</code>

最初に、このようなmessageViewコンポーネントを変更します：

<code>npm i -g create-react-app</code>

ここで注意すべき主なことは、メッセージ変数をどのように定義するかです。それをthis.props.messageに割り当て、ステートフルな親コンポーネントから渡します。次に、JSXでは、メッセージ変数を参照してページに出力できます。

メッセージビューの親コンポーネントを作成しましょう。 message-list.jsという名前の新しいファイルを作成し、次のコードを追加します。

<code>create-react-app message-app</code>

ここでは、Stateを使用してメッセージを含むオブジェクトを保存します。 Reactの魔法は、状態オブジェクトが変更されると、コンポーネントが再レンダリングされる（したがってUIを更新する）ことです。

次に、JSXでは、状態オブジェクトのメッセージプロパティをmessageViewコンポーネントに渡します。

最後のステップは、Stateless MessageViewコンポーネントの代わりに、アプリコンポーネントを更新して新しいStateful Messagelistコンポーネントをレンダリングすることです。

変更を保存した後、ブラウザを確認して結果を表示します。

<code>npx i -g create-react-app</code>

少し時間をかけて、何が起こっているのかを確実に理解してください。 （ステートフルな）メッセージリストコンポーネントの状態オブジェクトを宣言します。このオブジェクトのメッセージプロパティには、メッセージが含まれています。レンダリング関数では、いわゆる小道具を使用して、そのメッセージを（ステートレス）子供コンポーネントに渡すことができます。

を使用してメッセージにアクセスできます。その後、この値をJSXに渡してページにレンダリングできます。

huh！ this.props.message

プロップチェック

アプリケーションが成長し、データが小道具として前後に渡されると、コンポーネントが予想されるデータ型を受信して​​いることを確認すると便利です。

幸いなことに、PropTypesパッケージを使用してこれを実現できます。実際の例をすばやく確認するには、messageViewコンポーネントを次のように変更します。

メッセージの小道具が欠落している場合、これによりReactアプリケーションがエラーを報告します。コンポーネントによって受信されたオブジェクトがオブジェクトではない場合、エラーも発生します。

このような親コンポーネントの状態を変更することで試すことができます：

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

ブラウザに戻り、コンソールを開きます。コンソールに次の文書が表示されている必要があります。

コンポーネントの再利用

<code>cd message-app
npm start</code>

messageViewインスタンスを使用して複数のメッセージを表示する方法を見てみましょう。これは、コードの再利用を非常に簡単にするため、Reactがフラッシュに始まる場所です（表示されます）。

<code>....

Compiled successfully!

You can now view react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use yarn build.</code>

最初に、state.messageを配列に変更し、メッセージに変更します。次に、JavaScriptのマップ関数を使用して、それぞれがstate.messages配列のメッセージに対応する複数のmessageViewコンポーネントインスタンスを生成します。

また、IDなどのキーと呼ばれる特別な属性で一意の値を入力する必要があります。 Reactは、リスト内のどのアイテムが変更、追加、または削除されたかを追跡するためにこれを必要とします。

次のようにメッセージャリストコードを更新します：

ブラウザをチェックして結果を確認してください：

ご覧のとおり、反応でビルディングブロックを定義して、強力で複雑なUIインターフェイスを作成するのは簡単です。

反応フックを使用するようにリファクタリング

フックはReactの最新バージョンですが、Reactの世界を一掃しています。簡単に言えば、それらは、関数コンポーネントを反応するために状態（およびその他の関数）を追加することを可能にします。

このチュートリアルは、MessageViewコンポーネントを関数コンポーネントにリファクタリングし、Reactフックを使用して状態を管理します。 React V16.8以降を使用する場合にのみ可能であることに注意してください。

<code>npm i -g create-react-app</code>

上記の例では、状態オブジェクトをUseState Reactフックに置き換えました。名前が示すように、これにより、コンポーネントの状態を管理できます。

フックを使用すると、大規模なプロジェクトに取り組んでいるときに、いわゆるプロップ掘削を避けることができます。プロップ掘削では、深くネストされたコンポーネントに到達するために、プロップを複数のコンポーネント（最終的にはそのデータは必要ありません）に渡すことができます。

messageViewコンポーネントを関数コンポーネントに変換することもできます。

<code>create-react-app message-app</code>

コンポーネントでメッセージプロップを受信する方法に注意してください：

<code>npx i -g create-react-app</code>

これは、オブジェクト破壊と呼ばれる手法を使用します。これにより、配列またはオブジェクトから個々のアイテムを抽出し、短縮構文を使用して変数に配置できます。

ここで同じ手法を使用して、メッセージオブジェクトから必要な値を取得し、すべてにメッセージを追加することを避けています。

それだけです！

<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!</code>

この投稿では、Reactフックをさらに導入するつもりはありません。それらが存在し、Reactコミュニティでますます人気が高まっていることをお知らせください。フックについて詳しく知りたい場合は、Getting Guide Guide to React Hooksをお読みください。

demo

これは、使用できるライブデモンストレーションです：

Codepenデモリンク

調査学習

この入門ガイドを完成させました。データ収集、エラー処理、ルーティング、使用フォーム、デバッグなど、私がカバーしていない多くのReact Conceptsがカバーしていません。リストは続きます...

良いニュースは、SitePoint Premiumに多くの素晴らしいReactコンテンツと、ブログに多くの素晴らしい記事があることです。私はあなたがそれらをチェックして、素晴らしいものを作ることをお勧めします。

反応を始めることについてのFAQ

学習反応の前提条件は何ですか？

反応を学び始める前に、ReactはJavaScriptライブラリであるため、堅実なJavaScriptの知識を習得することが非常に重要です。 ES6機能、閉鎖、非同期プログラミング、このキーワードなどの概念に精通している必要があります。 HTMLとCSSの知識も不可欠です。HTMLと同様のJavaScriptの構文拡張機能であるJSXを使用します。また、Node.jsおよびNPM（Node Package Manager）に精通していることも有益です。これは、React開発のパッケージ管理と実行スクリプトに一般的に使用されているためです。

Reactのために開発環境をセットアップする方法は？

Reactの開発環境を設定するには、最初にnode.jsとnpmをインストールする必要があります。インストールが完了したら、Create React Appコマンドラインツールを使用して新しいReactアプリケーションを作成できます。開発環境をセットアップして、最新のJavaScript機能を使用し、優れた開発エクスペリエンスを提供し、生産のアプリケーションを最適化できるようにします。また、Visual StudioコードやアプリケーションをテストするためのWebブラウザーなどのテキストエディターも必要です。

JSXとは何ですか、そしてなぜそれが反応に重要なのですか？

JSXはJavaScript XMLの略です。これは、Facebookが開発したJavaScriptの構文拡張機能であり、HTMLをReactで書くことができます。 JSXは、ReactでHTMLを書き込み、追加しやすくします。それがなければ、JavaScriptコードを読み書きが難しくなります。また、コードをモジュール式で理解し、維持しやすくするのに役立ちます。

反応のコンポーネントは何ですか？

コンポーネントは、任意のReactアプリケーションのビルディングブロックです。 Reactのコンポーネントは、UIの一部を制御する再利用可能なコードです。各コンポーネントは独立しており、複雑なUIを作成するために組み合わせることができます。反応コンポーネントは通常JSXで記述されており、独自の状態と小道具を維持できます。

反応の状態と小道具の違いは何ですか？

反応では、状態と小道具はjavaScriptオブジェクトです。どちらもレンダリング出力に影響を与える情報を保持していますが、コンポーネントに関しては異なって行います。小道具（プロパティの略語）は、親コンポーネントから子供のコンポーネントにデータを渡す方法です。一方、状態はコンポーネント内で管理され、コンポーネント内で変更できます。

Reactはイベントをどのように処理しますか？

反応イベントは、小文字ではなくキャメルケースを使用して命名されています。 JSXを使用する場合、文字列ではなくイベントハンドラーとして関数を渡します。たとえば、HTMLクリックイベントは、JSXのオンクリックとして記述されています。 Reactには合成イベントシステムもあります。つまり、独自のイベントシステムがあり、W3Cイベントシステムと完全に互換性があります。

React Middle Keyの意味は何ですか？

反応のキーは、対応するドライバーレンダリングデータの一意の仮想DOM要素を識別するために使用されます。それらは、既存のDOM要素をループすることにより、レンダリングを最適化するのに役立ちます。キーは一意の数字または文字列である必要があり、重複キーを使用するとアプリケーションを破ることができます。

反応のコンテキストAPIとは何ですか？

コンテキストAPIは、アプリケーションのすべてのレベルで特定の形式のデータを共有できるようにするReactによって提供されるコンポーネント構造です。その目標は、小道具掘削の問題を解決することです。

reduxとは何ですか、そしてそれは反応と何の関係がありますか？

Reduxは、クライアント、サーバー、ネイティブ環境で一貫して実行され、テストが簡単なJavaScriptアプリケーションを作成するのに役立つように設計された予測可能な状態コンテナです。主にReactの州管理ツールとして使用されていますが、他のJavaScriptフレームワークまたはライブラリで使用できます。

反応のフックは何ですか？

Hooksは、React 16.8の新機能であり、クラスを書くことなく状態やその他の反応機能を使用できます。フックは、関数コンポーネントからの反応状態とライフサイクル機能を「フック」できる機能です。クラスでは機能しません - クラスなしでReactを使用することができます。

上記のコンテンツは元のテキストを書き直して洗練し、元の意味を変えずに読みやすさと流encyさを改善するよう努めていることに注意してください。 画像形式は同じままです。 ネットワークの写真に直接アクセスできないため、画像リンクは同じままです。