コンポーネントとprops

React入門

最近学習を始めたのですが、propsとコンポーネントという概念がReactを触るという点において重要だと感じたのでメモ代わりにまとめました。

コンポーネントとは

・見た目と機能を持つUI
・コンポーネントを組み合わせてページを作る
・大きく2種類のコンポーネントに分かれる
　Class Component　(クラスコンポーネント)
　Functional Component　(関数コンポーネント) //今はこっちで書くことが主流

なぜコンポーネントを使うのか

・再利用するため
　✔同じ記述を何度もする必要がない
・コードの見通しをよくするため
　✔1コンポーネント=1ファイル
　✔べつファイルに分けることでコードが読みやすくなる
・変更に強くするため
　✔修正は1箇所だけでOK

コンポーネントの基本的な使い方

・ファイルは大文字
・子コンポーネントでexport
・親コンポーネントでimport

コンポーネントの再利用

・配列をmap()メソッドで処理することが一般的
・同じコンポーネントをいくつも呼び出すことができる

propsでデータを受け渡す（★）

propsとは（★）

親から子にデータを受け渡す際の橋渡し役
Reactでよく使用する

App.jsx(親)

import Article from "./components/Article";

  function App() {
    return(
      <div>
        <Article
          title={'これはタイトルです'}　←呼び出し側で値を指定する
          content={'これはコンテンツです'}
      </div>
    );
  }

export default App;

components/Article.jsx(子)

const Article = (props) => {
   return(
     <div>
       <h2>{props.title}
       <p>{props.content}</p>
     </div>
   )
}
export default Article;

propsで渡せるデータ

・文字列、数値、真偽値、配列、オブジェクト、日付などなんでもOK
・変数も可能
・文字列は{}なしでもOK
・propsのデータは{}に記述