随笔分类 -  react

React Server Action框架横向比较
摘要：React Server Action 是 React 18+ 推出的服务端操作能力，核心依赖于支持 React 服务端组件（RSC）/服务端渲染（SSR）的 React 全栈框架（而非传统意义上的“纯后端”）—— 因为 RSA 本质是和 RSC 深度绑定的，无法脱离 React 服务端渲染体系单独 阅读全文
posted @ 2026-02-13 10:50 卓能文 阅读(7) 评论(0) 推荐(0)
用react server action调用go语言后端
摘要：简单来说，没有专门为 React Server Action 设计的 Go 语言框架，但 Go 生态可以完美适配 React Server Action 的调用逻辑，你可以通过 Go 的 Web 框架快速实现支持 RSA 的后端服务。 核心背景说明 React Server Action 是 Rea 阅读全文
posted @ 2026-02-13 10:27 卓能文 阅读(1) 评论(0) 推荐(0)
react server action示例
摘要：React Server Action（简称SA）是React 18+推出的核心特性，它允许你直接在客户端触发服务器端的异步逻辑，无需手动写API请求（如fetch/axios），React会自动处理客户端与服务端的通信、数据序列化/反序列化。下面从核心互联方式、具体示例、关键细节三个维度讲清楚两者 阅读全文
posted @ 2026-02-13 10:17 卓能文 阅读(5) 评论(0) 推荐(0)
astro react ace markdown editor and previewer
摘要：src/components/AceMarkdown.tsx: import { useRef, useEffect, useState } from "react"; import { $paper, type Paper } from "../store/paper"; import ace f 阅读全文
posted @ 2024-08-27 07:09 卓能文 阅读(56) 评论(0) 推荐(0)
astro react component prop type
摘要：src/components/Counter.tsx: import { useState } from "react"; interface CounterProps { count: number; } export const Counter = ({ count }: CounterProp 阅读全文
posted @ 2024-08-26 17:24 卓能文 阅读(32) 评论(0) 推荐(0)
tanstack react-form antd示例
摘要：import { StrictMode } from "react"; import { useForm } from "@tanstack/react-form"; import { zodValidator } from "@tanstack/zod-form-adapter"; import 阅读全文
posted @ 2024-08-22 20:09 卓能文 阅读(128) 评论(0) 推荐(0)
利用react-to-web-component封装react控件
摘要：src/Greeting.tsx: import React from "react"; import r2wc from "@r2wc/react-to-web-component"; type GreetingProps = { name: string; }; const Greeting: 阅读全文
posted @ 2024-08-16 10:37 卓能文 阅读(150) 评论(0) 推荐(0)
react in cdn
摘要：index.html: <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Ariakit</title> </head 阅读全文
posted @ 2024-08-15 08:43 卓能文 阅读(30) 评论(0) 推荐(0)
antd模板工程
摘要：pnpm create vite@latest my-project -- --template react cd my-project pnpm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind 阅读全文
posted @ 2024-08-14 18:19 卓能文 阅读(47) 评论(0) 推荐(0)
xrender中的FormRender使用示例
摘要：xrender是阿里的中后台「表单/表格/图表」开箱即用解决方案。 先采用在线工具创建一个简单的schema:simple.ts export default { "type": "object", "properties": { "title": { "title": "标题", "type": 阅读全文
posted @ 2024-08-11 17:10 卓能文 阅读(352) 评论(0) 推荐(0)
radix-ui/themes使用示例
摘要：pnpm create vite@latest index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/v 阅读全文
posted @ 2024-08-10 09:44 卓能文 阅读(330) 评论(0) 推荐(0)
react-ace使用示例
摘要：import { useState } from "react"; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-markdown"; import "ace-builds/src-noconfli 阅读全文
posted @ 2024-08-10 09:15 卓能文 阅读(265) 评论(0) 推荐(0)
react-md-editor使用示例
摘要：import { useState } from "react"; import { Flex } from "@radix-ui/themes"; import MDEditor from "@uiw/react-md-editor"; import { getCommands, getExtra 阅读全文
posted @ 2024-08-10 00:36 卓能文 阅读(260) 评论(0) 推荐(0)
react-markdown-editor示例
摘要：import { useState } from "react"; import { Button, Flex } from "@radix-ui/themes"; import MarkdownEditor from "@uiw/react-markdown-editor"; export def 阅读全文
posted @ 2024-08-10 00:11 卓能文 阅读(116) 评论(0) 推荐(0)
react markdown editor示例
摘要：采用了@monaco-editor/react进行编辑，react-markdown预览 import Editor from "@monaco-editor/react"; import { useState } from "react"; import Markdown from "react- 阅读全文
posted @ 2024-08-06 01:00 卓能文 阅读(237) 评论(0) 推荐(0)
md-editor-rt react markdown 编辑器
摘要：md-editor-rt是一个react markdown编辑框架。 import { useState } from "react"; import { MdEditor } from "md-editor-rt"; import "md-editor-rt/lib/style.css"; exp 阅读全文
posted @ 2024-08-04 15:52 卓能文 阅读(189) 评论(0) 推荐(0)
react-hook-form验证
摘要：import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import i18next from "i18next"; import { z } from "zo 阅读全文
posted @ 2024-08-03 15:18 卓能文 阅读(79) 评论(0) 推荐(0)