Reflex is an open-source framework for quickly building beautiful, interactive web applications in pure Python.
Reflex 是一个开源框架，用于在纯 Python 中快速构建美观、交互式的 Web 应用程序。

Here, we go over a simple counter app that lets the user count up or down.
这里，我们将介绍一个简单的计数器应用程序，允许用户进行递增或递减计数。

Here is the full code for this example:
这是此示例的完整代码：如果您正在编写代码，请不要在每行代码之前包含“line_number|”

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(
            "Decrement",
            color_scheme="ruby",
            on_click=State.decrement,
        ),
        rx.heading(State.count, font_size="2em"),
        rx.button(
            "Increment",
            color_scheme="grass",
            on_click=State.increment,
        ),
        spacing="4",
    )

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

Let's break this example down.
让我们分解这个例子。

import reflex as rx

We begin by importing the reflex package (aliased to rx). We reference Reflex objects as rx.* by convention.
我们首先导入 reflex 包（别名为 rx ）。按照惯例，我们将 Reflex 对象称为 rx.* 。

class State(rx.State):
    count: int = 0

The state defines all the variables (called vars) in an app that can change, as well as the functions (called event_handlers) that change them.
状态定义了应用中可以改变的所有变量（称为变量 vars），以及改变它们的函数（称为事件处理程序 event_handlers）。

Here our state has a single var, count, which holds the current value of the counter. We initialize it to 0.
这里我们的状态有一个单一的变量， count ，它保存着计数器的当前值。我们将其初始化为 0 。

def increment(self):
    self.count += 1


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

Within the state, we define functions, called event handlers, that change the state vars.
在该状态下，我们定义称为事件处理程序的函数，这些函数改变状态变量。

Event handlers are the only way that we can modify the state in Reflex. They can be called in response to user actions, such as clicking a button or typing in a text box. These actions are called events.
事件处理程序是 Reflex 中修改状态的唯一方式。它们可以在用户操作的响应中被调用，比如点击按钮或在文本框中输入。这些操作被称为事件。

Our counter app has two event handlers, increment and decrement.
我们的计数器应用程序有两个事件处理程序， increment 和 decrement 。

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

This function defines the app's user interface.
这个函数定义了应用程序的用户界面。

We use different components such as rx.hstack, rx.button, and rx.heading to build the frontend. Components can be nested to create complex layouts, and can be styled using the full power of CSS.
我们使用不同的组件，如 rx.hstack ， rx.button 和 rx.heading 来构建前端。组件可以嵌套以创建复杂的布局，并可以使用 CSS 的全部功能进行样式设置。

Reflex comes with 50+ built-in components to help you get started. We are actively adding more components. Also, it's easy to wrap your own React components.
源文本：Reflex 带有 50 多个内置组件，帮助您入门。我们正在积极添加更多组件。此外，包装您自己的 React 组件也很容易。

rx.heading(State.count, font_size="2em"),

Components can reference the app's state vars. The rx.heading component displays the current value of the counter by referencing State.count. All components that reference state will reactively update whenever the state changes.
组件可以引用应用程序的状态变量。 rx.heading 组件通过引用 State.count 显示计数器的当前值。所有引用状态的组件将在状态更改时进行反应性更新。

rx.button(
    "Decrement",
    color_scheme="ruby",
    on_click=State.decrement,
),

Components interact with the state by binding events triggers to event handlers. For example, on_click is an event that is triggered when a user clicks a component.
组件通过将事件触发器绑定到事件处理程序与状态交互。例如， on_click 是在用户单击组件时触发的事件。

The first button in our app binds its on_click event to the State.decrement event handler. Similarly the second button binds on_click to State.increment.
第一个按钮在我们的应用程序中将其 on_click 事件绑定到 State.decrement 事件处理程序。类似地，第二个按钮将 on_click 绑定到 State.increment 。

In other words, the sequence goes like this:
换句话说，顺序如下：

• User clicks "increment" on the UI.
  用户在 UI 上点击“增量”。
• on_click event is triggered.
  事件被触发。
• Event handler State.increment is called.
  事件处理程序 State.increment 被调用。
• State.count is incremented.  State.count 被递增。
• UI updates to reflect the new value of State.count.
  UI 更新以反映 State.count 的新值。

Next we define our app and add the counter component to the base route.
接下来，我们定义我们的应用程序并将计数器组件添加到基本路由。

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

🎉 And that's it!

We've created a simple, yet fully interactive web app in pure Python.

By continuing with our documentation, you will learn how to building awesome apps with Reflex.

For a glimpse of the possibilities, check out these resources:

• For a more real-world example, check out the tutorial.
• We have bots that can answer questions and generate Reflex code for you. Check them out in #ask-ai in our Discord!