React|省略タイトル

magazine off

firebase(firestore)でページネーション作る方法 React を使った無限スクロールの解説 [Next.js]

   firebase(firestore)でページネーション作る方法を解説します。   ページネーションは、「進む」と「戻る」ボタンがあるものですが、   今回…

ReactとTypeScriptでフォームのバリデーションを自作した話 | React Hooks

 ReactとTypeScriptでフォームのバリデーションをするとき、何か良い方法はないかなと検討をしていました。 React Form Hooksというnpmを使うと良いみたいな話も聞いたのですが…

reactで背景画像がurl is not definedとなるとき

   ReactでCSSの中で背景画像を指定して表示させようとしたのですが、うまくいきませんでした。   その時のコードとしては、こんな感じ。   heroCon…

React hooksでメモ化を説明してみる

  React Hooksは、ほとんどすべての面で私たちの生活を豊かにしてくれます。しかし、パフォーマンスが問題になってくると、少し厄介なことになります。Hooksを使って超高速なアプリケーションを書…

ReactのuseMemoフックを簡単な例で理解する

  React Hooksを使うと、副作用や状態管理を備えた、無駄のない軽量で再利用可能な機能的コンポーネントを書くことができます。 この記事では、フックの概念や、より一般的な useState/u…

ReactでuseMemoを使うとき、使わないとき

  useMemoとは?   useMemoは、Reactが提供するフックの一つです。   このフックを使うと、開発者は変数の値を依存関係のリストとともにキャッシュすること…

React.useCallback()を使うとき、使わないとき

  どんな状況であっても、すべてのコールバック関数を useCallback() の中に入れることに関して少し考察したい。   import React, { useCallback }…

Reactと Firebase Realtime Databaseでデータを取得する方法 Next.js

    本日の記事では、Reactを使って、Firebase の Realtime Databaseからデータを取得する方法を解説します。   ちなみに、ReactはNext…

react-datepickerでバリデーションする方法

  react-datepickerを使うと、簡単にデータピッカーを作ることが出来ます。   今回の記事では、react-datepickerでのバリデーションを紹介します。 &nbs…

ReactでPrettierを導入してVSCodeでファイル保存したら勝手に整形されるようにする、そしてESLintのコード整形は停止する

  VSCodeでReactを書いてたのですが、コードの自動整形を導入してみたいと思います。   コードの整形にはPrettierとESLintがあるのですが、ESLintはコードの整形…

ReactのuseMemoとは?shouldComponentUpdateを学び理解してみた。

     本日の記事では、useMemoとshouldComponentUpdateについて解説します。   Hooksでは、shouldComponentUpda…

なぜコードは完全なDRYであってはならないのか? | モイストコード

  開発者なら誰でも、どこかで「ドライコード」という言葉に出会うことがあるでしょう。   これは、「Don't repeat yourself」の頭文字をとったDRYに由来します。 &…

node.jsのAPIで画像を受け取る方法 | fetch , React

  やったこと   フロント側をReactで作ってて、JavaScriptの fetchを使ってフォームデータをpostでapiに飛ばします。   それで、apiでフォーム…

ReactとTypescriptでselectタグを独自コンポーネントに変える方法

  この前『Reactでselectタグの代わりにドロップダウンを作る方法』というのを書いたのだが、   [blogcard url="https://off.tokyo/blog/re…

Reactでselectタグの代わりにドロップダウンを作る方法

  htmlのselectタグとoptionタグで、特にoptionタグはブラウザに依存しててcssを適用してリッチなドロップダウンを作るのは結構大変です。   多くの場合、無理やりop…

Redux Sagaのコンセプトを短いコードで解説! React

   [st-kaiwa1] 本日は、Redux Sagaのコンセプトを短いコードで解説する記事を書きます。 [/st-kaiwa1]   sagaとは? &…

Firebase + React で学ぶUdemy動画教材おすすめ 【初心者向け】

    [st-kaiwa2] Firebase や Reactを効率的に学べる動画教材を知りたい! [/st-kaiwa2]   このような方におすすめのUde…

Nuxt.js + React で学ぶUdemy動画教材おすすめ2選 【初心者向け】

    [st-kaiwa2] Nuxt.js や React を効率的に学べる動画教材を知りたい! [/st-kaiwa2]   このような方におすすめのUde…

Reactでfirebaseを使ってGitHubログインをする方法

  前提条件   nextjsのプロジェクトでTypeScriptを導入 [blogcard url="https://nextjs.org/learn/excel/typescrip…

ReduxでuseSelectorとuseDispatchを短いコードで覚える | React チュートリアル

    React Reduxは、既存のconnect()高次コンポーネントの代替としてHooksのセットを提供しています。   これらのHookは、connect()でコン…

Reactアプリケーションの構造化 – Atomic Designの原則

  僕がプログラミングを始めたばかりの頃は、   デザインパターンやファイル構造といった抽象的なプログラミングの概念がどのようなもので、   なぜそれが重要なのか、まったく…

componentDidUpdateをuseEffectで書き換える方法

  Reactは、仮想DOMなど、いくつかの重要なコンセプトをフロント開発にもたらしました。   これにより、私たちは常にコードを改善し、より保守性の高いアプリケーションを作ることができ…

ReactでImmerを使う方法 | Immutable Statesのシンプルな使い方

    こんにちわ。   最近Reduxを勉強してるんですが、Reduxの思想は、Immutabilityを徹底して、状態変化を追跡可能かつ予測可能な状態にすることです。 …

useStateで現在のステートをsetState(current => ({ …currentで取得できるのを初めて知った

  ReduxのImmerの勉強をしていたら、こういうコードを見ました。 [blogcard url="https://blog.bitsrc.io/using-immer-with-react-a…
次へ