reflex

安装环境

安装node.js,下载MSI版本： https://nodejs.org/en/download/

安装到 C:\nodejs\

可选安装： https://github.com/nodejs/node-gyp#on-windows

安装reflex，参考： https://reflex.dev/docs/getting-started/installation/

安装python3.13： https://www.python.org/downloads/windows/

目前不支持3.14，参考：

• https://github.com/reflex-dev/reflex/issues/5964
• https://docs.pydantic.dev/1.10/changelog/

pip install reflex

创建并初始化项目， 创建一个 A blank Reflex app

mkdir reflex_app
cd reflex_app
reflex init
reflex run

输出：

───────────────────────────────────────────────── Starting Reflex App ─────────────────────────────────────────────────
[08:45:26] Compiling: ---------------------------------------- 100% 21/21 0:00:00
───────────────────────────────────────────────────── App Running ─────────────────────────────────────────────────────
                      App running at: http://localhost:3000/
Backend running at: http://0.0.0.0:8000

示例

参考： https://reflex.dev/docs/getting-started/introduction#an-example:-make-it-count

前端使用 Reflex 组件进行声明性构建。组件根据JS编译并提供给用户浏览器:仅在构建用户界面时使用 Reflex 组件、变量和 var 操作。任何其他逻辑都应包含在你的State(后端)

# -*- coding: utf-8 -*-

import reflex as rx

class State(rx.State):
    """定义所有的变量"""
    count: int = 0

    """定义改变变量的事件处理函数"""
    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

def index() :
    return rx.hstack(
        rx.button(
            "减少",
            color_scheme="ruby",
            on_click=State.decrement,
        ),
        rx.heading(State.count, font_size="2em"),
        rx.button(
            "增加",
            color_scheme="grass",
            on_click=State.increment,
        ),
        spacing="4",
    )

app = rx.App()
app.add_page(index)