React の Class Component と Functional Component の書き方

Class Component and Stateless Functional Component

React Componentでの基本的なコンポーネントの書き方をまとめます

ReactDOM.render() {
  <Greeting name="Ronaldo" age=33 />,
  document.getElementById('root')
}

ReactDOM.render()で描画を行う
描画内容である、Greetingコンポーネントにnameとageをpropsとして渡します

Class Component

class Greeting extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>My name is {this.props.name}{this.props.age} years old.</h1>
  }
}

classにReact.ComponetというReactの基本的なコンポーネントを基底クラスとして継承します
render()メソッドを定義して、その戻り値でコンポーネントの表示内容を返します
propsをそのまま渡すだけなら、constructorを定義しなくとも問題ない

Stateless Functional Component

基本的なjsの書き方で実装すると、

function Greeting (props) {
  return <h1>My name is {this.props.name}{this.props.age} years old.</h1>
}

ES6のアロー関数を用いると、

const Greeting = (props) => (
  <h1>My name is {this.props.name}{this.props.age} years old.</h1>
)

のように、returnを省略できる

Stateless とは？

処理結果が変わるようなデータを内部に持たない状態を持たないコンポーネントのこと
コードライクではthis.state.がない
このようなコンポーネントは上記の２つの書き方の内、functional componentで実装することが推奨されている