2020年のReact.js 環境構築から公式チュートリアルをやって習得するまで #React

実際 Reactは長い歴史のなかで記述方法の変化、重要な機能が追加されつづけてきました。
そのすすんだ要素もふくめて、どうやって勉強するのがよいか、書いてみました。

基本的には公式のチュートリアルをうまく組み合わせて勉強すればよいと思うのですが、
最新の情報は分散されているような気がするのでまとめてみました。

step.0 まずは環境準備

何はともあれ、node をインストールする必要があります。
node.js は頻発にバージョンアップがはいるため、nvm で管理しましょう。

勉強をするためのアプリケーションを作れるようになりましょう。

Create React App は手軽に開発環境をつくれると同時に、
React開発のベストプラクティスがたくさんつめこまれています。

エディタは自由なのですが、有望なフレームワークのほとんどがVSCodeをサポートしている状況なので
慣れておくと有意に習得が進みます。

まずは React の基本である State, Props, Event を下記のチュートリアルで体験しましょう。
https://ja.reactjs.org/tutorial/tutorial.html

わからないところは公式ドキュメントやGoogleで調べながらすすめます。

次に現代のスタンダードになりつつある React Hooksを学びましょう。

概要を掴んだら、次は Step.1 のコードを React Hooks に書き直してみましょう。
その過程でわからなくったら公式ドキュメントを読みましょう。
終わる頃には半分ぐらいは理解できるようになっていると思います。

次は TypeScript です。
使うか使わないかはわかれると思いますが、スタンダードになりつつあります。

TypeScript がはじめての人は下記をみてどうゆうものか把握します。5分で読めます。
英語なのでグーグル翻訳にかけると読みやすいです。

大枠掴んだら、React でどう使うのかを下記で把握します。

Typescript の書き方はバージョンアップやユーザのアイディアにより日々進化します。
react-typescript-cheatsheetにそのグッドプラクティスが集まっています。
少し難しくてもこのサイトの内容で覚えtmoraeru

わからないところは react-typescript-cheatsheet を参考にしながらすすめます。

Material UI を学習します。
なぜ Material UIを学ぶべきかという、Material UI のサイトにはExampleが豊富にあり、
そのコードがとても良いからです。

アップデートも頻繁にされており、バージョンアップするたびに Example みてるだけで、
こんな書き方ができるのかと今でも学びがあります。

最初からこういったコードをみておくのは習得の近道だとおみます。

また、css などの書き方も MaterialUIのコードがとても参考になると思います。

その過程でMaterial UI のドキュメントやサンプルコードをたくさんみると思います。
そのなかでよりすすんだ書き方を習得できると思います。