React入門

開発環境の構築

Reactはスタティックなファイルを読み込んでも始めることはできますが、JSXとかES6とかで書くのがスタンダードになってますので、その辺りの環境を作っていくことから始めます。
とりあえずNode.jsは入っているものとします。
create-react-appというFacebookが提供しているパッケージがありますので、これを利用すると始めやすいと思います。
適当なディレクトリでターミナルから下記を実行してtestというプロジェクトディレクトリを作成します。

1
$ npx create-react-app test

npxというのがあまり見慣れませんが、Node.jsを入れてnpmが使用できる環境なら使えます。
あとはカレントディレクトリを作成したtestにして、npm startを実行するとブラウザが起動してWelcome to Reactと表示されます。

1
$ cd test
2
$ npm start

これでsrc内のファイルが監視されて、ファイルを保存すると自動的にビルドが実行されブラウザが更新されるようになります。

環境の構築といっても以上となります。簡単ですね。

JSXで文字列の表示

srcディレクトリの中には色々ファイルが入っています。
その中にあるApp.jsを開いて下記に編集してください。

1
import React, { Component } from 'react';
2

3
class App extends Component {
4
  render() {
5
    return (
6
      <div>
7
        <p>はじめてのReact</p>
8
      </div>
9
    );
10
  }
11
}
12

13
export default App;

ブラウザで確認すると「はじめてのReact」と表示されます。
render関数のreturnしたタグがそのまま表示されていますね。
JSの中にHTMLタグがいきなり入っていてすげえ気持ち悪いって言う人もいるかもしれませんが、これがJSXの力らしいですよ。

JSXで変数の表示

変数を使用してJSXで表示してみましょう。

1
class App extends Component {
2
  render() {
3
    let str = 'はじめてのReact';
4
    return (
5
      <div>
6
        <p>{ str }</p>
7
      </div>
8
    );
9
  }
10
}

JSX内では{}で変数を囲むことで、表示することができます。

別のコンポーネントを使用する

アプリケーションは複数のコンポーネントを組み合わせて作成することになると思います。
コンポーネントを新たに作成して、別にコンポーネントから表示してみましょう。

1
class Message extends Component {
2
  render() {
3
    return (
4
      <p>別のコンポーネント</p>
5
    );
6
  }
7
}
8

9
class App extends Component {
10
  render() {
11
    return (
12
      <div>
13
        <Message />
14
      </div>
15
    );
16
  }
17
}

コンポーネントは次のように関数で作成することもできます。

1
const Message = () => {
2
  return (
3
    <p>別のコンポーネント</p>
4
  );
5
};

関数の方が記述も動作も高速ですが、stateやライフサイクルなどクラスでしか使えない機能もあります。

別のコンポーネントにデータを渡す

外部のコンポーネントからデータを受け取り、より柔軟なコンポーネントを作成してみます。

1
const Message = (props) => {
2
  return (
3
    <p>{ props.str }</p>
4
  );
5
};
6

7
class App extends Component {
8
  render() {
9
    return (
10
      <div>
11
        <Message str="メッセージを渡す。" />
12
      </div>
13
    );
14
  }
15
}

作成したコンポーネントの関数の引数にオブジェクト変数（props）が渡されます。
ここではstrのプロパティを表示してますので、コンポーネントを使用するときにstr属性の指定をします。

データを渡す方法は属性で指定する他にもコンポーネントタグに値を挟んで渡す方法もあります。
その場合、定義して関数ではprops.childrenで表示することができます。

1
const Message = (props) => {
2
  return (
3
    <p>{ props.children }</p>
4
  );
5
};
6

7
class App extends Component {
8
  render() {
9
    return (
10
      <div>
11
        <Message>メッセージを渡す。</Message>
12
      </div>
13
    );
14
  }
15
}

配列をリスト表示

配列をリスト表示したいっていうのは結構あると思います。

1
class App extends Component {
2
  render() {
3
    let datas = [
4
      {id: 1, name:'山田'},
5
      {id: 2, name:'田中'},
6
      {id: 3, name:'鈴木'}
7
    ];
8
    const list = datas.map(data => {
9
      return <li key={ data.id }>{ data.name }</li>
10
    });
11
    return (
12
      <div>
13
        <ul>{ list }</ul>
14
      </div>
15
    );
16
  }
17
}

配列のmapで一度JSXを変数に入れてから、returnで表示してます。
liにはkeyがないとエラーになります。

リアルタイムで表示を更新する

最後にstateを使用して、テキストフォームで入力した内容をリアルタイムで更新して表示してみます。

1
class App extends Component {
2
  constructor(props) {
3
    super(props);
4
    this.state = {
5
      str: ''
6
    }
7
    this.handleChange = this.handleChange.bind(this);
8
  }
9
  handleChange(e) {
10
    this.setState({
11
      str: e.target.value
12
    });
13
  }
14
  render() {
15
    return (
16
      <div>
17
        { this.state.str }<br />
18
        <input onChange={ this.handleChange } />
19
      </div>
20
    );
21
  }
22
}

stateに設定したプロパティはsetStateで更新することで、表示されている部分も自動的に更新されます。