Reactおみくじ (getInitialState setState)

2017年、もうすぐ一月も終わりですが(......早い)、
Reactで簡単なおみくじをつくってみました。

Reactおみくじ　CodePenデモ

GitHub

この記事ではReactおみくじ作成の手順をまとめていこうと思います。

はじめに

・対象者
Reactチュートリアルおわったぐらいの人
Reactでおみくじをひきたい人
正月におみくじをひきそこねた人

・学べること
getInitialState　　setStateの使い方
onClickによるイベントの設定とstateの受け渡し
乱数のつくりかた

1　Hello World

Hello Worldを表示させた状態からはじめます。
*Hello World、表示環境の簡単なつくりかたはこちらで。

コード

index.html

  <div id="root"></div>

style.css

body{
    background: #f2f2f2;
    text-align: center;
    color: red;
}
#root{
    font-size: 48px;
    font-weight: bold;            
}

script.js

var Oracle = React.createClass({
//1
//2
  render: function(){
    return (
     <div>
        <p>Hello World</p> 
     </div>
    );
  }
});

ReactDOM.render(
  <Oracle />,
  document.getElementById('root')
);

上記のコードでHello Worldが表示されます。

2 getInitialState

getInitialStateを設定します。
getInitialStateはReactでstateという可変データの初期設定につかいます。
*stateについては@kyrieleison　さんのReact における State と Props の違いが参考になります。

   getInitialState:function(){
     return { result:"Reactおみくじ"};
   },

上記コードを//1のある行に上書きします。
resultは"Reactおみくじ"にあたる値にアクセスする名前になります。
次に <p>Hello World</p>を<p>{this.state.result}</p>に上書きします。
{}を忘れないようにしてください。

thisはvar Oracleを示していて、state.resultとつづけることで"getInitialStateのresultの値を取得します。
結果Reactおみくじの文字が表示されます。

3 乱数をつくるfunction

//2のある行に乱数をつくるfunctionを設定します。

・乱数のつくりかた
Math.floor(Math.random()*arr.length);
Math.floor()は小数点以下切り捨て。
Math.random()は0から1未満の数字を生成します。
乱数は配列の添字(index)として使うので、おみくじの結果の数に合わせて*arr.lengthとおきます。

show: function(){ 
   var arr = ['大吉', '小吉','中吉',"吉",'凶',"大凶"];
   var index = Math.floor(Math.random()*arr.length);
   this.setState({result: arr[index]});
  },

showはfunctionの名前で後でイベントに結びつけるときにつかいます。
最後の,を忘れないようにしてください。

4行目にsetStateがでてきました。
setStateはgetInitialStateで設定した値(result)を保存、更新する場所になります。
更新する値がarr[index]と初期値から変更されていて、イベントが発生するたびindexに設定された乱数によってarrの取得内容が更新されます。

4 onClick

イベントハンドラのonClickを設定します。

<button onClick={this.show}>Push</button>

上記コードを<p>{this.state.result}</p>の次の行に足してください。ボタンが追加されます。
onClickはクリックイベントを判断します。buttonのattribute(属性)に設定されているので、buttonを押すたびにクリックイベントが発生します。
onClickの内容は{this.show}と設定されているので、イベント発生時に乱数をつくるshowが呼ばれます。
結果、stateの値が更新され、おみくじの内容が変わっていきます。

おわり

以上でごくごく簡単なおみくじの説明を終わります。
不明な点、補足がありましたらコメントいただけると助かります。
ありがとうございました。

var Oracle = React.createClass({
  getInitialState:function(){
    return { result:"Reactおみくじ"};
  },

  show: function(){ 
    var arr = ['大吉', '小吉','中吉',"吉",'凶',"大凶"];
    var index = Math.floor(Math.random()*arr.length);
    this.setState({result: arr[index]});
  },

  render: function(){
    return (
     <div>
        <p>{this.state.result}</p> 
        <button onClick={this.show}>Push</button>
     </div>
    );
  }
});
ReactDOM.render(
  <Oracle　/>,
  document.getElementById('root')
);