(少し古いですが)WEB+DB Press Vol.92 を読んでいたら naoyaさんがreduxについて書いていたので、
これを読む前に忘れ気味だったReactを復習しようと、以前から気になっていた以下のチュートリアルをやってみました。
いずれも、1〜2時間程度でできます。
React.js Introduction For People Who Know Just Enough jQuery To Get By | Shu Uesugi
Hacker News でも話題になった2015年の記事。
一部古い箇所(twitterの画像uploadのロジック)もありますが、今でも良い記事だと思います。
Reactの良いところをjQueryとの比較で際立たせる内容は分かりやすくてとても良いです。
なぜclassNameが使われているとか、function呼び出しに()
が必要となるケースがあるのかなど結構細かい話も書いています。
React分かんない人は、最初にこれ読むと良いですね。
対象者は、エンジニアはもちろんですが、JS書けるデザイナも含まれています。
入門 React ―コンポーネントベースのWebフロントエンド開発
- 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/04/03
- メディア: 大型本
- この商品を含むブログ (2件) を見る
昔こちらを読んだときは、viewを小さく分割していくスタイルに違和感を持ちましたが(当時感じた記憶も曖昧ですが)、肝のところは
states
であり、上記のチュートリアルはここを中心に説明しているのがとても良いです。本筋ではないですが、以下も良いと思いました。
- chapter毎に所要時間が記載されている(全体でmax2時間くらいと最初に書いている)
- JS Bin - Collaborative JavaScript Debugging というjsxを実行できるサイトを利用している
(環境構築不要。chapter毎に丁寧にembedされていて迷子にならなくて良い)
2016年8月時点での国別アクセス数
Shuさんの別記事です。日本は10位だそうです。世界中で読まれてるなぁ。
Traffic by Country: React.js Introduction For People Who Know Just Enough jQuery To Get By
Reactで学ぶ!いまどきのWeb開発 // Speaker Deck
もう一つ。jsbin だと環境構築不要でしたが、こちらはcloneして実行していくstyle。なのでより実践的。
最低限必要なものは何か、どう進めれば良いのかというのが理解できます。
fand/react-hands-on: FRONTEND CONFERENCE 2017 - Reactハンズオン用レポジトリ
Layout使ってページの共通化したり、Next.jsを使ってCSSをどう扱うのかを学べたり(Next.js個人的には少し違和感がありましたが)します。
余談
Hatena Frontend | Free Listening on SoundCloud
podcastを運用されているようで、JSer.info の内容を読んだりする内容で、割と良いなと思いました。
JSer.info frontendの人に解説してもらいながら聞けるのは嬉しい。
感想
この1年ほどFrontEndは積極的に勉強しないスタイルでしたが、
特にShuさんの記事を読んでいて、Reactいいやんって思いました。
全てがReactになる必要はないけど、使えるところは使ってみたい印象。
既存のjQuery Plugin(アニメーション含む)どうする?、既存のテンプレートエンジン無しでいける?外部公開サイトだとサーバーサイドレンダリング必要ですよね?などというのは気になるところ。