2018年10月13日土曜日

ReactJS 入門

概要
環境
サンプルコード
- 雛形の index.html の作成
- Hello world を出力する DOM を追加する
動作確認
props と state
- props
- state
最後に
参考サイト

概要

ブラウザだけで ReactJS に入門してみました
簡単な英語のチュートリアルがあったのでそれの動かし方を説明します
とりあえず動かしてみたい人向けのチュートリアルになります

環境

macOS 10.14
ReactJS 16

サンプルコード

雛形の index.html の作成

vim index.html

<html>
<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
  /* 
  ここにコードを記載します
  */
  </script>
</body>
</html>

head の部分に ReactJS を使うためのスクリプトファイルを追加します
babel-standalone も使うのでそれも追加します
どちらも CDN で配信してくれているのでそれを利用します
body 内に ReactJS のコードを記載することで DOM をレンダリングしていきます

Hello world を出力する DOM を追加する

先程のコードの「ここにコードを記載します」に追加します

vim index.html

<html>
<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
  class Hello extends React.Component {
    render() {
      return <h1>Hello world!</h1>;
    }
  }
  ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
  );
  </script>
</body>
</html>

React.Component を継承したクラスで render メソッドを実装します
そして ReactDOM.render で作成したクラスと描画する DOM の情報を指定します

動作確認

あとは index.html をブラウザで開けば「Hello world!」と表示されます
こんな感じで Component を作成して render する感じになります

props と state

ReactJS では props と state というデータが使えます

props

props は ReactDOM.render でクラスを指定した際に属性名と値を指定すると、その値をクラス側で参照することができます
具体的には以下のように変更します

class Hello extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}
ReactDOM.render(
  <Hello name="hoge" />, 
  document.getElementById("root")
);

JSON を渡すこともできます

const d = {"first":"hoge","family":"fuga"}
class Hello extends React.Component {
  render() {
    return <h1>Hello {this.props.name.family}!</h1>;
  }
}
ReactDOM.render(
  <Hello name={d} />, 
  document.getElementById("root")
);

state

state は値が変更されると再度 render を走らせることができるデータです
ボタンをクリックすると state を変更し表示内容を変更してみます
以下のように ReactJS の部分を書き換えます

class Hello extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello {this.state.name}!</h1>
        <button onClick={this.updateName}>Click me!</button>
      </div>
    )
  }
  constructor() {
    super();
    this.state = {
      name: ""
    };
    this.updateName = this.updateName.bind(this);
  }
  updateName() {
    this.setState({
      name: "hawk"
    });
  }
}
ReactDOM.render(
  <Hello />, 
  document.getElementById("root")
);

ReactDOM.render は元のやつに書き換えます
まず render() メソッドで初期状態の DOM を return するようにします
ボタンを新たに設置しクリック時に onClick={this.updateName} をコールさせます
Hello 側は state に応じた値を表示させるため {this.state.name} を設定します

updateName メソッド内で setState をコールします
state を変更する場合は直接プロパティを参照することはせず setState メソッドを呼ぶようにしましょう
これでクリック時の挙動は定義できました

あと新たに追加したのは constructor() になります
これは Hello クラスが呼び出された場合に一番始めにコールされる初期化用のメソッドです
ここで this.state に対して初期化します
今回の場合、空文字で初期化しているので画面を呼び出した際には名前は何も表示されません

そして最後に this.updateName = this.updateName.bind(this); しています
これは updateName メソッドに this を bind しているのですがこれをすることでどうなるかというと updateName 内で this が参照できるようになります

これで動作確認するとボタンが表示されボタンをクリックすると名前が表示されるのがわかると思います

最後に

ReactJS を使って簡単な DOM のレンダリングと基本となるデータの使い方を学びました
かなり簡単なチュートリアルだったので更にやってみたい方は公式のチュートリアルがオススメです
ゲームを開発するチュートリアルっぽいです
他には今回参考にさせて頂いたチュートリアルの続きでチャットアプリを開発するチュートリアルもあるのでこれも良いかもしれません

フロントエンドのフレームワークはやたらありそれぞれが独自の思想を持っているケースが多いのですべてを覚えてることは不可能ですが、ReactJS や Angular, jQuery あたりのメジャーどころは覚えておいて損はないかと思います

hawksnowlog