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

序章

このチュートリアルでは、 props をコンポーネントに渡して、カスタムコンポーネントを作成します。 小道具は、JSX要素に提供する引数です。 これらは標準のHTMLプロップのように見えますが、事前定義されておらず、数値、文字列、関数配列、さらにはさまざまなJavaScriptデータ型を持つことができます。その他のReactコンポーネント。 カスタムコンポーネントは、小道具を使用してデータを表示したり、データを使用してコンポーネントをインタラクティブにすることができます。 小道具は、さまざまな状況に適応できるコンポーネントを作成するための重要な部分であり、小道具について学ぶことで、固有の状況を処理できるカスタムコンポーネントを開発するためのツールが得られます。

コンポーネントに小道具を追加した後、PropTypesを使用して、コンポーネントが受け取ると予想されるデータのタイプを定義します。 PropTypesは、実行時にデータが予想される型と一致することを確認するための単純な型システムです。 これらは、ドキュメントとエラーチェッカーの両方として機能し、アプリケーションの拡張時にアプリケーションを予測可能に保つのに役立ちます。

チュートリアルの終わりまでに、さまざまなpropsを使用して、動物データの配列を取得し、名前、学名、サイズ、食事などの情報を表示する小さなアプリケーションを構築します。追加情報。

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

前提条件

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