React-i-Py
Tags: webdev, javascript, react, python
Published: 2023-09-24 12:30:31

**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

{% embed https://reactpy.dev/docs/guides/creating-interfaces/html-with-reactpy/index.html#html-with-reactpy %}

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

Connect me on [LinkedIn](https://www.linkedin.com/in/aniket-mahajan-275305243/)

**Follow and like for more .**