"use client"; import { parseAsInteger, useQueryState } from "nuqs"; export function Demo() { const [hello, setHello] = useQueryState("hello", { defaultValue: "" }); const [count, setCount] = useQueryState( "count", parseAsInteger.withDefault(0), ); return ( <> <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button> <input value={hello} placeholder="Enter your name" onChange={(e) =>
Figmaは非常に優秀で、Reactのコンポーネントをよく表現できると日々感じています。 だからこそ、Reactを実装しているエンジニアとFigmaで作成しているデザイナーとで、微妙に噛み合わない…シーンが出てきます。 お互いに「あ！ここが違うのか！」ということを知っておくと、コミュニケーションが楽になるのでは？と思ったので、まとめてみます。 こんな人におすすめ Reactは実装できるが、Figmaではどんなことができるのかよく知らない Figmaでコンポーネントを作成することはできるが、どう実装されるのかよくわかっていない できるだけFigmaの設定とReactでの表現を合わせて書くようにするので、それぞれの対応表みたいな形で使ってもらえると嬉しいです。 プロパティ・Props編 Figma:プロパティ と React: props は同じものと考えてよい コンポーネントという単位で考え
コンポーネントの挙動をテストしたいときに使える手段が増えてきており、新たに導入する際にはどの方法を選べばいいか迷います。 ここでは、コンポーネントテストの方法を 4 つ紹介し、それぞれのメリット・デメリットを比較します。 この記事で比較するコンポーネントテストの方法 jsdom (or happy-dom) + Vitest (or Jest) + Testing Library Storybook play function Playwright Component Test Vitest Browser Mode 除外したもの：Cypress component testing Cypress にも Component Testing がありますが、今回の調査対象からは外しています。 個人的・社内的に Cypress の使用例がなく、新たに導入するモチベーションがない Playwrig
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 対象 Reactのインプットが完了してお手頃なアプリを開発したい方 フロントのみで実装したときの『データの流れ』を理解したい方 サイトのURL アプリのご紹介 こんなアプリが開発できます。 何が学べるか？ CRUDの開発 登録（Create）・参照(Read)・更新(Update)・削除(Delete)に加えて、参照後のtodoリストへの絞り込みの開発について学べます。 コンポ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nuqs | Type-safe search params state management for React
エンジニア・デザイナーに知ってもらいたいFigmaとReactの違い
コンポーネントテストの方法4種類比較してみる（2025年版）
React｜todoアプリが開発できて、開発の理解が深まるサイト - Qiita