Reactを使い出した時にまず思ったのが「もっと動いている事例を見せてくれんかな？」だった。事例が少なく感じたので、自分で入門者向けに事例集を作った。
初学者が勉強する時はまずは公式サイトのチュートリアルが一番よくできていると思う。それでも誰もがこのチュートリアルだけで十分って訳ではない。
Reactは他の技術とは発想が異なる箇所がいくつかあり、初学者が持っているバックグラウンドによって「なんか引っかかる所」が多い。特にJavaScriptの他のフレームワークに慣れた人にとっては「あれ？そこはそうするの？」となっていちいち手を止めて考えさせられてしまう。すごい難しくて手も足も出ない訳ではない。分かるんだけど、なんか妙に引っかかるところが多かった。
そういう引っかかりを取り除いてくれるのは公式サイトにある「○○というのはですね、○○という思想に基づいて、、、と考えて」と懇切丁寧に説明いただくのではなく、「ほら、見て。こうやって書けば動くんだよ」というシンプルなコード事例を見せてもらえれば、パーっと視界が開けるように理解できることがある。
ということで事例集。
よくブログにコードが貼り付けてあるけど、それが動いている所は見えない、というのがある。あれはストレスが溜まる。「おいおい、このコード本当に動くのかいな？」「動くんだったらなんで動いてるとこ見せてくれないのよ？」となる。
その点こちらの事例はご安心ください。以下のCodePenのリンク押せば動いてる結果出てます。
Hello world
react.js と react-dom.jsを入れて以下のコードを書けばHello worldが出る。この最初のところが実は一番難しかったりする。
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('example')
);
</script>
See the Pen Hello world by jabba (@jabba_the_hutri) on CodePen.
Hello world 2
JavaScriptファイルとHtmlファイルを分けたパターン。
React.render(
<h1>Hello world 2!</h1>,
document.getElementById('example')
);
See the Pen Hello world2 by jabba (@jabba_the_hutri) on CodePen.
Switch
押すとONとOFFが切り替わる。 StateはそのViewの状態を示す。初期値をgetInitialStateで指定して、値を変更する時はsetStateで変更する。この辺のStateのことを学んだ後で、このコードを読めば「あーそういうことか」と。
var App = React.createClass({
getInitialState: function() {
return {
switch1: true
};
},
handleSwitch1: function() {
this.setState({
switch1: !this.state.switch1
});
},
render: function() {
return <div>
<h1>Switch</h1>
<button onClick={this.handleSwitch1}>
{this.state.switch1 ? "ON" : "OFF"}
</button>
</div>;
}
});
React.render(<App/>, document.getElementById('example'));
See the Pen Switch by jabba (@jabba_the_hutri) on CodePen.
親子関係
ボタンは子、それらとまとめて表示しているのが親。まだボタンを押してもナニもない。ボタンの動作は以下の親子関係２へ。
var Parent = React.createClass({
getInitialState: function() {
return {childsData: [
{childText: "Child 1", childNumber: 1},
{childText: "Child 2", childNumber: 2}
]};
},
render: function () {
var childrens = this.state.childsData.map(function(childData,i) {
return <Child key={i} text={childData.childText}/>;
});
return <div>{childrens}</div>;
},
});
var Child = React.createClass({
render: function () {
return <button>{this.props.text}</button>;
},
});
React.render(<Parent/>, document.getElementById('example'));
See the Pen ParentChild by jabba (@jabba_the_hutri) on CodePen.
親子関係２
親と子のコンポーネント間で値の受け渡し方法を実装した例。子のボタンで押された内容を親が受け取って、子の値（ボタン表示の文字）を変更する。
コンポーネント間の値の受け渡しは、いくつかのパターンと方法がある。以下はその一例。
var Parent = React.createClass({
getInitialState: function() {
return {childsData: [
{childText: "Child 0", childNumber: 0},
{childText: "Child 1", childNumber: 1}
]};
},
render: function () {
var childrens = this.state.childsData.map(function(childData,i) {
return <Child key={i} onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
}.bind(this));
return <div>{childrens}</div>;
},
handleChildClick: function(childData,event) {
var updatedData = this.state.childsData;
updatedData[childData.childNumber]["childText"] = "Clicked!!";
this.setState({
childsData: updatedData
});
}
});
var Child = React.createClass({
render: function () {
return <button onClick={this.props.onClick}>{this.props.text}</button>;
},
});
React.render(<Parent/>, document.getElementById('example'));
See the Pen button2 by jabba (@jabba_the_hutri) on CodePen.
まとめ
とりあえずReactを触ってみた感想としては、Reactがこのままスタンダードになって落ち着いてくれたらいいな、と。だいたいこれまでのJavaScript界隈の栄誉枯渇が激しすぎ。まーそれにも理由があったのは分かる。Railsで実装して、ViewをAnglarJSにした時なんてRailsにMVCがあって、そのRailsのVにAnglarJSのMVCが乗っかって、MVCのMVCってなってもう一体ナニがしたいの？状態だった。どれをとってもこれがこれからのスタンダードだ！とは言い切れなかった。Reactがこれからのスタンダードと言い切ってもいいぐらいのポテンシャルは感じた。感じたというより「もうみんなでReactで一旦落ち着きましょうよ」と言いたい。スタックオーバーフローの調査結果に出ていたトレンド技術でReactが１位の311%と急上昇だった。Web系エンジニアであればその理由ぐらいは理解しておく必要があるな、と思った。
以上、初心者向けReact入門と事例集でした。
エンジニアの皆様へ
「ほとんどのエンジニアには解けるが、下位10％のダメなエンジニアにだけ解けないパズル?」なるものをシリーズ化していくつか作成した。パズル１は今現在で4481人の方に解いていただいて解答者リストにコメント入れてもらった。実は１万人の解答者数を目指している。もしご興味あれば解いてみてください。
http://tango-ruby.hatenablog.com/entry/2015/11/30/122814