category / React

React

【React】『JSX expressions must have one parent element.』というエラーを解消する

React で JSX の作成をしていると、 『JSX expressions must have one parent element.』というエラーが発生します。 これは、return の中身に 2 つの親要素があるため、…

続きを読む
2022年07月04日1 分
React

【React】配列の順番に合わせて、オブジェクトの内容を動的に表示する

表示したい順番が入っている items.json と表示したい内容が入っている data.json があります。 items.json data.json items の順番通りに、data の内容を React で表示したいと考えています。 まずは、items を map…

続きを読む
2022年07月03日1 分
React

【React】Reactでボタンをクリックすると、内容が表示されるアコーディオンを実装する

Reactでボタンをクリックすると、内容が表示されるアコーディオンを実装します。 まずは、アコーディオンで表示するタイトルと内容を配列で作成します。 return 内に、 ul タグを作成します。 ul の中で menus を map で展開します。 map の中で li…

続きを読む
2022年06月30日3 分
React

【React】Suspenseでデータ取得中に、Loading…を表示する

Suspense を使うと、データ取得中にスピナーや Loading…などを表示することができます。 JSON Placeholder( https://jsonplaceholder.typicode.com/ )からデータを取得中に、Loading…

続きを読む
2022年06月29日1 分
React

【React】React18の新機能である自動バッチを試す

React18では、自動バッチ機能が搭載されました。 React17までは、promiseやsetTimeout、イベント内の更新でバッチ処理がされていませんでした。 例えば、React17で以下のコードを実行し、一回ボタンをクリックすると、 console.logが…

続きを読む
2022年06月28日1 分
React

【React】React QueryでAPIから特定のデータを取得する

前回は、React Queryでキャッシュを設定します。 今回は、React QueryでAPIから特定のデータを取得します。 JSON Placeholder( https://jsonplaceholder.typicode.com/ )からPost…

続きを読む
2022年06月06日3 分
React

【React】React Queryでキャッシュを設定する

前回は、ReactQueryDevtools を使って、React Query の状態を確認しました。 今回は、React Query でキャッシュを設定します。 React Query…

続きを読む
2022年06月05日1 分
React

【React】ReactQueryDevtoolsを使って、React Queryの状態を確認する

前回は、React Queryを使って、APIを取得しました。 今回は、ReactQueryDevtoolsを使って、React Queryの状態を確認します。 まずは、 react-query/devtools から ReactQueryDevtools…

続きを読む
2022年06月04日1 分
React

【React】React Queryを使って、APIを取得する

React Query を使って、API の取得を管理します。 まずは、React Query をインストールします。 プロジェクトのターミナルで、 npm install --save react-query を実行します。 App.tsx で React Query…

続きを読む
2022年06月01日2 分
React

【React】React Datasheetを使って、ExcelのようなUIを実装する

React Datasheet を使うと、Excel のような UI を実装することができます。 基本的な使用方法 まずは、React Datasheet をインストールします。 プロジェクトのターミナルで、 npm install react-datasheet --save…

続きを読む
2022年05月31日2 分
React

【React】React Router V6で、ページごとのレイアウトを変更する

ダッシュボードのレイアウトを使用しているプロジェクトがあるとします。 ログイン画面では、ダッシュボードが必要ないので、ログイン画面でダッシュボードのコンポーネントを利用しないようにします。 その場合、React Router の Outlet を使用します。 react…

続きを読む
2022年05月27日1 分
React

【React】Redux Toolkitを使って、簡単にグローバルな状態を管理する

Redux のセッティングは難しいイメージですが、Redux Tookit を使うと、簡単にグローバルな状態を管理することができます。 手順は、ほとんど公式サイト( https://redux-toolkit.js.org/ )を参考にしました。 まずは、React Redux…

続きを読む
2022年05月26日3 分
React

【React】date-fnsを使って、◯分前や◯時間前を表示する方法

SNS の時刻表示でよくある、React で ◯ 分前や ◯ 時間前を画面に表示したい時、どうすればいいでしょうか。 Node.js のライブラリである、date-fns を使って簡単に表示することができます。 まずは、ターミナルでプロジェクトのディレクトリに移動し、 npm…

続きを読む
2022年02月23日1 分
React

【React】React Router DOM v6で画面遷移する方法

React Router DOM を使うと、React で簡単に画面遷移することができます。 まずは、ターミナルでプロジェクトのディレクトリに移動し、 npm install --save react-router-dom を実行します。 現在のバージョンは、6.2.…

続きを読む
2022年02月22日1 分
React

【React】エラー『Uncaught TypeError

前回で作成した BooksGet.js で、『Uncaught TypeError: Cannot read properties of null (reading '0')』というエラーが発生しました。 今回は、こちらのエラーを解消します。 原因は、 useState…

続きを読む
2022年02月07日1 分