Reactを始める

# 準備
## webサーバ起動
“`
sudo apachectl start
“`
## ここにある
“`
cd /Library/WebServer/Documents/
“`
# 始める
## reactを使うにはこれが必要
“`
<script src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js”></script>
“`
## jsxを利用するにはこれが必要
“`
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js”></script>
“`
## コンポーネントの作り方
“`
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className=”commentBox”>Hello, world! I am a CommentBox.</div>
    );
  }
});
“`
## この時、2つのルート要素をreturnしてはいけない
“`
// NG例
return (
  <div className=”commentBox”>
    Hello, world! I am a 1st CommentBox.
  </div>
  <div className=”commentBox”>
    Hi, world! I am a 2nd CommentBox.
  </div>
);
“`
## コンポーネントをrenderする
“`
ReactDOM.render(
  <CommentBox />,
  document.getElementById(‘content’)
);
“`
## renderの原則
– 「コンポーネントの状態を操作しない」
– 「DOMの操作(読み書き)をしない」
– 「ブラウザの操作をしない」
## コンポーネント使用時にパラメータを渡す
“`
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className=”commentBox”>
        <Comment author=”author”>children</Comment>
      </div>
    );
  }
});
“`
属性がパラメータになるらしい。
2つ以上指定しても大丈夫だった。
## コンポーネントの定義
まずこう言う形がコンポーネントらしい。
既存で存在しないタグがコンポーネント?
“`
<Comment author=”author”>children</Comment>
“`
こうやって定義する
“`
var Comment = React.createClass({
  render: function() {
    return (
      <div className=”comment”>
        <h2 className=”commentAuthor”>
          {this.props.author}{this.props.test}
        </h2>
        {this.props.children}
      </div>
    );
  }
});
“`
このthisなんちゃらが、さっきの属性の値になる。
なので、汎用的に用意しておけば効率的になるはず。
“`
{this.props.author}
“`
## Javascriptの文字列が必要になる時
こんな感じで使うらしい。
ケースがよくわかってない(課題)
“`
{marked(this.props.children.toString())}
“`
そもそもコンポーネントの中にJavascript入れたらうまく出力されなかった。きっと別の方法があるはず(また今後)
“`
var Comment = React.createClass({
  render: function() {
    return (
      <div className=”comment”>
        <h2 className=”commentAuthor”>
          {this.props.author}{this.props.test}
        </h2>
        {this.props.children}
        <script>
            alert(aaa);
        </script>
      </div>
    );
  }
});
“`
# createClass内で使えるメソッド
## getInitialState
コンポーネント初期化時に1回だけ呼ばれるやつ。
## componentDidMount
– renderの後に実行されるらしい。
– これが実行される時にはDOMは構築済み。
– 子コンポーネントがある場合、そっちの子のメソッドが先に呼ばれる
## validationState
## handleChange
順番的にこんな感じかな
“`
var CommentBox = React.createClass({
  loadCommentsFromServer :function(){
      // API関係取得
  },
  getInitialState: function(){
      // 初期化
      return {data: []};
  },
  render: function(){
    return (
      <div className=”commentBox”>
        <h1>Comments</h1>
        <Comment author=”test_author”>text_children</Comment>
      </div>
    );
  },
  componentDidMount: function() {
  }
});
“`