きたけーTechブログ

kitak.write something if kitak.interested_in? something

React.js をとりあえず触ってみた

reactjs

こんにちは。給料日だ！きたけーです。

巷で噂のReact.jsに触れるために必要最低限なものを用意してみました。

とりあえずはじめる

ライブラリをCDNから取得するかんじで、こんな具合です。 JSXTransformerを読み込んでいるのでJSXからJSへの変換を勝手にやってくれます。内容はカウントするだけの単純なもの。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>React sandbox</title>
  </head>
  <body>
    <div id="main"></div>
    <script src="http://fb.me/react-0.12.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
    <script type="text/jsx" src="app.jsx"></script>
  </body>
</html>

JSX

DeNAのやつとは違うJSXです。

var Counter = React.createClass({
  getInitialState: function() {
    return {count: 0};
  },
  countUp: function() {
    this.setState({count: this.state.count + 1});
  },
  countDown: function() {
    if (this.state.count <= 0) {
      return;
    }
    this.setState({count: this.state.count - 1});
  },
  render: function() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.countUp}>+1</button>
        <button onClick={this.countDown}>-1</button>
      </div>
    );
  }
});

React.render(
  <Counter />,
  document.getElementById('main')
);

React、ドキュメントをちらっと見たかんじだと、MV*フレームワークというよりビュー専ってかんじだ。