ryoのぼやき

技術についての学習内容のまとめです。

【React Hooks】【TypeScript】公式チュートリアルからのReact入門

React.js TypeScript

はじめに

僕は今までフロントエンドでは、Vue.jsを主に使ってましたが、 複数のフレームワークを知っていた方が結局は、 個々フレームワークについてもより深い理解ができると思い、 Reactの学習を始めてみました。

Vue3でComposition APIが導入されTypescriptが使いやすくなったので、 既に広くTypescriptと組み合わせて使われているReactも知っておきたかったというのも動機の１つです。

ゴール

ひとまず次のようなゴールを設定しました。

  • 基本的なReactの考え方、書き方が分かる
  • React Hooksの考え方、書き方が分かる
  • Reduxの考え方、書き方が分かる
  • Typescriptを使ったReactの書き方が分かる

進め方

公式ページにチュートリアルがあったので、まずはそのチュートリアルでReactの基本を学習し、 そのままそのチュートリアルで使ったプロジェクトを使って Hooksなども学んでいきました。

チュートリアル：React の導入 – React

具体的には次のような感じで進めました。
1. チュートリアルに従ってReactでオセロゲームプロジェクトの作成
2. コンポーネントごとにファイルを分割
3. Styled Componentを導入
4. クラスベースのコンポーネントを関数コンポーネントに変更し、Hooksを導入
5. Typescriptを導入


※チュートリアルのプロジェクトだと、Reduxの使いどころが見えなかったので、
このプロセスでReduxの学習するのはいったん諦めました。

1. チュートリアルに従ってReactでオセロゲームプロジェクトの作成

このステップは、チュートリアルを読みながら手を動かしていました。
開発環境を立てる他に、ブラウザ上で実行していく手順も書かれてましたが、
プロジェクトの構成やVscodeでの書き心地も知りたかったので、 開発環境を立てる方法で進めていきました。
チュートリアル：React の導入 – React

このチュートリアルを通して次のようなことを知ることができました。

  • クラスを使ったコンポーネントの作成方法
  • ReactDOMによるレンダー方法
    → Vue2.xと同じで、指定したコンテナの子要素としてレンダーするみたいです
  • React Devtoolsを使ったコンポーネントごとの状態の見方
  • Propsの使い方やJSX記法

2. コンポーネントごとにファイルを分割

チュートリアルだと、index.js１つのファイルにすべてのコンポーネントを書く形だったので、 コンポーネントごとにファイルを分割していきました。
３つのコンポーネントのみだったので、大きな作業ではありませんでした。

3. Styled Componentを導入

１つのCSSファイルによるスタイリングになっていたのを、
コンポーネントごとにスタイルを当てるために、 Styled Componentというライブラリを入れました。

次のような部分で少し躓きました。

4. クラスベースのコンポーネントを関数コンポーネントに変更し、Hooksを導入

チュートリアルでは、クラスによるコンポーネント作成が主だったのですが、
関数型コンポーネント（状態を持たないコンポーネント）に変更していきました。
そしてそれに伴い、React Hooksを導入しました。
コンポーネントに状態を持たせないようにして、thisを使わないようにする考え方はここらへん始まってるんですかね。

5. Typescriptを導入

初めにTypescriptを入れてしまうと、純粋なReactへの理解の妨げになる恐れがあったので、 最後のステップに持ってきました。
既に多くのTypescript × Reactのプロジェクトが普及してることもあり、 大きな躓きなく型付けを行うことができました。

全体を通しての感想

1日使ってチュートリアル＋αでReactを使ってみて、
雰囲気はつかむことができました。
ただ、Reduxは試せなかったり、React特有の辛みみたいのも今回は分からなかったので
次はもう少し大きめのプロジェクトを作ってみて、そこらへんの理解もできたらなと思います。

ちなみに、今回使ったチュートリアルのレポジトリはこちらです。
GitHub - ryo-gk/react-tutorial-ts ※命名など雑な箇所がある点はご容赦ください。