モダンなサイトではフロントエンド（ブラウザ上でのUI）はreactやvueなどのjavascript(以下js)のライブラリを使って実装されることが多くなってきました。
その中でも今回は特に僕が普段からよく書いているreactの勉強法について紹介していきたいと思います。
まずはjsの勉強
jsを元に書かれたフレームワークなので、まずはjsについて勉強しましょう。
おすすめはドットインストールかprogateです。僕が勉強したときはドットインストールが主流だったので、progateのjsはやったことが無いのですが、swiftをprogateで触ったことがあり、そのときにこのサービスめっちゃいいなと思いました。（現在はprogateでもreactのコースが作られて受講できるようになっているみたいです。）
どちらも基礎レベルの取得を目的としているので今回のニーズをちょうど満たしいます。
web系をやっている人ならjsに触れた機会が多いと思います。
そのような方はあらたまってやる必要はなく、その程度の知識で十分だと思います。自信がなければ軽く上記のサイトで一周してみたらいいでしょう。
また、jQueryの勉強が必要かどうかを聞かれました。
僕的には、特に必要はないと思っています。たまに、簡単な動きをめんどくなってjqueryで実装してみるのですが、バグの温床になり結局reactでやった方が早かったとなって直すことがあります。
考え方が違うので並存は避けるのが無難かもしれませんね。
es6を知る
実はjsは頻繁にアップデートがされています。一番最新のものはes6(es2015)と呼ばれています。
これは簡単にいうとjsの新機能です。jsでがっつり開発をしている人ならわかると思うのですが、従来のjsってクソなんですよ。
それで散々disられてたんですけど、2015年にアップデートされました。これによってjsはモダンな言語として再度注目を浴びるようになりました。（僕が高校生の時です。笑）
reactは従来のjsでも書けるのですがコードが冗長になってしまうので、最近ではほとんどのコードがes6で書かれています。
そして大体のreactの入門記事ではes6知ってるよね？という前提で話が進んでいます。多くの人が通る本家のreactチュートリアルもes6の解説はほとんどありません。
つまり、es6を知らないとreactを学ぶことすらできないのです。
うわ、また新しい言語かよと思うかもしませんが、所詮はjsです。それほど多くのことを勉強する必要はありません。
こちらの記事がよくまとまっているので、これに目を通すだけで十分です。あとは、reactをやっていく中で理解ができます。重要なのは、そういう書き方があるんだと知ることです。
僕のnoteでもこの記事を参考に重要な箇所だけピックアップして、平易な言葉で説明しています。上記の記事を読んでもピンと来なかった人はこちらも参考にしてみてください。ちなみに無料部分に書いてあります！！
react下調べ
progateのようにわかりやすいサイトがあればそれをやったら終わりですむのですが、そんな風にまとまったサイトもありません。そこでおすすめなのが、reactの概要を知るということです。自分の納得のいく記事を見つけるのがいいと思います。知らぬ間にprogateがreactコースを開いていました。なのでそれをやってみるのもいいと思います！
一人React.js Advent Calendar 2014
このあたりがよさげ
それと最近の僕のおすすめの勉強法が、スライドでの勉強です。
誰かが勉強会などのために必死に作ったスライドはかなり参考になります。
このサイトはまとまっていていいですね。
このようにreactの概要を掴んでから勉強を進めると、かなり次以降が楽になります。
やっと公式チュートリアル
ここまできてやっと公式のチュートリアルをできるようになります。僕は一年ほど前にいきなりこのチュートリアルをやろうとして死んだ経験があります。笑
誰もreactの勉強手順なんて教えてくれなかったですからね。
しかし、ここまでのステップを踏んでしまえば難解な公式のチュートリアルも結構するする理解できると思います。
二つのバージョンがあるのですが、どちらもやってみるのがおすすめです。どちらかというと、旧バージョンの方が実践に即したリアルタイムコメント機能の実装なのでおすすめです。
わかりにくいところもあるでしょうが、どんどん書いて動かすということをやってみるといいと思います。何周かすれば、いずれわかるようになります。どちらのチュートリアルも３周ぐらいするのが理想ですね。
他のものも作ってみる
これだけでは、他のアプリを作る際のイメージが湧きにくいので、他のものを作ってみることをおすすめします。
有名どころとしては、
です。ちなみに慣れたら30分で終わるという意味なので、めっちゃ時間がかかっても心配しなくて大丈夫です。
他には、 TODOアプリとかを調べながら作ってみると面白そうですね。あとは、どっかのapiを叩いた簡単な非同期のアプリとか。
あとは、githubにたくさんコードがあるのでそれを読んでみるといいでしょう。コードの書き方やディレクトリ構成もそうですが、reactでこんなことができるのかという発見に繋がります。
これで実際の開発のイメージがつきやすくなると思います。僕はこれぐらいのレベルで実務に入りました。最初はチュートリアルと現場のギャップに戸惑いましたが、チームの他のコードを参考にしながらなんとか食らいついてここまで成長することができました。
あとは、実践あるのみです！
その中でどこにどんなファイルを置いたらいいか悩むことがあると思うので、僕が登壇した勉強会の資料も参考にしてください！（後半はかなりレベル高め）
reactチュートリアルを500円で発売しています！
ここまで、読んでみてなんだかreactの勉強ってめんどくさいなって感じた方も多いと思います。
僕が一年前に勉強したときもそのように感じました。
そこで、そのとき感じた面倒なところやややこしいところを一つにまとめて、公式のチュートリアルや他の自分で作りたいものを作れるようになるレベルまで成長できることを目的としたreactチュートリアルのnoteを作成しました。
有料な分、他の記事では説明されないような細かい部分も丁寧に説明しています。そのため、ご購入いただいた多くの方にご好評いただいています。
無料部分でもかなり読めるようにしておいたのでぜひ目を通していただきたいです。
↑こんな感じで図やコードも多く掲載してできるだけわかりやすく説明することをこころがけています。
初心者の方に特におすすめです！
【追記】ドットインストールもおすすめ
僕がこの記事を投稿したところ、ドットインストールもおすすめだよ！とAidemyのツノさんという方が教えてくださいました。
ドットインストールのReact入門、超おすすめです！！https://t.co/zw96lIsZWi https://t.co/OJvZtPO2O5
— ツノ@Aidemyエンジニア (@puertocampo_at) May 26, 2018
プレミアムなのがたまに傷ですよね...
あれReact初見の状態でも一周やるだけでJSX、state、propsの概念はほぼ完璧に理解できると思うので、是非おすすめしてください！— ツノ@Aidemyエンジニア (@puertocampo_at) May 26, 2018
実はドットインストールにあるの知ってました。で、実際にやってみてレビューも載せようと思ったのですが、有料だったので断念してました。
何をやっているのかぐらいはみていたのですが、基礎に重点を置いていたイメージなので確かにJSX、state、propsの概念を理解するのにはちょうどいいのかも！
ただ、reactだけがやりたいのなら1000はちょっと痛いですね。僕のnoteなら500円！安いw