HTML With ReactPy#

In a typical Python-based 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. This is done by allowing HTML interfaces to be constructed in Python. Take a look at the two code examples below. The first one shows how to make a basic title and todo list using standard HTML, the second uses ReactPy in Python, and below is a view of what the HTML would look like if displayed:

<h1>My Todo List</h1>
    <li>Build a cool new app</li>
    <li>Share it with the world!</li>
from reactpy import html

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

My Todo List

  • Build a cool new app
  • Share it with the world!

What this shows is that you can recreate the same HTML layouts with ReactPy using functions from the reactpy.html module. These function share the same names as their corresponding HTML tags. For instance, the <h1/> element above has a similarly named h1() function. With that said, while the code above looks similar, it’s not very useful because we haven’t captured the results from these function calls in a variable. To do this we need to wrap up the layout above into a single div() and assign it to a variable:

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

Adding HTML Attributes#

That’s all well and good, but there’s more to HTML than just text. What if we wanted to display an image? In HTMl we’d use the <img> element and add attributes to it order to specify a URL to its src and use some style to modify and position it:

    style="width: 50%; margin-left: 25%;"
    alt="Billie Holiday"

In ReactPy we add these attributes to elements using a dictionary:

        "src": "",
        "class_name": "img-fluid",
        "style": {"width": "50%", "margin_left": "25%"},
        "alt": "Billie Holiday",
Billie Holiday

There are some notable differences. First, all names in ReactPy use snake_case instead of dash-separated words. For example, tabindex and margin-left become tab_index and margin_left respectively. Second, instead of using a string to specify the style attribute, we use a dictionary to describe the CSS properties we want to apply to an element. This is done to avoid having to escape quotes and other characters in the string. Finally, the class attribute is renamed to class_name to avoid conflicting with the class keyword in Python.

For full list of supported attributes and differences from HTML, see the HTML Attributes reference.

Read More

Dive into the data structures ReactPy uses to represent HTML