Representing HTML 🚧

Note

Under construction 🚧

We’ve already discussed how to construct HTML with ReactPy in a previous section, but we skimmed over the question of the data structure we use to represent it. Let’s reconsider the examples from before - on the top is some HTML and on the bottom is the corresponding code to create it in ReactPy:

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

from reactpy import html

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

Since we’ve captured our HTML into out the layout variable, we can inspect what it contains. And, as it turns out, it holds a dictionary. Printing it produces the following output:

assert layout == {
    'tagName': 'div',
    'children': [
        {
            'tagName': 'h1',
            'children': ['My Todo List']
        },
        {
            'tagName': 'ul',
            'children': [
                {'tagName': 'li', 'children': ['Build a cool new app']},
                {'tagName': 'li', 'children': ['Share it with the world!']}
            ]
        }
    ]
}

This may look complicated, but let’s take a moment to consider what’s going on here. We have a series of nested dictionaries that, in some way, represents the HTML structure given above. If we look at their contents we should see a common form. Each has a tagName key which contains, as the name would suggest, the tag name of an HTML element. Then within the children key is a list that either contains strings or other dictionaries that represent HTML elements.

What we’re seeing here is called a “virtual document object model” or VDOM. This is just a fancy way of saying we have a representation of the document object model or DOM that is not the actual DOM.