How to create a web app with ReactPy

Endrit Qerreti

Endrit Qerreti

ReactPy is library that you can use to build apps using python.

Reactpy components look and function similarly with components on reactjs. However, even though they look similar, they are both two different libraries. The difference between those two libraries, reactpy and reactjs is that, reactpy uses python while reactjs uses javascript.

Both libraries are good on what they do. However, in this tutorial you will learn how to install reactPy, and how to create a simple app using ReactPy and python.

Step 1 - Install reactpy

Before you start using reactPy library, you need to install it first. To install reactPy is easy,  and you can install it via one line command using pip.

Run the command below to install ReactPy

pip install reactpy

Next, you will see the following output on your terminal, this means that reactpy is being downloaded and also downloading its dependencies

Step 2 - Verify installation

Once ReactPy has been installed on your system, to make sure that ReactPy got installed correctly, the following command will show the version of reactpy

reactpy --version

Step 3 - Create ReactPy app

Now that ReactPy is installed on your system, you can start using ReactPy. First let's take a look how a simple ReactPy app looks like

from reactpy import component, html, run


@component
def App():
    return html.h1("Hello, world!")


run(App)

If you run the code above, you will get "Hello, World"

So now you know how to display a simple h1 tag, let's now try to create a simple app that will display time in a h1 tag.

Create display_time.py

touch display_time.py

💡
Note: display_time.py is the name of the app, you can call this file anything you want. 

Next, import reactpy and components

from reactpy import component, html, run

Now, since we are going to display time, we need to import time module too

import time

Next, we are going to declare the variable current_time

current_time = time.ctime()

Next, we are going to define a function called display_time

@component
def display_time():

    

Next, we are going to return a h1 tag when the function display_time is executed

return html.h1("The current time is ", current_time)

Now, it's time to call the function that we created

run(display_time)

Here's the complete code

from reactpy import component, html, run
import time


current_time = time.ctime()


def display_time():
    return html.h1 ("The current time is ", current_time)
  


run(display_time)

Now, let's run it and see what it does

python3 display_time.py

Once run the command above, the server will be started on 127.0.0.1:8000 as shown in the image below

So far it works good, but the font size is too big, let's make it a bit smaller

To change the font size of the h1 tag, we need to add styling by using the html attributes. For example to set the font size to 15px, we can do

    return html.h1 ({"style":
                     {
                        "font-size":"15px",

                     },
                       },
                       "The current time is ", current_time
                       )

Restart the app and the font size should be 15px as shown in the image below

Now let's align text to the center

    return html.h1 ({"style":
                     {
                        "font-size":"15px",
                        "text-align":"center",

                     },
                       },
                       "The current time is ", current_time
                       )

I was thinking to change the color of "The current time is" and the color of "current_time" variable, but there's an issue. We are using only one h1 tag to show two outputs, so we can't do this with the above code.

To be able to do this, we are going to create a main div, a h1 tag for the text "The current time is" and another h1 tag for the "current_time" variable.

Main div

    return html.div({"style":{"color":"black", 
                               "font-size":"12px",
                               "display":"flex",
                               "flex-direction":"row",
                               "justify-content":"center",
                               
                               },
                                              },

h1 tag of "The current time is"

html.h1( {"style":{
"color":"white",
"background-color":"black",
"padding":"10px",
 },
 },"The current time is ",

h1 tag of the current_time variable

html.h1 ({"style":{
"color":"yellow",
"margin-left":"5px",
"text-transform":"uppercase",
"background-color":"black",
"padding":"10px",
 },
 }, " ", current_time

Now let's put it all together and run the code

python3 display_time.py

Output

INFO:     Started server process [4152212]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)

And you should see the following

Here's the complete code for display_time.py

from reactpy import component, html, run
import time


current_time = time.ctime()


@component
def display_time():
    return html.div(
        {
            "style": {
                "color": "black",
                "font-size": "12px",
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center",
                "background-size": "cover",
            },
        },
        html.div({"class_name": "main"}),
        html.h1(
            {
                "style": {
                    "color": "white",
                    "background-color": "black",
                    "padding": "10px",
                },
            },
            "The current time is ",
        ),
        html.h1(
            {
                "style": {
                    "color": "yellow",
                    "margin-left": "5px",
                    "text-transform": "uppercase",
                    "background-color": "black",
                    "padding": "10px",
                },
            },
            " ",
            current_time,
        ),
    )


run(display_time)

You can import this app on your existing projects, or simply add more stuff on it and customize it as per your preference. Happy coding!

Conclusion

In this tutorial, we created a simple web app using python and ReactPy.  I hope this tutorial helped you to understand how you can create an app with ReactPy. The documentations doesn't seem to be fully completed, so keep an eye on them for new documentations.