Reactの記事

JavaScript

ReactのHooksで動的にwindowサイズを取得する

管理画面などでウィンドウサイズによってサイドバーの開閉を調節したいときにReactのHooksで動的にwindowサイズを取得を取得できたら便利です。今回はReactのHooksで動的に画面サイズを取得し処理を実行する方 […]
JavaScript

JavaScriptでInvalid Dateを判定する

フロントエンドの開発で日付操作にdate-fnsを使用しています。今回日付を年・月・日と別々のselectボックスから選択させて検索をするという仕様でUIを作成していたのですが、この状態ですと存在しない日付を選択できてし […]
JavaScript

LaravelのURLからpublicを消したらReactからのapiリクエストがうまく動かなくなった

Laravel×React(Laravelの中にReactがあるパターン)でアプリを作成しサーバーにアップした際に、ドキュメントルートのpublicを消すために.htaccessを設置しました。しかしなぜかReactから […]
JavaScript

【Laravel×React】サブディレクトリにViteでビルドしたReactアプリをデプロイしたら真っ白になった

ルートディレクトリではなくサブディレクトリにLaravelとReactで作成したアプリをアップした際に真っ白になってしまって詰まったので備忘録を残したいと思います。 環境 詰まった個所 https://example.c […]
JavaScript

React + React Router Dom v6 + Recoilでリロード時もログイン状態を維持する

Reactのログイン認証の状態維持についてハマったので備忘録として残しておきます。バックエンドはLaravelを使用していますが今回はあまり関係がないので取り上げません。 使用技術 React17 React Route […]
JavaScript

VSCodeにViteで設定したresolve aliasを認識させる

Laravel × Reactでの開発においてcomponentをimportする際に、相対パスを書く手間が省くためにエイリアスを設定することがあるかと思います。その際に、コンパイルは通るのにVScode上で以下のメッセ […]
JavaScript

【Laravel9系】 Laravel Sail Viteを使ってReact TypeScriptの開発環境を用意する。

Laravel9系でViteが公式プラグインとして使えるようになったということでReact(TypeScript)の環境をサクッと構築したいと思います。 環境 Laravel 9x React 18x Vite 3x L […]
JavaScript

WordPressのWP REST APIとNext.jsのSSGでサイトを作る

ReactとTypeScriptの学習も兼ねてWordPressのWP REST APIとNext.jsのSSGモードを利用した簡単な当ブログの記事一覧を作成しました。CSSはTailwind.cssでホスティングはVe […]