catch

React初心者が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も使用した経験があると多分進めやすかったのかなと思います。

Add Comment

本文

コメントはまだありません。

PAGE TOP