Reactに入門する

私はフロントエンドの開発経験があまりありません(2022/9現在)。経験で言うと以下です。

新卒の会社でHTML/JavaScript/CSSの研修を受け、業務で僅かにJavaScriptで書かれたロジックの修正

ERB(HTMLとRubyが書ける)のコード編集

プライベートでVue2を使ってメモアプリの作成

フロント側のテストコードが無く、雰囲気で作った、というのが正直なところ

GCPのCloudSQLを使っていたが、月々の料金が高かったため、Scrapboxに移行した

それでは、Reactへ入門したいと思います。以降はメモです。

「オプション 2: ローカル開発環境」

JavaScript のクラスでは、サブクラスのコンストラクタを定義する際は常に super を呼ぶ必要があります。constructor を持つ React のクラスコンポーネントでは、すべてコンストラクタを super(props) の呼び出しから始めるべきです。

React DevTools を使えば React コンポーネントの props と state を確認できます。

React では、イベントを表す props には on<Event> という名前、イベントを処理するメソッドには handle<Event> という名前を付けるのが慣習となっています。

React における関数コンポーネントとは、render メソッドだけを有して自分の state を持たないコンポーネントを、よりシンプルに書くための方法です。

動的なリストを構築する場合は正しい key を割り当てることが強く推奨されます。

key はグローバルに一意である必要はありません。コンポーネントとその兄弟の間で一意であれば十分です。

React は setState で直接指定されたプロパティのみを更新しほかの state はそのまま残す

読んだ記事・本

りあクト！ TypeScriptで始めるつらくないReact開発第4版【① 言語・環境編】

しかし、現状はreduxのstoreでフォーム値を管理するのは非推奨 👉 関連 React Hook Form 入門(Qiita)

読むドキュメント・本

次「レンダープロップパターン」から

りあクト！ TypeScriptで始めるつらくないReact開発第4版【② React基礎編】

りあクト！ TypeScriptで始めるつらくないReact開発第4版【③ React応用編】