Goodpatch Advent Calendar 2017 の21日目の記事です。

こんにちは。フロントエンドエンジニアをしてます杉原です。
私はAngularJSでここ2年ぐらいやってたのですが、今年になってReact + Reduxで開発することになりました。そこで今回はReact初心者の私がどうやって勉強していったのか紹介したいと思います。

React + Reduxのチュートリアル

まずはオーソドックスに公式サイトのチュートリアルをやっていきます

React

Tutorial: Intro To React – React

これをやれば、JSXや、props、stateなど、Reactでのアプリの作り方がなんとなくわかってきます。

Redux

Example: Todo List · Redux

お次はReduxです。
Reduxは考え方に慣れるのに時間がかかるので、とりあえず写経していってあまり深く考えずこんなものかーというかんじでやっていくのがいいと思います。

WEB + DB PRESS

約1年前のWEB+DB PRESS に「Reactでつくるシングルページアプリケーション入門」という記事があったのでこれを写経しました。
この記事ではReact + Fluxですが、より実践的なことが学べます。Webpackの設定仕方から、Reactへのfluxの導入まで丁寧に解説されてます。
なんとなくReactが分かる方はこれからはじめてもいいかもしれません。

egghead.io

いろんなReact Reduxのチュートリアルがやりたかったので、eggheadio にあるReactやReduxのコースをやりました。
英語ですが、動画でコードをみながら学習できるので、英語分からなくても問題ないと思います。

verekia/js-stack-from-scratch

最後により実践的にReact +ReduxでSPAをつくってみたかったので、verekia/js-stack-from-scratch というリポジトリのチュートリアルをやりました。
このチュートリアルのすごいところはReactだけでなくて、モダンなJS周りの技術に触れることができることです。
Yarn, ESLint, Flow, Jest, Webpack, SSRなどなど。
Reactだけでなくて、モダンなフロントエンド全般の知識をつけたい方にはこのチュートリアルはオススメです。

最後に

多分、これだけやれば基本的なReactの使い方や、Reduxの考え方はわかるようになると思います。
これからReact勉強しようと思っている人に参考になれば幸いです。