Creating Interfaces#

ReactPy is a Python package for making user interfaces (UI). These interfaces are built from small elements of functionality like buttons text and images. ReactPy allows you to combine these elements into reusable, nestable “components”. In the sections that follow you’ll learn how these UI elements are created and organized into components. Then, you’ll use components to customize and conditionally display more complex UIs.

Section 1: HTML with ReactPy#

In a typical Python-base web application the responsibility of defining the view along with its backing data and logic are distributed between a client and server respectively. With ReactPy, both these tasks are centralized in a single place. The most foundational pilar of this capability is formed by allowing HTML interfaces to be constructed in Python. Let’s consider the HTML sample below:

<h1>My Todo List</h1>
<ul>
    <li>Build a cool new app</li>
    <li>Share it with the world!</li>
</ul>

To recreate the same thing in ReactPy you would write:

from reactpy import html

html.div(
    html.h1("My Todo List"),
    html.ul(
        html.li("Design a cool new app"),
        html.li("Build it"),
        html.li("Share it with the world!"),
    )
)

Construct HTML layouts from the basic units of user interface functionality.

Section 2: Your First Components#

The next building block in our journey with ReactPy are components. At their core, components are just a normal Python functions that return HTML. The one special thing about them that we’ll concern ourselves with now, is that to create them we need to add an @component decorator. To see what this looks like in practice we’ll quickly make a Photo component:

main.py

from reactpy import component, html, run


@component
def Photo():
    return html.img(
        {
            "src": "https://picsum.photos/id/237/500/300",
            "style": {"width": "50%"},
            "alt": "Puppy",
        }
    )


run(Photo)

🚀 result

Define reusable building blocks that it easier to construct complex interfaces.

Section 3: Rendering Data#

The last pillar of knowledge you need before you can start making interactive interfaces is the ability to render sections of the UI given a collection of data. This will require you to understand how elements which are derived from data in this way must be organized with “keys”. One case where we might want to do this is if items in a todo list come from a list of data that we want to sort and filter:

main.py

from reactpy import component, html, run


@component
def DataList(items, filter_by_priority=None, sort_by_priority=False):
    if filter_by_priority is not None:
        items = [i for i in items if i["priority"] <= filter_by_priority]
    if sort_by_priority:
        items = sorted(items, key=lambda i: i["priority"])
    list_item_elements = [html.li({"key": i["id"]}, i["text"]) for i in items]
    return html.ul(list_item_elements)


@component
def TodoList():
    tasks = [
        {"id": 0, "text": "Make breakfast", "priority": 0},
        {"id": 1, "text": "Feed the dog", "priority": 0},
        {"id": 2, "text": "Do laundry", "priority": 2},
        {"id": 3, "text": "Go on a run", "priority": 1},
        {"id": 4, "text": "Clean the house", "priority": 2},
        {"id": 5, "text": "Go to the grocery store", "priority": 2},
        {"id": 6, "text": "Do some coding", "priority": 1},
        {"id": 7, "text": "Read a book", "priority": 1},
    ]
    return html.section(
        html.h1("My Todo List"),
        DataList(tasks, filter_by_priority=1, sort_by_priority=True),
    )


run(TodoList)

🚀 result

Use data to organize and render HTML elements and components.