プログラミングReactプロジェクトでreact-router-domを使ってSignIn/SignUp/Home画面を制御する。
当該記事のサンプルコードはこちら(Github)。 アプリはこちら(Outlet-Test) Reactのページ遷移はreact-router-domを使ってやる ユーザー登録をして、何かサービスを行うアプリには、SignIn/SignUp...
React
プログラミング
プログラミングReactのプロジェクトで環境ファイル(.env)の定義の読み込み方
Reactのプログラムを作っていた時、あるメソッドのプロパティにURLを設定する必要が出てきました。 そのとき、 コードにURLを”べた書き”するは嫌だな… と多くのエンジニアは思うでしょう。 なぜなら、今は開発中のプログラムは今はloca...
プログラミングVS Codeの拡張機能REST Clientを使った時に「connect ECONNREFUSED 127.0.0.1:(ポート番号)」のエラー発生について
REST Clientは、VS Code上でRest APIのレスポンスを確認できるVS Codeの拡張機能。 マーケットプレースで「REST Client」を検索して、REST Clientのページでインストールするか、VS Codeの拡...
プログラミングReactプロジェクトで画像にマウスオーバーしてポップアップを出す方法
「画像にマウスオーバーするとポップアップが出る」ということを実現する方法は何通りかあると思います。 この記事ではReactのcreatePortalを使用して、画像にポップアップを出す方法をご紹介。 プログラムの概要 表示された画像にマウス...
プログラミングReactのプロジェクトでsrcフォルダにある画像を読み込む
Reactのプロジェクトでsrcフォルダに保存しておいた画像ファイルが読み込めない! という場面に出くわい焦ったので、その対処を備忘録として残しました。 画像が表示されない Reactプロジェクトでsrcフォルダにある画像を出力しようとした...
プログラミングchakra uiでReactのプロジェクトをスタイリングしてみよう
Reactのスタイリングをするためのライブラリには、二種類あって コンポーネントタイプ クラスで定義するタイプ といった感じです(このタイプの呼び方は私が考えたんで、別の言い方があるかもしれませんが)。 前者はchakra ui、Mater...
プログラミングreact-iconsの使い方
react-iconsには、さまざまなiconが用意されています。 これを使わない手はないと思い、その使い方をご紹介。 react-iconsのドキュメント react-iconsのドキュメントはこちらです。 VSCodeなどを使っていれば...
プログラミングReactの特定コンポーネントだけに適用するCSSを作りたい(css in js)
Reactのコンポーネントってとっても細分化されますよね。 それに、ある特定のCSSを適用させたいときには、「そのコンポーネントのタグだけに適用させたい」と考える場面は当然あるでしょう。 ということで、特定コンポーネントだけに適用できる『c...
マーケティングReactプロジェクトにおいてGoogleユーザーでFirebaseへの認証を実装する
ReactプロジェクトにおいてGoogleユーザーでFirebaseへの認証を実装するための具体的なコードのご紹介。 Firebase SDKはV9を使用しています。 Firebaseに認証を設定する方法はこちらから。 ファイル構成 とりあ...
プログラミングReactからFirebaseにアクセスするための環境設定
ReactのプロジェクトからFirebaseにアクセスするための設定方法をご紹介。 Firebaseにアクセスするための環境情報の設定 .env.localファイル プロジェクトのトップディレクトリ配下に「.env.local」ファイルを作...