react-19
建構現代 React 19 應用程式
React 19 引入了 Actions、Server Components 和新的 hooks,簡化了非同步操作並改善了開發者體驗。本指南提供了建構、保護和遷移 React 19 應用程式的完整模式。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-19". 如何在 React 19 中建立具有自動待處理狀態的表單?
النتيجة المتوقعة:
- React 19 使用 useActionState 處理具有自動待處理追蹤的表單。
- 從 react 匯入 useActionState 並傳遞非同步動作函式。
- 在表單的 action prop 中使用返回的 formAction。
- 顯示 isPending 以向使用者顯示載入狀態。
استخدام "react-19". 如何編寫安全的 Server Action?
النتيجة المتوقعة:
- 始終使用 getCurrentUser 或類似方法驗證使用者身份。
- 使用 Zod 等結構描述函式庫驗證所有輸入。
- 在執行變更之前檢查授權。
- 針對表單驗證失敗清楚地返回錯誤。
استخدام "react-19". 遷移到 React 19 時有哪些重大變更?
النتيجة المتوقعة:
- ReactDOM.render 被 createRoot 取代。
- PropTypes 已移除 - 請改用 TypeScript。
- forwardRef 已棄用 - 將 ref 作為常規 prop 使用。
- useRef 現在需要初始值參數。
التدقيق الأمني
آمنPure documentation skill containing only markdown files with React 19 guidance. All 526 static findings are FALSE POSITIVES. The 'Ruby/shell backtick execution' detections are markdown code block syntax. Environment variables, network calls, and credential patterns are educational examples demonstrating secure coding practices. No executable code, scripts, or malicious behavior exists.
عوامل الخطر
⚙️ الأوامر الخارجية (422)
🌐 الوصول إلى الشبكة (18)
📁 الوصول إلى نظام الملفات (1)
⚡ يحتوي على سكربتات (1)
🔑 متغيرات البيئة (30)
درجة الجودة
ماذا يمكنك بناءه
學習 React 19 模式
透過詳細的文件範例了解新的 hooks、Server Components 和 Actions。
升級 React 應用程式
遵循從 React 18 到 React 19 的逐步遷移指南,使用 codemods。
建構 Server Actions
建立具有身份驗證、驗證和重新驗證的安全伺服器端變更。
جرّب هذه الموجهات
如何在 React 19 中使用 useActionState 建立表單?請向我展示處理待處理狀態和錯誤的模式。
向我展示如何在 React 19 中使用 useOptimistic 進行即時 UI 更新,並在錯誤時還原。
如何在 React 19 中編寫具有身份驗證和輸入驗證的安全 Server Action?
從 React 18 遷移到 React 19 的關鍵步驟是什麼?包含重大變更和 codemods。
أفضل الممارسات
- 始終驗證和授權 Server Actions - 它們預設是公開端點
- 在函式內部讀取環境變數,而不是在模組範圍內,以防止客戶端套件暴露
- 在 Server Actions 中處理之前,使用 Zod 等結構描述驗證驗證所有使用者輸入
تجنب
- 將機密或 API 金鑰作為 props 傳遞給 Client Components
- 在未先清理使用者輸入的情況下使用 dangerouslySetInnerHTML
- 在 Server Actions 中跳過身份驗證檢查