Reactのコード事例から学ぶ初心者向けReact入門と事例集
移転しました。
Reactを使い出した時にまず思ったのが「もっと動いている事例を見せてくれんかな？」だった。事例が少なく感じたので、自分で入門者向けに事例集を作った。
初学者が勉強する時はまずは公式サイトのチュートリアルが一番よくできていると思う。それでも誰もがこのチュートリアルだけで十分って訳ではない。
Reactは他の技術とは発想が異なる箇所がいくつかあり、初学者が持っているバックグラウンドによって「なんか引っかかる所」が多い。特にJavaScriptの他のフレームワークに慣れた人にとっては「あれ？そこはそうするの？」となっていちいち手を止めて考えさせられてしまう。すごい難しくて手も足も出ない訳ではない。分かるんだけど、なんか妙に引っかかるところが多いのだ。
そういう引っかかりを取り除いてくれるのは公式サイトにある「○○というのはですね、○○という思想に基づいて、、、と考えて」と懇切丁寧に説明いただくのではなく、「ほら、見て。こうやって書けば動くんだよ」というシンプルなコード事例を見せてもらえれば、パーっと視界が開けるように理解できることがある。
ということで事例集。
よくブログにコードが貼り付けてあるけど、それが動いている所は見えない、というのがある。あれはストレスが溜まる。「おいおい、このコード本当に動くのかいな？」「動くんだったらなんで動いてるとこ見せてくれないのよ？」となる。
その点こちらの事例はご安心ください。以下のResultに動いてる結果出てます。
Hello world
react.js と react-dom.jsを入れて以下のコードを書けばHello worldが出る。この最初のところが実は一番難しかったりする。
See the Pen Hello world by jabba (@jabba_the_hutri) on CodePen.
Hello world 2
JavaScriptファイルとHtmlファイルを分けたパターン。
See the Pen Hello world2 by jabba (@jabba_the_hutri) on CodePen.
Switch
押すとONとOFFが切り替わる。 StateはそのViewの状態を示す。初期値をgetInitialStateで指定して、値を変更する時はsetStateで変更する。この辺のStateのことを学んだ後で、このコードを読めば「あーそういうことか」と。
See the Pen Switch by jabba (@jabba_the_hutri) on CodePen.
親子関係
ボタンは子、それらとまとめて表示しているのが親。まだボタンを押してもナニもない。ボタンの動作は以下の親子関係２へ。
See the Pen ParentChild by jabba (@jabba_the_hutri) on CodePen.
親子関係２
親と子のコンポーネント間で値の受け渡し方法を実装した例。子のボタンで押された内容を親が受け取って、子の値（ボタン表示の文字）を変更する。
コンポーネント間の値の受け渡しは、いくつかのパターンと方法がある。以下はその一例。
See the Pen YqJJgW by jabba (@jabba_the_hutri) on CodePen.
上記の内容を応用して作ったのが、AWSのサービス利用調査のサイト。ボタンを押したところがオレンジになって、そのアイコン列が左に表示される。初めてReact使って実装した。 ソースコードはこちら。改善点やご指摘あれば、ぜひコメントください。
http://aws-survey.herokuapp.com/
とりあえずReactを触ってみた感想としては、Reactがこのままスタンダードになって落ち着いてくれたらいいな、と。だいたいこれまでのJavaScript界隈の栄誉枯渇が激しすぎ。まーそれにも理由があったのは分かる。Railsで実装して、ViewをAnglarJSにした時なんてRailsにMVCがあって、そのRailsのVにAnglarJSのMVCが乗っかって、MVCのMVCってなってもう一体ナニがしたいの？状態だった。どれをとってもこれがこれからのスタンダードだ！とは言い切れなかった。Reactがこれからのスタンダードと言い切ってもいいぐらいのポテンシャルは感じた。感じたというより「もうみんなでReactで一旦落ち着きましょうよ」と言いたい。スタックオーバーフローの調査結果に出ていたトレンド技術でReactが１位の311%と急上昇だった。Web系エンジニアであればその理由ぐらいは理解しておく必要があるな、と思った。
以上、初心者向けReact入門と事例集でした。
ReactJS by Example - Building Modern Web Applications with React
- 作者: Vipul A M,Prathamesh Sonpatki
- 出版社/メーカー: Packt Publishing
- 発売日: 2016/04/21
- メディア: Kindle版
- この商品を含むブログを見る
