Reactの基本

どうも、ぽっぽです。

最終的な目標はTypeScriptを使ってフロントエンドのフレームワークを試してみたくて、TypeScriptを使って書けるReactを使ってみます。
本家の公式ドキュメントのチュートリアルにReact & Webpack · TypeScriptとして掲載されています。

GitHub – microsoft\frontend-bootcamp: Frontend Workshop from HTML\CSS\JS to TypeScript\React\Reduxに良いサンプルコードがありました。また、説明もわかりやすかったので理解したことを紹介します。

まずは、TypeScriptから少し離れてReactについて説明します。

React Hello World

ReactDOM.render(<p>Hello World</p>, document.getElementById('app'));

ReactDOM.render()を呼ぶことから始まります。パラメータは２つあって、コンポーネントとそれを配置する要素です。

• コンポーネントはHTMLの属性と少し異なるところがあって、class属性はclassNameになったりします。：<div className="foo">
• 自分で作成したコンポーネントも呼び出すことが出来ます。：<div><MyComponent /></div>
• JSXと呼ばれるファイルに記載します。

React Component

ReactはComponentの集合体のように扱うようです。Componentにすることで再利用とか、分業とかやりやすくしている理解です。

Componentを作成する方法は２種類あって、ClassかFunctionです。

class App extends React.Component {
  render() {
    return <p>Hello World</p>;
  }
}

const App = props => {
  return <p>Hello World</p>;
};

上記はどちらも同じComponentを作成します。表示する場合は、Componentを作って、Domに描画するのが大まかな流れです。

ReactDOM.render(<App />, document.getElementById('app'));

Props

PropsはComponentにわたす引数のようなものだと思います。

<App text="Hello World" />

const App = props => {
  return <p>{props.text}</p>;
};

textで指定した値をComponentで利用出来ます。textの文字列は任意に決めて良いです。txtでもataiでも大丈夫です。

Destructuring

PropsはComponentで１つだけでなく複数指定することが出来ます。文字列、数値、オブジェクトなどが定義出来ます。

<MyComponent
  open={false}
  count={5}
  text="Hi there"
  items={['cat', 'dog', 'bird']}
  config={{
    start: 1,
    end: 10,
    autoStart: true
  }}
/>

呼び出すときは

const open = props.open;
const text = props.text;

などと呼び出しますが、Destructuring assignment – JavaScript | MDNと呼ばれすシンタックスを使って

const {
  open,
  text,
  count,
  items,
  config: { start, end }
} = props;

のように変数を取得することが出来ます。便利ですね。

State

classベースのComponentはStateと呼ばれる状態を保持することが出来ます。Propsは画面描画時だけ使われるとおしまいですが、Stateは画面描画後もユーザ操作により変化させたり状態を管理することが出来ます。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0
    };
  }
}

constructorでインスタンス時に状態を保持します。上記はクリック数をStateとして定義した例です。

• constructorは引数にpropsを受け取ります。
• super()関数は親クラスのconstructorを呼び出します。クラスの継承ではお約束事のようです。
• StateはsetStateメソッドで値を更新します。

export const Button = props => {
  return (
    <button className="Button" onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export class Counter extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0
    };
  }
  render() {
    const { text } = this.props;
    const { clicks } = this.state;
    return (
      <div>
        {text}: {clicks}
        <Button onClick={this._onButtonClick}>Click</Button>
      </div>
    );
  }

  _onButtonClick = () => {
    this.setState({
      clicks: this.state.clicks + 1
    });
  };
}

_onButtonClick ()メソッドを定義し、Stateを更新しています。２つのComponentを定義しています。CounterComponentではButtonComponentを呼び出していて、PropsでonClickを指定しています。Buttonをクリックすると呼び出し元であるCounterの_onButtonClick ()メソッドが実行されて状態が更新されます。

これがReactの基本的な仕組みです。