プロペラ!!!私を信頼してください、あなたはそれを必要とします.

反応コンポーネントを使用して開発者として、私は開発者は通常、単純なアプリケーションのための罰金は、そのコンポーネントにバリデーションを追加するとは思わないことに気づいた.アプリは、単一の目標に向かって作業を開始する複数の開発者を育てるように妥協するためにアプリケーションの安定性のインスタンスがあります.
これが起こる理由の1つは不正確なタイプを使用しているか、予期しないふるまいを引き起こすかもしれない必須の値を送ることでありません.
ここで、Proptypeは絵に入ります.

…プロタイプは何ですか?
簡単に言えば、コンポーネントのプロップオブジェクトへのチェックの追加層です.言い換えれば、我々はすべての必要なデータを正しいタイプの小道具として送信することを確認します.

どうやって設定するのですか?
セットアップはかなりまっすぐです.ここで何をする必要があります.お気に入りのターミナルを開き、次のコマンドを実行します.

cd <project_directory>
npm install prop-types --save

次は何ですか.例?もちろん.
物事をはっきりさせる簡単な例を通してあなたを歩かせてください.リストコンポーネントがあると言いましょう、そして、それはリストを表示すると言います.何の?リリースされる最初の5つのマーベル映画のリストを言いましょう.(残念なDCファン)
このリストには、映画の名前とリリースされた年が含まれます.

const movieList = [
  { id: 1, name: "Iron Man", releaseYear: "2008" },
  { id: 2, name: "The Incredible Hulk", releaseYear: "2008" },
  { id: 3, name: "Iron Man 2", releaseYear: "2010" },
  { id: 4, name: "Thor", releaseYear: "2011" },
  { id: 5, name: "Captain America", releaseYear: "2011" }
];

最初の5つのマーベル映画の名前とリリース年とそれらの値を表示する機能的なコンポーネントを持つオブジェクトの配列を含むコードスニペットです.

import PropTypes from "prop-types";

...

const movieList = [
  { id: 1, name: "Iron Man", releaseYear: "2008" },
  { id: 2, name: "The Incredible Hulk", releaseYear: "2008" },
  { id: 3, name: "Iron Man 2", releaseYear: "2010" },
  { id: 4, name: "Thor", releaseYear: "2011" },
  { id: 5, name: "Captain America", releaseYear: "2011" }
];

function Movie({ name, year = "Not specified" }) {
  return (
    <div>
      <p>
        <b>Name:</b> {name}
      </p>
      <p>
        <b>Year:</b> {year}
      </p>
      <hr />
    </div>
  );
}

Movie.propTypes = {
  name: PropTypes.string.isRequired,
  year: PropTypes.string
};

...

あなたが気づいたならば、私はすべてのCSSを取り除きました.なぜ尋ねるのですか?バットマンだから.
今、あなたは伝統的に書く方法ではなく、最後に1つの小さな追加とかなり似て見えます.映画.Proptypeは、我々がタイプチェックを加えて、我々に必要な小道具を通過させるのを許します.
また、ムービーを追加することができます.デフォルト値を設定するDefaultPropsは、JavaScriptがオブジェクトの破壊中にデフォルト値を追加することができます.
ここでどのようにエラーがコンソールに表示されます.
シナリオ1 :必須プロップが渡されない場合.

シナリオ2 :プロップの型が一致しない場合.

心配しないで、これらのエラーwont生産で表示されます.それは開発中にキャッチするためのものです.

他に何ができますか.
私はあなたに始める方法の基礎を示しました、そして、これで、我々は基本と少しの中間の詰め物をカバーしました.これにより多くあり、あなたはdocumentationを通過することができます