Reflex

https://reflex.dev/docs/getting-started/introduction
Admin
Reflex is an open-source framework for building beautiful, interactive web applications entirely in...
Tokens:1,157
Snippets:15
Trust Score:9.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Initialize and Add Page to Reflex App

Source: https://reflex.dev/docs/getting-started/introduction/index

This Python code initializes a new Reflex application instance and adds the 'index' page to it. This is a standard setup for launching a Reflex web application.

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

--------------------------------

### Bind UI Events to State Handlers

Source: https://reflex.dev/docs/getting-started/introduction/index

This example shows how UI components interact with application state through event binding. The `on_click` event of a button is bound to a state handler, such as `State.decrement`. This allows user interactions to trigger state changes, leading to UI updates.

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

--------------------------------

### Import Reflex Package

Source: https://reflex.dev/docs/getting-started/introduction/index

This code snippet imports the Reflex library, conventionally aliased as 'rx'. This is the first step in using any Reflex functionality.

```python
import reflex as rx
```

--------------------------------

### Create UI Layout with Reflex Components

Source: https://reflex.dev/docs/getting-started/introduction/index

This Python function defines the user interface for the index page using Reflex components. It arranges a decrement button, a heading displaying the current count, and an increment button horizontally. Button clicks trigger corresponding state event handlers.

```python
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",
    )
```

--------------------------------

### Define Application State in Python

Source: https://reflex.dev/docs/getting-started/introduction/index

This Python code defines the application's state using Reflex. It includes a 'count' variable initialized to 0 and event handlers 'increment' and 'decrement' to modify this count. Event handlers are the designated way to alter state variables in Reflex.

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

    @rx.event
    def increment(self):
        self.count += 1

    @rx.event
    def decrement(self):
        self.count -= 1
```

--------------------------------

### Display State Variable in UI

Source: https://reflex.dev/docs/getting-started/introduction/index

This snippet demonstrates how to display a state variable, `State.count`, within the UI using the `rx.heading` component. Any component referencing a state variable will automatically update when the state changes, ensuring a reactive user interface.

```python
rx.heading(State.count, font_size="2em"),
```
Tokens:
Raw