React-i-Py

Welcome to the Second Article of the series "ReactPy"

---

ReactJS

As ReactJS takes a approach of JSX to display HTML elements by Javascript.

Similar Approach is taken by Python

In the world of web development, the creation of a web application often involves a division of responsibilities between the client and server. The client handles the presentation and user interface, while the server manages data and logic. However, ReactPy, a Python library, takes a different approach by centralizing both the view and its associated data and logic within a single Python codebase. This innovative approach allows developers to construct HTML interfaces in Python itself, simplifying the development process. In this blog post, we'll explore how ReactPy empowers developers to create web interfaces using familiar Python syntax.

---

Let's see the key differences between HTML and ReactPy

Let's start by comparing traditional HTML with ReactPy. Suppose we want to create a simple web page with a title and a to-do list. In standard HTML, it would look like this:

HTML

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

With ReactPy, we can achieve the same result using Python code:

>>>ReactPy

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!"),
    ),
)

The ReactPy code closely resembles the HTML structure, with Python functions like h1, ul, and li corresponding to their HTML tag counterparts. However, to capture the layout, we wrap it in a div and assign it to a variable.

---

Attributes of HTML in ReactPy

Web pages often contain elements with various attributes, such as images with source URLs, classes for styling, styles for positioning, and more. In standard HTML, you would use attributes like this:

HTML

<img
    src="https://picsum.photos/id/237/500/300"
    class="img-fluid"
    style="width: 50%; margin-left: 25%;"
    alt="Billie Holiday"
    tabindex="0"
/>

In ReactPy, you can add these attributes using a Python dictionary:

>>>ReactPy

html.img(
    {
        "src": "https://picsum.photos/id/237/500/300",
        "class_name": "img-fluid",
        "style": {"width": "50%", "margin_left": "25%"},
        "alt": "Billie Holiday",
        "tab_index": "0",
    }
)

Key Differences

There are some key differences to note. First, ReactPy uses snake_case for attribute names, unlike the dash-separated words in HTML. For instance, tab-index becomes tab_index, and margin-left becomes margin_left. Second, instead of using a string for the style attribute, ReactPy employs a dictionary to define CSS properties. This approach simplifies code readability and avoids the need to escape characters within strings. Lastly, to prevent conflicts with the Python keyword class, ReactPy uses class_name for the class attribute.

---

Conclusion

In conclusion, ReactPy offers web developers a Pythonic way to create web interfaces by centralizing HTML layout and attributes within Python code. This approach not only simplifies the development process but also makes the code more readable and maintainable. Whether you're building a simple web page or a complex web application, ReactPy can streamline your development workflow and empower you to leverage Python's strengths in the world of web development. Give it a try and experience the benefits of Python-powered web development with ReactPy.

---

For more information visit

HTML With ReactPy - 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 ...

reactpy.dev

---

Connect me on LinkedIn

Follow and like for more .

Comments

[Khairunnisaas]

>>>ReactPy

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!"),
    ),
)

seems a lot to write just for creating a list with 2 items in it

[Aniket]

It's similar to JSX but with its pythonic nature makes it appear a lot to write.