AIGPAIGP
Prompt LibraryAllProgrammingImage GenerationVideo GenerationMusic GenerationDesign
Toolsサイト診断WebP ConverterImage ResizeFavicon Generator
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

React 19 Server Actions Interactive Form with Optimistic Updates

プログラミング
DeepSeek
P

Prompt

Create an interactive playground for React 19 Server Actions with optimistic updates using the useActionState and useOptimistic hooks. The demo should simulate a todo-like form where submissions update a list instantly with optimistic UI, and errors are handled gracefully. Include visual feedback for pending, success, and error states. Make it self-contained with CDN imports for React 19, ReactDOM, and Babel standalone. Use a simple mock server action with a simulated delay and random failure.

CODE PREVIEW

エディタを読み込み中…

AIとの対話に追加する一言

プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします

このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。

初心者なので、各行にコメントを追加して、何をしているか説明してください。

このコードをWordPressのテーマに組み込む方法も教えてください。

動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。

このインタラクティブプレイグラウンドは、React 19の新しいServer Actionsを、useActionStateフックとuseOptimisticフックを使った楽観的アップデートで体験できます。フォームはサーバーサイドのTodo作成をシミュレートし、ランダムな遅延と30%の失敗率を持ち、成功時とエラー時の両方の処理を示しています。

主な機能：

  • useActionState がフォーム送信とアクション状態（idle/success/error）を管理
  • useOptimistic がサーバー確認前に新しいTodoを保留中インジケーター付きで即座に表示
  • 視覚的フィードバック：黄色い点線の枠は保留中、緑色は確定済み
  • モックサーバーアクションが失敗した場合、エラーメッセージをインライン表示
  • 送信中は入力欄と送信ボタンを無効化し、重複送信を防止

CDNからReact 19、ReactDOM 19、Babel standaloneを使用して構築。すべての状態管理とUIロジックは単一のコンポーネントに含まれており、外部ライブラリは不要です。

Prompt Overview

This interactive playground demonstrates React 19's new Server Actions with optimistic updates using useActionState and useOptimistic hooks. The form simulates a server-side todo creation with random delays and a 30% failure rate to showcase both success and error handling.

Key features:

  • useActionState manages the form submission and action state (idle/success/error)
  • useOptimistic immediately shows the new todo with a pending indicator before server confirmation
  • Visual feedback: yellow dashed border for pending items, green for confirmed ones
  • Error messages displayed inline when the mock server action fails
  • Input and submit button disabled during pending state to prevent duplicate submissions

Built with React 19, ReactDOM 19, and Babel standalone from CDN. All state management and UI logic is contained in a single component without any external libraries.

Was this prompt helpful?

Comments

Comments appear after moderation

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Homeヘルプ