React　チュートリアル　コンポーネント〜props

2021年6月5日 2021年6月5日

コンポーネント

コンポーネントとは？

独立した再利用可能なパーツに分割して各部分を別々に考えることができる
コンポーネントを組み合わせてアプリ、ページを作っていく
関数コンポーネントとクラスコンポーネントの2種類がある

子コンポーネント…呼び出される側(export)
親コンポーネント…呼び出す側(import)

JavaScriptの関数みたいなものだね！

function Hello() {
  return (
    <div><world /></div>
    );
}
export default Hello;

↑が親コンポーネント　↓子コンポーネント

const World = () => {
  return <p>ハロー</p>
  );
  
  export default World;

クラス名は大文字で始めます！

関数コンポーネントとクラスコンポーネントの違い

クラスコンポーネント

class world extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

renderメソッドの中に記述します
propsを使用するときにthisの概念を使わなければいけない

関数コンポーネント

function world(props) {
  return <h1>Hello, {props.name} </h1>;
}

JavaScriptを学んだ方はこちらの方が書き方としては慣れているかと思います！

const world = (props) => {
  return <h1>Hello, {props.name} </h1>;
}

アロー関数で書くとこんな感じです

以前はクラスコンポーネントでしかstateやLifecycleは使えなかったが、アップデートで『Hooks』が登場し、記述量の少ない関数コンポーネントが今では主流になってきました

React　公式チュートリアル

props

propsとは？

親コンポーネントから子コンポーネントなどへデータを渡す役割を持った概念
データは{}の中に指定
データはなんでも渡せれる

親コンポーネント

function Chara() {
return (
  <div>
  <Character
    height = {'私の身長は170cmです'}
    weight = {'私の体重は60kgです'}
    />
  </div>
  );
}
exprot default Chara

表示させたいデータを記述

子コンポーネント

const Character = (props) => {
  return (
    <div>
      <p>{props.height}</p>
      <p>{props.weight}</p>
      </div>
    );
}
exprot default Character

propsを使用し動的に変わるように記述