React

React

【React/Portal】関数コンポーネントで作るPortalの使い方

モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは R...
React

【GraphQL/Apollo/Jest/React】queryのresultのdataがundefinedになる

GraphqlとReactのテストを書いているときに手こずったことを記録します。 問題 MockedProviderで定義しているはずのuseQuery(useLazyQuery)のresultのdataがundefinedに...
React

【Jest/GraphQL/React】Error: No more mocked responses for the query: mutation

このエラーで何時間も消えていったため、確認事項を記録しておきます。 大体のエラー原因 モック化しているリクエスト、もしくはレスポンスの型や内容が異なっている。 具体的に確認すべきこと 使用するクエリのドキュメントを...
React

【React】マウントとレンダリングとその違い

自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。 マウントとは Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー(DOMコンテナ)への追加を行う処理...
React

【React×TypeScript】コンポーネントをPropsとして渡す方法

コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。 ポイント 指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpr...
React

【React】map関数で作ったリストを並び替え・ソートする方法

map関数で作ったリストの並び替えに苦戦したので、解決方法を記載します。 やりたかったこと 親コンポーネントでstateに格納した配列を、子コンポーネントにPropsとして渡し、それを子コンポーネントで一覧表示にしていました。...
JavaScript

【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた

使用したライブラリ react-paginateを使用しました。 Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそう...
React

【TypeScript×React】childrenの受取を必須にしたい!もしくは拒否したい!

開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…!ってなるとき、たまにありませんか? かなり簡潔ですが、以下のようにすればできます。 必ず受け取るとき ReactNodeを指定します。 ...
React

【TypeScript×React】React.FCとは? その特徴

TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。 最初に見たときは「なんぞや?」と思ったので、基本的な点を説明していきます。 React.FCとは? 略さずに書くと...
React

【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する

SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。 方針 ログイン状態を判断するstateをグローバルで管理するそ...
React

【React】FontAwesomeの使い方(同じ名前のアイコンをインポートする場合もあり)

ReactでFontAwesomeを使いたいときのやり方です。 【事前準備】FontAwesomeをインストールする まず、以下のコマンドを実行してFontAwesomeをインストールします。 インストールするものは5種...
React

【TypeScript×React】React-Modalの使い方

Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。 前提環境 TypeScriptとReactはインストー...
React

【エラー/TypeScript×React】inputが使えない。inputが入ったコンポーネントを返すと読み込まれなくなる。

はまったエラーがあったので記録です! エラーが出たコード <input></input>という形で文字列を囲んでいます。 うまくいった例 これを<input value="" />とすると...
React

【エラーログ/React】Node Sass version 5.0.0 is incompatible with ^4.0.0.

エラー内容 Reactを立ち上げて、ディレクトリを整理しているときに、以下のエラーが起きました。 ./src/styles/style.scss (./node_modules/css-loader/dist/cjs.js??...
React

【React】index.jsxにしたらエラーになる

Reactをインストールして、いざ開発スタート!…となった矢先のあるあるエラーです。 エラー詳細 もともとあったファイル「index.js」を「index.jsx」に変更したら、以下のようなエラーが出て何も表示されなくなりまし...
React

【React】【初心者向け】Reactの始め方・インストール方法

Reactの始め方を説明していきます。 目次にも書いてある4工程でスタートできます。 Node.jsをインストール まずは、Node.jsをインストールしましょう。 Node.jsをインストールするといっても、No...
スポンサーリンク
タイトルとURLをコピーしました