Viteで作成したReact（TypeScript）プロジェクトにEsLintとPrettierを導入する（2022/02）
2022年02月04日 Windows11での情報です。 今回は、Viteで作成したReact（TypeScript）プロジェクトにEsLintとPrettierを導入していきます。 いろいろな記事がありましたが、何をインストールして、どう設定すればいいのか？ かなり混乱したので、記事にまとめておきます。 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 Reactプロジェクト作成 まずはReact（TypeScript）新規プロジェクトの作成からです。 既存のプロジェクトにEsLintを導入するとエラーで真っ赤になって心が折れちゃうので、新規プロジェクトにEsLintを導入します。 Viteで作成しています。 （create-react-appで作成している場合は導入方法が違うのかもしれません。） Viteで
React: React Router v6 でルーティングする step１
2022年01月28日 Windows11での情報です。 今回はReactでのルーティングについてです。 ルーティングとはリクエストされたURLに応じて処理を振りわけることです。 Reactでルーティングを実装するには、React Routerライブラリを利用するのがスタンダードなようです。 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 React Router v6 React Router は現在の最新はv6です。 v5とは書き方が変わったようですので、検索する際はバージョンの確認が必要です。 公式サイト React Router v6 をインストール まずはReact Routerをインストールします。 vscodeのターミナルで下記のコマンドを実行し
React:React Router v6 で 認証されていないユーザーや権限がないユーザーをリダイレクトする
2022年02月02日 Windows11での情報です。 今回は、React Router v6 で 認証されていないユーザーに見せたくないページや、権限がないユーザーに見せたくないページにアクセスされた場合、ログインページなど指定のページへリダイレクトする方法です。 参考にしたのはコチラ React Router v6 の基本的なルーティング方法についてはコチラで記事にしました。 React: React Router v6 でルーティングする step１ React: React Router v6 でルーティングする step２ 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 プロジェクト作成 ビルドツールViteを使用してプロジェクトを作成しています。
Vite+React+TypeScriptで、CSSスタイルについて調べて、Emotionに流れ着いた
React調べること多すぎ・・・🤯 今回はReactのCSSスタイルついて調べてみました。 まとめ いきなりまとめです。 ReactのCSSスタイルについての結論 これといった正解はない。 将来どうなるかはわからない。 今のメンバのスキルセットで、使いたいものを使えばいいんじゃないだろうか？ ということで、React（Vite + TypeScript）のCSSスタイルについて調べて、Emotionに流れ着いた経緯と、Emotionの導入方法についての記事です。 主要なもの 2022年2月24日時点で、ザクっと調べた主要なものです。 マイナーなものを含めるともっとありますが、今回は主要な以下の8つから選択します。 Inline Styles Css Modules Styled JSX Styled Components Emotion Linaria Tailwind CSS Wind
React ＋ MUI: 数値入力とマスク入力 に react-number-format が、かなりオススメ！
Reactで MUI(v5) + React-hook-form + yup で入力フォームを作成しています。 今回は 3桁区切りや小数点以下の入力をサポートした数値入力用のコンポーネントと、マスク入力用のコンポーネントが必要になったのですが、MUI には 数値入力用のコンポーネントやマスク入力コンポーネントがありません。 そこで react-number-format ライブラリを試してみたのですが、かなりオススメだったので紹介したいと思います。 数値入力用、マスク入力用のコンポーネントを扱うライブラリ 数値入力用のコンポーネント、マスク入力用のコンポーネント を扱っているライブラリとして、react-number-format のほかに react-imask があります。 たぶん他にもいいライブラリがあると思いますが、今回はこの2つから選びました。 react-imask npm t
React＋MUI v5 の 入力フォーム用のライブラリは React Hook Form の 一択
今回は React(Typescript) + MUI(v5) の フォームライブラリをどれにしようか調査しました。 入力フォーム用のライブラリ React の入力フォーム用のライブラリをどれにするか？ 2022年03月22日時点で主要なもの、だいたい以下の3点のようです。 Formik React Final Form React Hook Form React Hook Form に決めた経緯 まずは npm trends で比較してみます。 人気順は Formik > React Hook Form > React Final Form のようです。 1. Formik npm trends を確認すると、一番人気があるライブラリです。 ただし、他の2つのライブラリと比較して、レンダリングが多くパフォーマンスに劣るようです。 現在あえて選択することはないかと思うのでパスします。 パフ
React: アプリ内のエラーを全部まとめて処理する（react-error-boundary）
はじめに 前回は、「Error Boudary」を使用したエラー処理方法について調べました。 React: アプリ内のエラーを処理する（Error Boundary） このError Boudaryコンポーネントは、クラスコンポーネントで定義する必要があり、関数コンポーネントとして作成できません。 また、イベントハンドラでのエラーや、非同期処理でのエラーが処理できません。 そこで、コンポーネントでのエラーやイベントハンドラでのエラー、非同期処理でのエラー、全部まとめて簡単に処理できるError Boudaryのラッパー「react-error-boundary」について調べてみました。 環境 Windows11 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-error-boundary: v3.1.4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React: React Router v6 でルーティングする step２