react入門 -JSXとstateについて-

始めに

モダンなフロントエンド開発において世界的に利用されているreact。
昨今、日本ではnuxtが人気を得ていますが、今後どちらを利用する上でもreactの思想はフロントエンドの知識として欠かせないものだと思います。 今回はreactを触ったことがない人を対象にreactの段階に分けて解説をしていきます。

Reactとは

UIをレンダリングするためのJavaScriptフレームワークです。
Facebookが開発し、オープンソースで公開されています。

どんな特徴があるのか

reactではJSXと呼ばれるHTMLとJSを組み合わせた言語拡張を用いてコードを書くことができます。

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

以下、引用:https://ja.reactjs.org/tutorial/tutorial.html

これにはいくつかのメリットがあります。

• javascriptの中でHTMLを使うことができる。
• javascriptの機能を最大限利用できるのでコードの可読性が高い。

JSXで気をつけなければならないのは、一つの要素しか返さないことで。
複数の要素を利用する場合、それらをネストして一つの要素としてまとめて返却する必要があります。
上のコードでも最終的にdivでネストして一つの要素としてreturnしています。

state

UIの書き換えに必要なComponentに値を記憶させるためのデータ。
React.Componentを継承したクラスのconstructorの中で定義します。
表示は
this.state.{定義したキー}
で行うことができます。

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square" //JSでclassは予約語のため、class属性を利用するにはclassNameと書く必要がある。
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

値を書き換える時はstateを直接書き換えずに、setStateを呼び出して値を書き換えます。

this.setState({value: 'X'}

setStateを呼び出すたびにrenderが呼ばれてUIが再描画されます。