Back to Details

reflex-docs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Reflex Documentation

Reflex文档

Reflex is an open-source framework for building full-stack web applications in pure Python — no JavaScript required.
Your training data about Reflex may be outdated. Always prefer the reference documentation over pre-trained knowledge.
Reflex是一个开源框架，用于纯Python构建全栈Web应用——无需JavaScript。
你所掌握的Reflex相关训练数据可能已过时。请始终优先参考官方文档，而非预训练知识。

References

参考链接

TopicURL
Getting Startedhttps://reflex.dev/docs/getting-started/introduction
Componentshttps://reflex.dev/docs/components/props
Statehttps://reflex.dev/docs/state/overview
Varshttps://reflex.dev/docs/vars/base-vars
Eventshttps://reflex.dev/docs/events/events-overview
Pages & Routinghttps://reflex.dev/docs/pages/overview
Stylinghttps://reflex.dev/docs/styling/overview
Databasehttps://reflex.dev/docs/database/overview
Assetshttps://reflex.dev/docs/assets/overview
Authenticationhttps://reflex.dev/docs/authentication/authentication-overview
Client Storagehttps://reflex.dev/docs/client-storage/overview
API Routeshttps://reflex.dev/docs/api-routes/overview
API Referencehttps://reflex.dev/docs/api-reference/cli
Custom Componentshttps://reflex.dev/docs/custom-components/overview
Wrapping Reacthttps://reflex.dev/docs/wrapping-react/overview
Component Libraryhttps://reflex.dev/docs/library
Recipeshttps://reflex.dev/docs/recipes
GitHub Source (docs)https://github.com/reflex-dev/reflex/tree/main/reflex/docs
主题URL
入门指南https://reflex.dev/docs/getting-started/introduction
组件https://reflex.dev/docs/components/props
状态https://reflex.dev/docs/state/overview
变量（Vars）https://reflex.dev/docs/vars/base-vars
事件https://reflex.dev/docs/events/events-overview
页面与路由https://reflex.dev/docs/pages/overview
样式设计https://reflex.dev/docs/styling/overview
数据库https://reflex.dev/docs/database/overview
资源文件https://reflex.dev/docs/assets/overview
身份验证https://reflex.dev/docs/authentication/authentication-overview
客户端存储https://reflex.dev/docs/client-storage/overview
API路由https://reflex.dev/docs/api-routes/overview
API参考https://reflex.dev/docs/api-reference/cli
自定义组件https://reflex.dev/docs/custom-components/overview
封装React组件https://reflex.dev/docs/wrapping-react/overview
组件库https://reflex.dev/docs/library
实践教程https://reflex.dev/docs/recipes
GitHub文档源码https://github.com/reflex-dev/reflex/tree/main/reflex/docs

Core Concepts

核心概念

State & Vars

状态与变量（State & Vars）

  • State (
    rx.State
    ): Server-side Python class holding app state. Define vars as class attributes and event handlers as methods.
  • Base Vars: Typed class attributes on State (
    count: int = 0
    )
  • Computed Vars: Derived values using 
    @rx.var
    decorator
  • Var Operations: Transform vars in components without event handlers
  • State（
    rx.State
    ）：存储应用状态的服务器端Python类。将变量定义为类属性，事件处理器定义为类方法。
  • 基础变量（Base Vars）：State上的类型化类属性（如
    count: int = 0
    ）
  • 计算变量（Computed Vars）：使用
    @rx.var
    装饰器生成的派生值
  • 变量操作（Var Operations）：无需事件处理器即可在组件中转换变量

Components

组件

  • All UI is built with 
    rx.*
    components (Python wrappers around React)
  • Components accept props and can be composed/nested
  • Conditional rendering with 
    rx.cond()
    , iteration with 
    rx.foreach()
  • 所有UI均使用
    rx.*
    组件构建（基于React的Python封装）
  • 组件接受属性（props），可组合/嵌套
  • 使用
    rx.cond()
    实现条件渲染，
    rx.foreach()
    实现迭代渲染

Events

事件

  • Event Handlers: Methods on State decorated with 
    @rx.event
  • Event Triggers: Component props like 
    on_click
    , 
    on_change
  • Event Chaining: Return multiple events from a handler
  • Setters: Auto-generated 
    set_<var>
    event handlers for each base var
  • 事件处理器（Event Handlers）：State上使用
    @rx.event
    装饰的方法
  • 事件触发器（Event Triggers）：组件属性如
    on_click
    、
    on_change
  • 事件链（Event Chaining）：从处理器返回多个事件
  • 设置器（Setters）：为每个基础变量自动生成
    set_<var>
    事件处理器

Pages & Routing

页面与路由

  • Pages are functions decorated with 
    rx.page
    or added via 
    app.add_page()
  • Dynamic routes with bracket syntax: 
    [slug]
  • 页面是使用
    rx.page
    装饰的函数，或通过
    app.add_page()
    添加
  • 使用方括号语法实现动态路由：
    [slug]

Styling

样式设计

  • Inline props, Tailwind CSS, theming, responsive design
  • rx.theme()
    for global theming
  • 内联属性、Tailwind CSS、主题定制、响应式设计
  • 使用
    rx.theme()
    进行全局主题配置

Database

数据库

  • Built-in SQLModel integration for database tables
  • Define models, run queries, set up relationships
  • 内置SQLModel集成用于数据库表操作
  • 定义模型、执行查询、设置关联关系