Help us understand the problem. What is going on with this article?

Reactの学習、今からやるならこうする

Reactの学習を初めて約2週間が経ちました。
Railsの時と違って「とりあえずこれをやっておけば良い」ってものが見当たらずなかなか大変でしたが、試行錯誤の上色々と見えてきたのでまとめていきます。

はじめに

React普通にむずいです。
他の言語の経験が無い場合、VueやRailsなどから始めることをおすすめします。

学習前の知識レベル

  • Railsエンジニア
  • JavaScriptは簡単なDOM操作程度ならできる
  • Vue.jsを20時間くらい勉強した(途中でReactがやりたくなった)
  • Webpackで静的ページのコーディング環境を整えている

学習法見定める上での難点

  • Reactは過去数年で大きく進化しているので、今は主流ではなくなった書き方の記事、チュートリアルがたくさんある
    • 公式チュートリアルもProgateも古い書き方
  • Railsチュートリアルのような絶対的な教材が存在しない

学習方法

ProgateのReactコース

https://prog-8.com/languages/react
雰囲気を掴むにはProgateが一番です。
有料ですが、数時間で終わるので980円(税別)でいけます。

web上のチュートリアルが終わったら、作ったアプリをローカルで再現するといい感じに知識が定着します。
create-react-appを使うと、reactの開発環境が簡単に整うのでこのタイミングで覚えましょう。

公式チュートリアル(三目並べ)

公式チュートリアルを改造して◯◯してみた、的な記事が色々あったりするので、やっておいた方が良いです。ある種の共通言語になります。

りあクト!の第1、第2版を読む

このシリーズは本当に良いです。Reactの歴史、教義、このライブラリは昔流行ってたけど今は使われてないから注意、などなど、いろんなことが会話形式で楽しく学べます。強くおすすめします。

ちなみに第3版もありますが、主にFirebaseの説明になるので、この段階で読む必要はないです。
私は読みましたが「Firebaseクセ強すぎ。Reactの基礎が固まる前に手を出すものじゃないな」という感想だけを抱きました。

【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう!

https://note.com/dragontaro/n/n04e0b9c0cca7

ここにきて初めて「関数コンポーネント + ReactHooks」が登場します。
Progateと公式チュートリアルでは「クラスコンポーネント」という、今は主流ではない書き方で書かれています。このチュートリアルでHooksの基礎を学びましょう。

Reduxの基礎の勉強

このあたりで、Reduxとは何者か、雰囲気を掴んでおくと良いでしょう。

React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう←今ここ

https://www.techpit.jp/p/react-calendar

Googleカレンダー的なアプリを作りながら、Reduxやuiライブラリ、非同期処理などをガッツリ学びます。
かなり分量がありますが、すごく良かったです。Railsチュートリアル的な立ち位置かと。
ちなみに
【最新版・hooks対応】 Reactの基礎を学んでTODOアプリを作ろう!
と同じ作者です。

この記事を書いている2020年4月27日時点で、私はこのチュートリアルが終わった段階です。
ここまで2週間かかりましたが、色々回り道をしたので、素直に上からやっていけば10日と掛からず終わるんじゃないでしょうか。

今後やっていこうと思っていること

先ほどのステップで作ったカレンダーを色々いじっていこうと思っています。
具体的には

  • 教材(極力)を見ずに再現する
  • TypeScriptを組み込む
  • APIサーバーを自前で用意する(RailsのAPIモードを使ってみる)
  • Storybookを使う
  • ESlintとPrettierの設定をガッツリやる
  • redux-thunkをredux-sagaで書き換える
  • Jest、Cypressでテストを書く
  • StyledComponentを使う

これらが終わったら、NextとかGatsbyを触ってみたいですね。

その他参考になった記事など

良くなかった方法

最後に良くなかった方法も書いていきます。

  • UdemyのReactの教材
    • 評価の高いものを買ってみたのですが、まじで全然良くなかったです
    • 動画だと、振り返るのが大変なのもマイナス
  • 書店に並んでいる本
    • 良し悪し以前に、そもそも情報が古いものがほとんどでした
  • だらだらネットサーフィンをして情報を集める
    • 「手を動かす」「記事にまとめる」の2つに比べて学習効率が低いです。「りあクト」は超良書なので例外ですが、基本的には手を動かすのが吉だと思います。

これからも頑張っていきます。

d0ne1s
Qiitaの記事検索サービス【Qiigle】(https://qiigle.com/)を運営。 フリーランスエンジニア。Ruby on Rails、Tailwind CSS、Heroku。少ない人数で高速で開発することに強い関心があります。ちょっとした情報はTwitterで🦈
https://twitter.com/d0ne1s
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした