The ultimate goal of HTMX is to provide modern browser interactivity directly within HTML, without the need for JavaScript. Although relatively new, with its initial release in late 2020, this frontend library has quickly caught the attention of the IT web community. With 2nd place in the 2023 JavaScript Rising Stars “Front-end Frameworks” category (right behind React), a spot in the GitHub Accele
Kind of annoyed at React
I’m kind of annoyed at the state of React lately. I still use it regularly, and am somewhat friendly with the folks that work on it still, and it’s the first library I reach for, but… it’s just gotten too confusing and frustrating. Not to boast but I like… really know React. I’ve used it for almost a decade. I’ve seen it morph and grow and used the frameworks that have popped up to work with it, I
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
JotaiとRecoilは似てます。一方で、細かい違いは多くあります。決定的な違いを一つ挙げるとすれば、stringをkeyにしているRecoilに対して、Jotaiはatomのobject referenceをkeyにしています。表面的にはstring keyを指定しなくて良い手軽さが売りになっています。 よくある比較： // Recoil const greeting = atom({ key: 'greeting', default: 'hello' }); // Jotai const greeting = atom('hello'); では、表面的ではない違いは何でしょうか。もう一つのポイントは内部実装に Map ではなく WeakMap を使っていることです。つまり、atomのreferenceが無くなればJotaiのstoreからもそのうち消えるということです。
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
この記事は、<strong><a href="https://techfeed.io/events/techfeed-experts-night-31">TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来</a></strong>の開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。 本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャ
Zodとの比較 公式サイトで、Valibot は、Zod と比較して、バンドルサイズが最大98%削減できると記述されています。今回作成した問い合わせフォームでも、92.2%の削減を確認できました。 VSCode 上で Zod で作成した Schema ファイルのサイズは gzipped 圧縮で12.8kです（Zod を利用した Schema はこちらを参照ください）。 ZodのSchema実装 import { z } from "zod"; const email: z.ZodString = z .string({ required_error: "入力が必須の項目です" }) .min(1, { message: "入力が必須の項目です" }) .max(255, { message: "255文字以内で入力してください" }) .email({ message: "メールアドレスの
この記事は ドワンゴ Advent Calendar 2023 の 13 日目の記事です。 自己紹介 こんにちは。バックエンドエンジニアのlenです。 現在私は社内で使用する教材入稿ツールを改修するプロジェクトに参画しており、そこではバックエンドの実装に加え、フロントエンドの実装も携わっています。 ここではなぜフロントエンドの実装をすることになったのか、またそこから得られたことなどを紹介していきます。 フロントエンドの開発をすることになったきっかけ 理由は2つあります。 1つはバックエンドセクション内でフルスタックな人材が求められていたことです。 2021年の時はバックエンドセクションとフロントエンドセクションというセクション分割をしており、バックエンドセクション内でサービスごとにグループが分かれているような状態でした。 外部ツールは良いのですが新しい内部ツールや内部サービスについても考え
App Router でのパンくずやナビメニューの作成に useSelectedLayoutSegments が便利
Leaner Techonologies の @corocn です。 最近 Nuxt.js のアプリを Next.js + App Router に載せ替えたのですが、メニューの描画に useSelectedLayoutSegments が便利だったので軽く紹介します。 実は App Router のドキュメントをちゃんと読んでいくと、Functionsの最後で紹介されています。 何ができる？ メニューを描画するときに、現在のページのメニューだけ下線や太字で装飾したいケースがありますよね。このとき普通に実装しようとするとURLからベースとなるパスを除いた上で分割して...など若干面倒です。 useSelectedLayoutSegment(s) を使うと、レイアウトを起点として、URLをいい感じにパースして返してくれるのでスッキリ書くことができます。 単数形（segment）と複数形（se
In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress. React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can sign up for the ticket lottery until February 28th. For more info on tickets, free streaming, spon
jsx, tsx のシンタックスハイライトにも対応しました。また、JavaScriptのハイライトを改善しました - はてなブログ開発ブログ
はてなブログでは、ソースコードなどを構文（シンタックス）に応じて色付け（ハイライト）表示する シンタックスハイライトに対応しています。今回、シンタックスハイライトに関する改善を行いました。 jsx, tsx形式のシンタックスハイライトの追加 JavaScript形式のシンタックスハイライトの改善 jsx, tsx形式のシンタックスハイライトの追加 jsx 及び tsx 形式に新たに対応しました。 はてな記法、Markdownでのハイライト方法は以下のとおりです。 はてな記法 >|jsx| ...ソースコードを記述する... ||< Markdown ```jsx ...ソースコードを記述する... ```詳しい利用方法やその他の形式の対応につきましては、下記のヘルプをご参照ください。 JavaScript形式のシンタックスハイライトの改善 JavaScriptのシンタックスハイライトの改善
こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ
v5 で何が変わる？ 非同期状態管理ライブラリ TanStack Query の新機能と最適化 - Techtouch Developers Blog
はじめに 三行まとめ TanStack Query とは？ v5 アップデート内容の紹介 hooks のインターフェースの統一 Suspense の正式サポート v4 v5 Optimistic Update をシンプルに そもそも Optimistic Update とは？ デモアプリ Optimistic Update の実装例 v4 v5 まとめ 参考資料 はじめに こんにちは！テックタッチでフロントエンドエンジニアをしている tsune です。野球好きの自分は、この時期になるとプロ野球開幕が待ち遠しくなってきます⚾ 開幕戦のチケットも確保したので、当日は会社のメンバーと一緒に神宮球場に行く予定です🥳 この記事では 2023 年 10 月に正式リリースされた TanStack Query の v5 へのアップデート内容を紹介します！ また、その中でも Optimistic Upda
Next.js の公式ブログの How to Think About Security in Next.js という記事で Next.js 14 で導入される React Taint APIs について紹介されていました。 この記事では、Next.js 14 で React Taint APIs 実際に試してみて、どのような機能なのかを確認してみたいと思います。 React Taint APIs とは？ React Taint APIs とは、React が experimental バージョンで提供する新しいセキュリティ保護機能の一つです。このAPIを使用することで、誤って Client Component にセキュリティ上の重要なデータが渡されることを防げるようになります。 具体的には、以下の2つの API が提供されています。 experimental_taintObjectRefe
ますます高度化するWebアプリケーションのフロントエンド開発を支える「React」の可能性──「Web TECH FORUM 2023 Autumn」開催！
業務システム構築のアプローチとしてWeb技術を選択することが、もはや基本中の基本であるといえる状況だ。その背景には、ReactやVue.js、Angularといったいわゆる“3大フレームワーク”の登場により加速してきたJavaScriptの進歩があることは明白である。中でも、開発現場での圧倒的な利用率を誇り、Webフロントエンド開発の主流となりつつあるのがReactだ。2023年10月4日にグレープシティ（現メシウス）がオンライン上で開催した「Web TECH FORUM 2023 Autumn」では、2つのセッションを通して、業務システムのフロントエンド開発にReactがもたらすメリットや最新の技術動向、成熟したエコシステムにおいて提供される周辺フレームワークの選定ポイントなどについての解説が行われた。 ※本記事は、2023年11月1日に社名をメシウス株式会社へ変更したグレープシティ株式
BARフロントえんどう #1 「フロントエンドリアーキテクト」で使用した資料です！ https://cybozu.connpass.com/event/297123/
本稿は Next.js で今試せる React canary の機能「useFormState」に関する記事です。Server Action を使用すると、API Client を使用せずにブラウザから直接サーバーサイドの関数を実行できます。Server Action のメリットは以下のものが挙がります。 API Client が不要になる ハイドレーションを待たずに反応できる Progressive Enhancement を維持できる useFormState の話の前に、Server Action について少し触れていきます。 Server Action だけではない「Client Action」とは？ 「Server Action」というワードを知っている方は多いと思いますが「Client Action」はまだ馴染みのないワードかもしれません。React、Next.js いずれも公
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する 2023.10.31 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。 最もシンプルな方法は required 属性や input type="email" な
はじめに 以前RustとWASMでマークダウンパーサーを自作したので、これを使ってブログを作ってみました。 ソースコードは以下にあります。 技術構成 技術構成は以下のようになっています。 全体構成 フロントエンド Next.js / Type Script Apollo Client(状態管理ライブラリ) styled-components emotion mantine ミドルウェア Prisma BFF GraphQL Yoga(GraphQLサーバー) Pothos GraphQL(GraphQL スキーマビルダー) バックエンド Rust+WebAssembly(マークダウンパーサー) (Vercel Postgress(サーバレスストレージ)) Supabase デプロイ先 Vercel(FE/BF共通ホスティング先) 認証・認可 NextAuth ドメイン取得 Cloudfla
renderToString と hydrate を自作し、今一度 SSR・SSG の仕組みを実装から理解してみましょう。 はじめに 本稿では、以下のリポジトリを用いて実装を進めます。 また、お手元に node の環境があれば、拙作の create-toy-react-app という CLI ツール を用いて、こちらのリポジトリに含まれる、実装のテンプレートや完成形のダウンロードが行なえます。 それでは node の環境(16系推奨)をご準備いただき、実装の準備として SSR と SSG 実装のテンプレートをダウンロードしましょう。
Understanding React Server ComponentsLearn the fundamentals of React Server Components, to better understand why (and when) to adopt. React Server Components (RSCs) augment the fundamentals of React beyond being a pure rendering library into incorporating data-fetching and remote client-server communication within the framework. Below, we’ll walk you through why RSCs needed to be created, what the
初夏のJavaScript祭りにて使用した資料です。 TanStackを用いてアプリケーションを実装するためのポイントと注意点を解説しています。 https://javascript-fes.doorkeeper.jp/events/172450
多言語対応している Web アプリで、あらかじめファイルに書き出しておいた画像 (アセット) が言語別にあって、それをページに埋め込むにはどうするか、という話題です。基本は言語ごとに別々の画像を出すことないと思いますが、たまーにあるんですよね。例えばGoogle Play のバッジが言語ごとに違うので、これを言語ごとに出し分けたいとか。 Google Play バッジ – Google 色々方法があるので、それをいくつか紹介します。 方法1. import 文を言語の数だけ書く シンプルにやるなら、言語の数だけ import 文を書いて、next/image の <Image> コンポーネントで読み込むコードを書くかと思います。 // pages/index.ts import Image from 'next/image'; import GooglePlayJaJP from '../
React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら
Million Lint is in public betaAiden Bai (opens in a new tab), John Yang (opens in a new tab), Nisarg Patel (opens in a new tab) – February 29, 2024 It’s launch time. After three months and hundreds of commits, we invite you to try out Million Lint. The experience is not finished – there are a few known bugs and several missing features – but we are really happy with how it's shaping up and couldn'
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
🚀Update, March 12: Storybook 8 is out now!Storybook 8 (our next major release) brings React Server Component (RSC) compatibility to Storybook for the very first time, letting you build, test and document Next.js server applications in isolation. In our first demo, we used Storybook to develop a contact card RSC, which accessed contact data both asynchronously and from a file system while simulati
Next.js 14まとめ
基本的には以下のNext.js 14のブログを翻訳してまとめたものになります。 TL;DR Turbopack: App & Pagesルーター向けの5000のテストをパス ローカルサーバーの起動が53%高速化 Fast Refreshによるコードの更新が94%高速化 サーバーアクションの安定版: 進歩的に強化されたミューテーション キャッシュと再検証の統合 シンプルな関数呼び出し、またはフォームとネイティブに連動 部分的プリレンダリングのプレビュー版: 高速な初期の静的レスポンス+ストリーミングの動的コンテンツ Next.js Learnの新規追加: Appルーターや認証、データベースなどを教える無料のコース アップデート詳細 Next.jsコンパイラ Next.js 13以降、Next.jsではPagesとAppルーターの両方でローカル開発のパフォーマンスを向上させるように取り組んでき
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話 | PR TIMES 開発者ブログ
Next.jsに移行した初期の実装 Next.jsに移行した初期の実装ではgetServerSidePropsで検索結果の1ページ目を取得し、そのデータをTanstack Queryにhydrateするといった形で実装しました（この実装方法自体はUX改善後も変わりません）。 import { dehydrate, type DehydratedState, QueryClient, Hydrate } from '@tanstack/react-query'; export const getServerSideProps = async ({req, res, query}) => { const {search_word: searchWord} = query; const queryClient = new QueryClient(); const searchResultResp
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
概要 最近、実務の中で Next.js version 13 の App Router で実装する機会をいただきました。 しかし、実際に使ってみたところ、SSR と React Server Components をごっちゃに解釈してしまい、よくわからないことになってしまいました。そのため、今回の記事で自分の中での SSR と React Server Components について一旦整理しよう、ということで今回の記事を作成しました。 公式のドキュメントを参照しながらまとめたため、大きな解釈違いはないと思っているのですが、間違っている箇所などあれば気軽にご指摘いただけると嬉しいです。 SSR とは まず、SSR について簡単にまとめていこうと思います。 SSR とは、Server Side Rendering の略称で、その名の通り、サーバーサイドでレンダリングすることを指します。具体的
![[Next.js] SSR と React Server Components の相違点を理解する](https://cdn-ak-scissors.b.st-hatena.com/image/square/18c54d2132380ee4bdedd3589e44754470327bd5/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--nEZdUMCc--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520SSR%252520%2525E3%252581%2525A8%252520React%252520Server%252520Components%252520%2525E3%252581%2525AE%2525E7%25259B%2525B8%2525E9%252581%252595%2525E7%252582%2525B9%2525E3%252582%252592%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525A4%2525E3%252581%2525A1%2525E3%252581%2525AE%2525E3%252581%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzRjZDZjM2E1ZmQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
import { useMemo } from "react"; export const TodoList: FC<Props> = ({ todos, tab }) => { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); }; 引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使える
The Two Reacts — overreacted
Suppose I want to display something on your screen. Whether I want to display a web page like this blog post, an interactive web app, or even a native app that you might download from some app store, at least two devices must be involved. Your device and mine. It starts with some code and data on my device. For example, I am editing this blog post as a file on my laptop. If you see it on your scre
【React】最強AI「Google Gemini Pro」のAPIを使ってチャットBOTを作成してみた - Qiita
はじめに 生成AIにおいて、最近話題になっているGoogle Gemini Proですが、2024年始めに予定されている一般公開までは試用期間として無料利用できるようです。 ※1分あたり60リクエストまでという制限は付いております。 有料化される前に、APIを叩いて遊んでみようということで、今回はReactで簡単なチャットBOTを作成していこうと思います。 アプリ概要 ユーザーの文字入力に対して、Gemini ProのAPIから応答を得て、回答を表示する 会話の履歴が画面上に残る（※会話の履歴はAIに記憶させておりません） 実装方針 TypeScriptを利用する レイアウトの装飾はemotionによって行う APIと通信するためにaxiosを使用する 回答をマークダウン形式で表示させるためにreact-markdownを使用する Gemini Proの出力はマークダウン形式で返ってくるた
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. #The Problem When you're working with React and TypeScript, you'll often encounter this kind of error:
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基本的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装（JSX）と、そのUIに関連するロジック（たとえばステート）をまとめてカスタムフックから提供することを指します。簡単な例を
はじめに 今回はSWRとTanStack Queryの比較によってそれぞれの特徴と違いを整理したいと思います。背景としてネット上にある両者の比較記事は2022年以前のものが多く、当時に比べSWR2.0がリリースされたことなどで比較の観点が変化したように感じました。改めて整理することで技術選定の参考になればと思います。 前提 今回は以下のバージョンを前提にします。（2023/08/26時点でLatest） SWR v2.2.0 TanStack Query v4.34.0 また、私自身はTanStack Queryを業務で1年ほど扱ったことがありSWRは全く経験がない状態です。この記事はどちらが優れているかを示すためのものではなく、あくまで客観的に比較することを目的にしています。 目次 ここでは以下の3つの観点から比較を行い考察をします。 interfaceでの比較 機能面での比較 キャッシ
We are excited to announce support of submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMX vs React: A Complete Comparison - Semaphore
UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
JotaiとRecoilの違いは何か、string keysが不要というのはどういうことか
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
【2024年6月版】フロントエンドアーキテクチャ界隈の必読記事まとめ【TechFeed】
react-hook-form が Valibot に対応、Zod比較でバンドルサイズが92%削減
バックエンドエンジニアがフロントエンドの開発をすることになった話 - ドワンゴ教育サービス開発者ブログ
React Labs: What We've Been Working On – February 2024 – React
【React】useMediaQuery は最終手段にしよう
Next.js 14 で導入された React Taint APIs を試してみた
GraphQLをServer Componentsで使いたい
Server Action と useFormState
自作マークダウンパーサーとNext13+Prisma+GraphQL+Supabaseでブログを自作した
renderToStringとhydrateを作って学ぶReactのSSR・SSG
Understanding React Server Components – Vercel
TanStackで効率的なルーティングとデータ取得を実現
Next.js で言語ごとに異なるアセット画像を埋め込む - mizdra's blog
React Routerはルートをどうランク付けしているか
Million Lint is in public beta | Million.js
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
[Next.js] SSR と React Server Components の相違点を理解する
React + TypeScript: useMemoフックの使い方と使いどころ - Qiita
Event Types in React and TypeScript
【徹底比較】Vue.js と React でレンダリングされる値、されない値
Render hooksをコンポーネントの拡張として理解する - Qiita
【2023年】SWR & TanStack Query比較
Creating a pointer-friendly submenu experience