# 準備
## 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() {
}
});
“`