著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

このチュートリアルでは、 React JavaScriptライブラリを使用して、小道具を使用してラッパーコンポーネントを作成します。 ラッパーコンポーネントは、不明なコンポーネントを囲むコンポーネントであり、子コンポーネントを表示するためのデフォルトの構造を提供します。 このパターンは、モーダル、テンプレートページ、情報タイルなど、デザイン全体で繰り返し使用されるユーザーインターフェイス(UI)要素を作成する場合に役立ちます。

ラッパーコンポーネントを作成するには、最初にRESTおよびSpread演算子を使用して未使用の小道具を収集し、ネストされたコンポーネントに渡す方法を学習します。 次に、組み込みのchildrenコンポーネントを使用して、ネストされたコンポーネントをHTML要素であるかのようにJSXにラップするコンポーネントを作成します。 最後に、コンポーネントを小道具として渡して、コンポーネント内の複数の場所にカスタムJSXを埋め込むことができる柔軟なラッパーを作成します。

チュートリアルでは、動物データのリストをカードの形式で表示するコンポーネントを作成します。 柔軟なラッピングコンポーネントを作成しながら、データを分割してコンポーネントをリファクタリングする方法を学びます。 このチュートリアルを終了すると、高度なプロップテクニックを使用して、アプリケーションの成長と変化に応じて拡張および適応する再利用可能なコンポーネントを作成する、実用的なアプリケーションが完成します。

:最初のステップでは、チュートリアル演習を作成するための空白のプロジェクトを設定します。 すでに作業中のプロジェクトがあり、小道具の操作に直接進みたい場合は、ステップ2から始めてください。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04