Webpack についてまとめました。 この記事は以下の構成になっています。 Webpack とは Webpack のインストール webpack.config.js バンドル モード ローカルサーバー ソースマップ Babel の設定 CSS の設定 Webpack とは Webpack は、JavaScript におけるモ…

React でフォームを扱うためのライブラリである react-hook-form についてまとめました。 この記事は以下の構成になっています。 react-hook-form とは react-hook-form を使わずにフォームを実装する react-hook-form を使う手順 パッケージをインストール …

りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【③ React 応用編】を読んで学んだことをメモしておきます。 りあクト！は 3 作あり、3 はルーティングや Redux、非同期処理や副作用などの React の応用的な知識について触れられています。 …

りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【② React 基礎編】を読んで学んだことをメモしておきます。 りあクト！は 3 作あり、2 はフロントエンドの歴史や、React の基本的な知識について触れられています。 学んだこと 5 章 JSX JSX…

りあクト！ TypeScriptで始めるつらくないReact開発 第2版【① 言語・環境編】を読んで学んだことをメモしておきます。 りあクト！は3作あり、1は主にReactの環境構築やJavaScript、TypeScriptの知識について触れられています。 学んだこと まえがき React 固…

React の再レンダリングと、不要なレンダリングを防ぐ方法についてまとめました。 この記事は以下の構成になっています。 再レンダリングとは 再レンダリングが発生タイミング 不要なレンダリングを防ぐ方法 memo useCallback useMemo どこまでメモ化すべき…

React のグローバルな値を扱う hooks である useContext についてまとめました。 この記事は以下の構成になっています。 useContext とは useContext を使う手順 createContextを使って、コンテキストを作成する Provider を作成する Provider のvalueに値を…

React の state を扱うフックである useState についてまとめました。 この記事は以下の構成になっています。 useState とは state とは useState の使い方 state と再レンダリング useState の使用例 フォームの入力を扱う prevState を使う 子コンポーネン…

React の 副作用を扱う hooks である useEffect についてまとめました。 以下の構成になっています。 useEffect とは 副作用とは コンポーネントのライフサイクル レンダリングとマウントの違い ライフサイクルメソッド useEffect の書き方 初回マウント時 …

udemyのReact完全入門ガイドを視聴したので、新しく学んだことをメモしました。 React完全入門ガイド 4 章 React に触れる package.jsonのstartは開発環境でサーバーを動かすコマンド package.jsonのbuildは本番環境用にビルドするコマンド package.jsonのej…

React での CSS の適用方法についてまとめました。 この記事は以下の構成になっています。 インラインスタイル CSS を別ファイルにしてインポートする CSS Module CSS-in-JS CSS フレームワーク コンポーネントライブラリ インラインスタイル インラインスタ…

Create React App で React の環境構築を行う方法という記事を書いたので、今回は Create React App を使わずに一から環境構築を行う方法についてまとめました。 この記事は以下の構成になっています。 必要なパッケージ・ツール 完成系のディレクトリとファ…

Web アプリの設計手法である MPA と SPA についてと、 Rails ・ React での SPA の簡単な実装をまとめました。 理解すべきことは以下です。 MPA と SPA それぞれの特徴 MPA と SPA それぞれの構造 MPA と SPA それぞれを実装するために必要な技術 MPA と SPA…

React のプロジェクトを作成する時に使う Create React App についてまとめました。 この記事は以下の構成になっています。 Create React App とは Create React App が行うこと Create React App でプロジェクトを作成する 開発環境 本番環境 テスト Create…

React のクラスコンポーネントと関数コンポーネントについて書き方やそれぞれの比較したメリット・デメリットをまとめました。 以下の構成になっています。 コンポーネントとは クラスコンポーネント クラスコンポーネントとは 基本の書き方 ライフサイクル …