Functional Component & Class Component

Functional Component

import React from 'react';

const Cheers = (props) => {
  return <div>Hello, {props.name}!!</div>;
}

Class Component

・stateを利用してコンポーネントの状態を記録できる
・ライフサイクルメソッドを利用できる

import React from 'react';

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

どちらも使い方は同じ

<Cheers name="ローライ" />

タグで囲んだ要素は children で渡すことが出来る

class Cheers extends React.Component {
  render() {
    return (
      <div>
        <div>Hello, {this.props.name}! Your lucky number is {this.props.luckyNumber}!</div>
        {this.props.children}
      </div>
    );
  }
}

<Cheers name="ローライ" luckyNumber={35}>
  some text...
</Cheers>

展開して渡すのも良し

const greeting = {
  name: "kingsman",
  luckyNumber: 33,
};

<Cheers {...greeting}>
  some text...
</Cheers>