React初心者がReactを学ぶために使用したサイトや書籍

Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。

ちなみに学び始める前の私のスキルは下記の通りです。

• JavaScriptの基本的な理解はある
• jQueryは仕事で使えるレベル
• Reactは全く使ったことがない

注意

Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。（私もまだちゃんと理解はしてない。。）

ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そちらを念頭に置いていただいて、最新の情報をキャッチアップされることをおすすめします。

React公式のドキュメントとチュートリアル

React – ユーザインターフェース構築のための JavaScript ライブラリ

難しく書かれてると勝手に想像してて、私は最初に手を付けなかったのですが、やはり公式を読むのが一番だと改めて思いました。Reactの公式のドキュメントは日本語で書かれてますし、初めてでも分かるように丁寧に書かれてます。
最低限、DocsのINSTALLATIONとMAIN CONCEPTSは目を通して理解しておくと良いと思います。ADVANCED GUIDES以降はサラッと目を通す程度で、また後で見返すことになるかなと思います。
チュートリアルも実際に手を動かしながらReactで三目並べゲームを作ります。こちらもひとつひとつの説明がとても丁寧で、基礎概念がしっかり学べる内容になってます。

React.js & Next.js超入門

書籍の「はじめに」で下記のように案内されています。

本書で取り上げる機能は、React全体のおそらく2〜3割でしょう

その説明の通り、おそらくReactの初歩の部分だけなのだと思いますが、それ故に初心者には優しい内容になっています。JSX、ステート、コンポーネントからReduxまで広く取り扱ってます。初心者が基本を学ぶにはちょうどいいレベルの内容だと思います。
私もReduxの概念をこの書籍で大分理解できました。

JavaScriptオブジェクト超入門の章もあり、ReactではなくJavaScriptの仕様でも難しいところは丁寧にフォローされてるところも初学者には優しい。
なお、Next.jsはまだ読んでないのでコメントは割愛します。

今から始めるReact入門

今から始めるReact入門 〜 React の基本 – Qiita

Qiitaの記事です。
react-appから作成するのではなく、0から開発する時の手順も学べます。Webpackなどについても説明があるので、Reactの周辺技術の理解も深まります。React Routerやflux、Reduxについても詳しく説明されています。JavaScriptのimmutableの解説も分かりやすいです。

動画の教材と違って、自分のペースで進められる点や、コードをコピペできる点も良いなと思います。私は基本的な使い方については他で学んだ後、こちらに取り組んだのですが復習にも役立ちました。

フロントエンジニアのためのReact・Reduxアプリケーション開発

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 | Udemy
Udemyの講座です。（有料）
基礎からステップアップ的に学んで、最終的に簡単なCRUDアプリケーションが作れます。

実装前の仕様や処理の流れなどの説明が丁寧です。リファクタなど実務に近い部分までフォローしてくれる点も良いです。
私が一番始めに取り掛かった教材で、初学者にはReduxの概念が理解するのが難しかったです。

最短で学ぶReactとReduxの基礎から実践まで

最短で学ぶReactとReduxの基礎から実践まで | Udemy
こちらもUdemyの講座です。（有料）
APIを利用したホテル検索アプリケーションが作れます。

eslintを導入するなど、かなり実践に近い内容ではないかと思いますPropTypesを使った型指定もしっかりやってます。
まず動くものを作って、そこからリファクタリングしたり、Redux導入する一連の流れを体験できる点も良いです。ファイルの分割の仕方なども勉強になります。
RouterやReduxの仕組みを図解で説明されてる点も理解に役立ちました。

上記で紹介した「フロントエンジニアのためのReact・Reduxアプリケーション開発」よりスピードは早めです。また、入れるライブラリの名前やバージョンが変わってたりするので注意が必要です。

Atomic Design

モダンな開発のUIコンポーネント設計を取り扱った書籍であり、前半はAtomic Designの説明、後半は実践の構成となってます。
実践では、ReactとStorybookを使ってコンポーネントを作成します。

テストやアクセシビリティなどの解説もあり、かなり実践的な内容です。
もともとはCSS設計を学ぶために購入したのですが、Reactを使ったコンポーネント設計を学ぶにも適した書籍だと思います。

Container ComponentとPresentation Componentのコンポーネントの分け方は勉強になりつつ、初学では難しく感じました。Reactを実務で使えるレベルで、Storybookも使用した経験があると多分進めやすかったのかなと思います。

React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得

※2020年10月追加
【はむ式】React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 | Udemy
Udemyの講座です。（有料）

冒頭にも書いたように、やはり現在はReact Hooksを使った関数コンポーネントを使うのが主流となっています。
Reactの概要を理解してる方であれば公式のドキュメントを読むとHooksがどのようなものか把握できると思います。
フックの導入 – React

さらに理解を深めようと、こちらのUdemy講座を受講しました。
React Hooksの基礎を学び、簡単なアプリケーションを作成します。実践編ではReduxも取り入れます。

useStateやuseEffectは実務でも使ってたのでさらに理解を深めることに、useContextやuseReducerなど実務でも使ったことがなくよく理解してなかったものは具体的な使用方法を含めて学ぶことができました。