reactで作る todo アプリ 4/4｜TANALIB
この記事では、図で示したような ToDo アプリの開発手順について全 4 部構成で詳しく解説しています。React の基礎から応用までを実際のコーディングを通じて学ぶことに焦点を当てています。初心者から中級者向けの内容となっており、ToDo アプリの開発は、実践的な技能の習得とポートフォリオ作成のための具体的な例として最適だと考えています。 この第 4 部では、Firebase による認証機能の実装を行います。 想定読者 react の初学者から中級者 react を触ったことはあるが、なにかポートフォリオ的な物を作りたい人 記事構成 ToDo アプリの概要と開発環境の構築 json-server の導入とレイアウトの定義 ToDo アプリの機能と API リクエストの実装 Firebase による認証機能の実装 Firebase Authentication とは Firebase Au
Create React Appは役割を終えました
長らくReactの入門キットとして使われてきたCreact React App（CRA） 2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。 標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。 とりあえず試してみる まずは現状確認のために実際にプロジェクトを作ってみます。 $ npx create-react-app cra --template typescript Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scr
React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。 - Qiita
はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ
OpenAPI定義からReactのクライアントコード生成ツールにOrvalを採用した｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
こんにちは。エンジニアの牧田です。 先日から新規のプロジェクトでReactを書いていたのですが、その時にOpenAPI定義からReactのクライアントコードを生成するツールについていろいろと調査したので、今回はその紹介をしたいと思います。 結論としては、Orval を採用してみることにしました。 背景 スキーマ駆動開発はいいですよね。最近ではだいぶ浸透しているように感じます。スキーマ駆動開発には多くのメリットがありますが、開発者としてはやはりフロントエンドとバックエンドそれぞれの型定義が自動生成で一致するので安心感があります。 今回はスキーマとしてOpenAPIを使うという前提で話をしていきます。スキーマ駆動開発をする際の悩みどころとして、コード生成ツールとして何を使うかという問題があると思います。今回はフロントエンドに絞って実際に使用したツールを紹介しようと思います。 さまざまなコード生
React Profilerを使ってみよう | ELW株式会社
Reactでは、Reactの思想に従って正しくコンポーネント実装をしないと、不要な再レンダリングが走りがちです。そのために勉強としては、https://react.dev/learn を読むのが重要となります。その一方で、推測しないで計測せよという言葉があるように、実際の実装結果を測定するのも重要となります。 そこで今回は、React Developer Toolsのprofilerについて紹介します。profilerを使用することで、各コンポーネントのレンダリング頻度や時間等、パフォーマンスを計測することができます。Google Chromeでprofilerを使用するには、はじめにReact Developer Toolsをインストールします。 プロファイリングプロファイリングが開始されると、profilerはアプリケーションがレンダリングされるたびにパフォーマンス情報を自動的に収集し
<div/> のレンダリングから始める React 学び直し
React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App
バックエンドエンジニアのための「React の仕組み」の理解方法 - めもめも
何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニアにわかりやすい形で React の仕組み（メンタルモデル）をまとめてみました*1。 ブラウザの画面に描画される個々の要素を「コンポーネント」と呼ぶ。 自分で定義したコンポーネントを HTML タグを使って表示することができる。 コンポーネントは関数として定義する。この関数は、HTML タグで指定された時の属性値を受け取って、コンポーネントを実際に描画する HTML の塊（React 要素）を返す。（つまり、コンポーネントを指定した HTML タグが、コンポーネントからの返り値の React 要素で置換される。） Javascript の関数はクロージ
debounce と throttle の React Custom Hooks を実装してみる - もやし丸の備忘録
throttle や debounce は連続して大量に繰り返される処理を間引いて負荷を軽減させたりするときに使います。 今回はそれらの間引き処理を React Hooks で実装してみました。 react-use に useDebounce と useThrottle が実装されているので自前で実装する必要性を感じない方はそちらを使用すると良いと思います。 github.com throttle, debounce とは？ throttle 連続して大量に繰り返される処理を一定感覚で間引く。 scroll イベントでよく使用される。 debounce 連続して大量に繰り返される処理が指定時間内に何度発生しても最後の1回だけ実行する。 resize イベント、インクリメンタルサーチなどで使用される。 実装してみる codesandbox.io 間引く間隔はデフォルト1秒に設定しています。
Build strongly typed polymorphic components with React and TypeScript - LogRocket Blog
In this detailed (and explanatory) guide, I’ll discuss how to build strongly typed polymorphic React components with TypeScript. We’ll cover the following sections: Real-world examples of polymorphic components Chakra UI’s as prop MUI’s component prop Building a simple polymorphic component Problems with this simple implementation The as prop can receive invalid HTML elements Wrong attributes can
【React】matchMedia で理解する useSyncExternalStore
React の API で、よくわからないしわかる必要性もあんまりない(かもしれない) React Hooks に useSyncExternalStore があります。Redux のように React 外で管理されているステートオブジェクトを React にインテグレートするためのフックということくらいは耳にしたことがあるのではないでしょうか。 そのフックの機能や使い方から主にステート管理ライブラリ開発者向けに用意されていると考えられます。ライブラリ開発者向け API ならアプリレイヤーの開発者には関係ないのではと思われるかもしれません。でも使い方を知っていれば、何か応用する案を思いつくこともあるでしょう。実際、 useSyncExternalStore はブラウザ API との統合にも使うことができるとドキュメントで紹介されています。 この記事では useSyncExternalSto
useEffect なしで window.scrollY 使う
import { useSyncExternalStore } from "react"; function subscribe(callback: () => void): () => void { window.addEventListener("scroll", callback); return () => { window.removeEventListener("scroll", callback); }; } export function useScrollY(): number { return useSyncExternalStore( subscribe, () => window.scrollY, () => 0 ); }
今後の React ではどの範囲を Suspense で囲むかという設計が重要になってくる
はじめに 今後のReactではどの範囲をSuspenseで囲むか という設計が重要になってくる、という話をSuspenseの説明とともにしていきます！ ※React18がリリースされて１年近く経つので今更感あるかもしれませんが、お付き合いください。 Suspense とは React18で正式な機能として実装された機能 ※React16.6で実験的機能として追加されていた Suspense でできること データ取得中ローディング状態の宣言的な記述 コンポーネント単位でのSSR コンポーネント単位でのJSロード コンポーネント単位でのHydration Suspense は単にローディングを宣言的に記述できるだけの機能ではない Suspenseはローディングを宣言的に記述できるもの、といった内容を目にすることが多い印象です。 しかし、Suspenseは単にローディングを宣言的に記述できるだけ
Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳
Create React App(以下「CRA」という)の将来、およびReactとフレームワークの関係性についてDan氏がGitHubのIssueのコメントで語った内容の翻訳です。非常に長いコメントですが、Reactユーザーであれば一読に値する内容だと思ったので翻訳してみました。参考になれば幸いです。 原文 翻訳 みなさん、こんにちは。 CRAの現状については以前から痛いほどわかっており、それに対処するための提案に取り組んでいるところです。このプルリクエストは議論を始めることを目的にしていたので、私たちがCRAの将来について考えているいくつかの背景を説明する良い機会だと思います。私たちが考慮している理由とトレードオフについて明確にしたいので、いくつかのセクションからなる長いコメントになりそうです。もし全てを読む気になれないなら、最後のセクションまでスクロールして私たちが提案する今後の方法を
React Hook Form v7 + MUI v5 + zod v3を使ったコンポーネント実装例 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに TextField RadioGroup SelectForm CheckboxGroup DatePicker コンポーネント使用側実装例 おわりに 本記事を執筆するにあたって、 マナリンク Tech Blog運営さんのReact Hook Form(v7)を使ったコンポーネント設計案 piyokoさんのMUI v5 + React Hook Form v7 で、よく使うコンポーネント達を連携してみる という記事を参考にさせていただきました。いつも非常にわかりやすい記事をありがとうございます。 はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 React Hook Form v7 + MUI v5 + zod v3を使ったよく使うコンポーネントの実装例を調査しており、こちらの記事を参考に実装を進めてみました。しかしRadioGroupやDatePickerをatom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Detect scroll direction in React js
@smakss/react-scroll-direction
React useThrottle hook with usage example
Social Network for Programmers and Developers
React (Vite) で LIFF アプリを作ろう
Making a UI Library with React & TypeScript