はじめに
webアプリを作る業務でReactが必要になった際に使った本やサイトをまとめます。
前提
ReactはJavaScript+HTML/CSSでできているので、その両方を軽く触ってReactに入った方が圧倒的に分かりが早いです。
Reactを始めて分からないことがでたときに、HTMLとJavaScriptとReact独自構文のどれがわかってないのか分からないと調べるのがきついです。
HTMLとJavaScriptを勉強した時の記事を書いたので良ければ参考にして下さい。
使ったサイト＆書籍（使った順）
基本を抑えるのに使ったツール
まずはReactの良さや概要を知るためにチュートリアル形式の本を一つやりました。
キャラクターが出てきてストーリー形式で進むので読みやすいです。
また、こちらの本も辞書的に使っていました。
セールの時にこちらのUdemyを買ってやりました。動画内でReactを書くのに便利なVSCodeの使い方や、ショートカットを教えてくれる点も魅力。
また、JavaScriptの文法の中でReactを使うにあたって特に重要なものを教えてくれるパートがあります。
チュートリアルがたくさん載っているのですが、難しい内容が多いので一気にやるのではなく自分の習熟度に合わせて少しずつやるのが良いと思います。
また、CSSのフレームワークなどは使っていないので、自分で導入してみるのも練習になりました。
アプリ作成練習
その後は本で得た知識を何も見ずに作れるように、さまざまなアプリを題材に練習をしました。チュートリアルではありますが、まずは完成品だけ見て自力で作ってみて詰まったら答えを見る、というやり方でやっていました。
計算アプリ
コンポネントを作ったり値を取得したりする練習
ToDoアプリ
画面をコンポネントに分けてそれぞれ実装する練習（超初心者だったときはどうコンポネントを分ければ良いか分からなかった）
UIツールであるBulmaを使うので、webアプリっぽい見た目のものが作れて気分が上がります。
画像ギャラリー (犬アプリ）
APIをフェッチしてデータを取得する練習。犬が可愛いし、非同期処理の勉強ができます。
天気予報アプリ
色々なアプリの例を挙げてくれているサイトから。
ここに載っているReactの例はクラスコンポネントという古い書き方をしているので、
新しい書き方がよければ自分で書き直す必要があります。それも含めて練習になります。
FaceBook的なアプリ
こちらのyoutubeではMUIというUIツールを使ったFaceBookのようなアプリを作れます。
MUIの紹介が主なので、ボタンを作るだけでその内部の仕組みは紹介されていない部分もあるのですが、そこを自分で補間するのが練習になりました。
MUIを使わない方でも自分が好きなUIツールを使ったチュートリアルをやってみると凝った画面のアプリを作れるので楽しいし勉強になると思います。
番外編 (おすすめyoutuberの方）
まだ自分は取り組めていないのですが、職場の先輩によるとこちらの方のYoutubeでReactを使ったさまざまなチュートリアルが紹介されているそうです。
GmailやSlackなどみんなが使ったことのあるアプリを題材にしているので、楽しく取り組めそうな感じがします。