目次 CSS Modulesを使用したCSSの設定方法 サンプル CSS Modulesを使用したCSSの設定方法 CSS Modulesを使用する際には、特別なライブラリをインストールするなどは必要ありません。 「index.tsx」と同じ階層に「index.module.css」のファイルを作成してくだ…

目次 事前準備 ライブラリインストール ソースコード 事前準備 スライダーに表示したい任意の画像を３種類用意して、「img.png」「img1.png」「img2.png」として、ソースコードと同じディレクトリに格納する。 ライブラリインストール 以下のコマンドを実行…

目次 はじめに TextFieldのdatetime-localタイプに初期値を設定する方法 日付のフォーマットを変換 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com TextFieldのdatetime-localタイプに初期値を設定する方法 以下のよ…

目次 はじめに datetime-localタイプで秒を表示する方法 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com datetime-localタイプで秒を表示する方法 以下のように、「inputProps」に「{ "step": 1 }」を設定する事で、…

目次 App.tsx Error404Page 遷移方法 App.tsx SPAとして、App.tsxを作成します。 以下のサンプルは、「/hoge」のページのみを用意していますが、こちらは任意でカスタマイズしてください。 Error404Pageは後述しますので、そちらのパスに修正してください。 …

目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Link ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 リンク表…

目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/TextField ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 テキ…

目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Button ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 ボタン…

目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button onClick={() => {console.log('ボタン押下')}}> ボタン </button> ); }; export default Button; このコンポーネントは以下…

目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button> ボタン表示タイトル </button> ); }; export default Button; このコンポーネントは以下の様に呼び出します…

目次 完成したテーブル テーブルのコンポーネント作成 テーブルコンポーネントを使用 ソートの方法 フィルターの方法 完成したテーブル 本記事のコンポーネントでは、以下の画像のテーブルが作成できます。 テーブルのコンポーネント作成 以下、「CustomTabl…

目次 React v17以前 React v18以降 React v17以前 React v17以前では、以下のサンプルのように「VFC」を使用してPropsを渡していました。 また、初期値などのdefaultPropsで設定していました。 import React, { VFC } from "react"; import styles from "./i…

目次 はじめに nginxの設定 はじめに ReactでSPAの任意のWebアプリを作成します。 ローカルホストでは、ブラウザリロードなどを行っても正常に機能しますが、nginxのサーバーにデプロイした際に404エラーが発生する場合の解決方法を記載します。 nginxの設定…

目次 はじめに 環境毎のWebPackを修正する 環境毎のCSSを作成する 定義したCSS定数を読み込む CSS定数を使用する方法 はじめに 以下の記事を参考に、環境定数を用意してください。 https://reigle.info/entry/2022/08/20/100000reigle.info 環境毎のWebPack…

目次 インポートのエイリアス化とは WebPackのエイリアス定義 TypeScript用のエイリアス定義 インポート ディレクトリのエイリアス ファイルのエイリアス インポートのエイリアス化とは 階層が深くなっていくと、importする際に「../../../../Hoge」のような…

目次 はじめに 難読化 難読化とは 難読化しない方法 難読化する方法 ソースマップ ソースマップとは ソースマップを表示する方法 ソースマップを表示しない方法 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既…

目次 はじめに 環境毎のWebPackを修正する 環境定数をプロジェクト内で使用出来るようにする 環境定数を使用する はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトに環境毎のWebPackを用意してください。 既にプロジェクトがある場合は…

目次 はじめに package.jsonで環境を定義する WebPackの修正 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既にプロジェクトがある場合は、適時読み替えてください。 reigle.info package.jsonで環境を定義する…

目次 はじめに Dockerの本番環境用意 package.jsonの内容を修正 webpack.config.jsの出力先指定 ビルド実行 ビルド後のファイルをローカルで実行 サーバーへのデプロイ はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してくださ…

目次 事前準備 WebPack 完成 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了している前提で本記事を記載しています。 まだの方は、以下から進めてください。 React(TypeScript)プロジェクトの作成…

目次 事前準備 Prettier ESLintの設定修正 コマンドでPrettierの整形を行う VSCodeでPrettierを実行する Prettierのルール設定 Prettierの除外ファイル スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が…

目次 事前準備 ESLintの組み込み ESLintの設定ファイルに任意の設定を行う コマンドでESLintのチェックを行う VSCodeでESLintのチェックを起動する スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了…

目次 前提 Reactのプロジェクト作成環境の用意 Reactプロジェクトに「TypeScript」の設定をしてプロジェクト作成 Dockerの組み込み 「docker-compose up」でエラーが出た場合 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 前提 N…

■はじめに ここでは、「react-tabs」というライブラリを使用してタブを作成します。 こちらの公式サイトに書かれているような物が作成できます。 ■手順 以下のコマンドで「react-tabs」をインストールしてください。 npm install react-tabs ソースコードの…

■はじめに ReactとDockerの環境構築は完了している前提で記載します。 まだの方は、それぞれの環境構築を行ってからご覧ください。 ■手順 以下のコマンドを実行し、Reactプロジェクトを作成します。 create-react-app dockersample 以下のコマンドを実行し、…

■はじめに 以前、「ボタン押下時にテキストの値を取得する方法【React】」でテキストの変更時処理で変数に値を保持して操作していました。 ここでは、オブジェクトを取得することで、必要な時に最新の値が取得できるようになります。 どちらが良いかは、好み…

■はじめに 前回の記事の「定数クラス」に環境毎に分けた定数を定義する方法を記載します。 APIの向き先などで使用することはあると思います。 ■手順 プロジェクトは「create-react-app」を使用して作成しておいてください。 ※そうすることで、環境を分ける定…

■はじめに 「render」から呼び出すと複数回呼び出されますが、画面読み込み後に「1回だけ呼び出したい」場合の書き方を紹介します。 APIでデータを取得したい場合や、DOMを書き換えたい場合には、ここで処理する方が良いと思います。 ■手順 ソースコードの全…

■はじめに 実際にシステムを作る際には、RestAPIの実行は必須と言って良いほど、使用します。 ここでは、「axios」を使用したRestAPIの実行方法を記載します。 ■手順 axiosをインストールするために、以下のコマンドを実行する npm i axios App.jsのソースコ…

■はじめに データの保持方法は色々とありますが、ここでは「ローカルストレージ」の使用方法を記載します。 ■手順 ボタン押下時に、データの取得、設定、削除を行うサンプルの全量（App.js） ※確認は、「F12」を押して、コンソールを開いて確認してください…