9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React #2Advent Calendar 2020

Day 13

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

Last updated at Posted at 2020-11-26

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

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

step.0 まずは環境準備

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

nvm

nvm for windows の導入方法

Create React Appで勉強環境を構築

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

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

Typescript はこちら
https://create-react-app.dev/docs/adding-typescript/

VSCodeの導入

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

Step.1 React Tutorial の実施

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

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

Step.2 React Hooks

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

React Hooks
https://ja.reactjs.org/docs/hooks-overview.html

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

Step.3

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

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

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

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

React Typescript
https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

Step.2 で作成した Hooks のアプリを TypeScript に書き換える

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

Step.4 Material UI

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

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

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

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

Step3 で作成したアプリを Material UI を使って便利にする。

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

Next Step

  • Redux
  • Styled Components
9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?