react + redux の勉強２：コンポーネント

Functional Component と Class Component

React はコンポーネントベースでUIを作成する。
コンポーネントは Functional Component と Class Component という２種類の記述方法がある。

例えば、画面に Hello World を表示するためのコンポーネントを Functional Component で記述すると、以下のようになる。

import React from 'react';

function App(props){
  return (<div>Hello World</div>);
}

export default App;

これを Class Component で記述すると以下のようになる。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (<div>Hello from functional App</div>);
  }
}

export default App;

状態(state)とプロパティ(props)

this.state.<state-name> でコンポーネントに状態を持たせる事が可能。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Bob',
    };
  }
  render() {
    return (
      <div>
        <Greeting name="this.state.name" />
      </div>
    );
  }
}

this.props.<prop-name> で親コンポーネントからデータを取得可能。

import React from 'react';

import PropTypes from 'prop-types';

function Greeting(props) {
  return (<div>Hi {props.name}</div>);  
}

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

export default Greeting;

イベントハンドラ

コンポーネントにイベントハンドラを付けたい場合には、通常のJSと同様にイベント名に対して関数を渡す。 例えば入力フォームに change イベントを付与したい場合は以下のように onChange に関数を渡す。

import React, { Component } from 'react';
import Greeting from './greeting';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'unknown',
    };
  }
  nameChange(name) {
    this.setState({ name });
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.name} onChange={(e) => { this.nameChange(e.target.value); }} />
        <Greeting name={this.state.name} />
      </div>
    );
  }
}

export default App;