仕事でReactを触ることになりそうだったので、チュートリアルをやってみた
結果、感じたこと、気づいたことをメモする
環境
OS：Mac（M1）
エディタ：VS Code
最終的なアウトプット
やる前の状態
知識
- HTML,CSSはちょっと触ったことある、JavaScriptは業務で1年ほど使用しているという状態
- Reactについては、ほぼ知らない。hooksという機能があること、Vue.jsと比較されがちなことを知っているくらい
気持ち
- 普段、バックエンド開発しかしていないので、フロントのフレームワーク触るのちょっとドキドキする
- とりあえず公式が丁寧にステップを刻んでくれているので、丁寧にコミットしていくことを心がけたい（普段の業務でもやりたいこと、、）
やった後の状態
知識
- コンポーネント単位での開発ってこんな感じなのか、というのがぼやっとイメージついた
- コンポーネント間での状態受け渡しの流れについて、ぼやっとイメージがついた
気持ち
- 2,3時間程度でサクッとできるのはいいな、と思った
- 「とりあえずReactを触れたぞ！」という気持ちになったw
- フロントわからない、、怖い、、という気持ちは薄れた
- 疑問がいくつか出てきた
- hooksはどこでどう使うんだ？
- CSSはどう書くといいんだろう？ ピュアなCSSを書く感じなのか？
- このチュートリアルをやったら、Reactの機能を一通り知れる訳ではなさそう
その他やってる最中に思ったこと
- 環境構築ほぼいらない。楽だ
- 自分の環境だと一度も詰まらなかった
- 最悪、ブラウザでも実行できるので簡単にチャレンジできる
- HTML, CSSの知識はほぼいらない。触りを知っているだけでもやれる
- コードの書き方についてのフォローが地味にいい
- イミュータブルにすることの大切さを丁寧に伝えてくれていたり
- ちゃんと三項演算子使って書くようにしていたり
-
React Developer Tools 便利そう。コンポーネントの構造が見れる
まとめ
サクッと「Reactってのにとりあえず触ってみたいぜ！」「フロント怖いからちょっと慣れたい、、」みたいな期待値で触るのにちょうど良いものだと思った
一方で、実際に開発するというところとのギャップは色々ありそうなので、チュートリアルをやっただけで「React触られるぜ！」みたいな感じになるかというとそうではなさそう
とりあえず自分はもうちょっと理解を深めるために以下あたりやっていこうと思った
-
公式ドキュメント
- なんだかんだ公式読むのが良さそうなので、読んでみる
-
Next.jsチュートリアル
- React を学びたいなら Next.js チュートリアルがおすすめ。という記事もあるし良さそう
-
TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発
- しっかり学ぶならやっぱり本を読んで手を動かして、だと思うのでやる