Getting Started with ReactPy – KDnuggets

Image by author

With the growing popularity of ReactJS in web development, there is a growing demand for a similar framework in Python for building production-ready machine learning, AI, and data science applications. That’s where ReactPy comes in, giving beginners, data scientists, and engineers the ability to build ReactJS-like applications in Python. ReactPy provides users with a simple, declarative visual framework that efficiently abstracts applications down to complex use cases.

In this blog post, we’ll explore ReactPy, learn how to build a simple application and run it in both a web browser and a Jupyter Notebook. In particular, we will cover:

• Running ReactPy on a web browser using various backends APIs.
• Running ReactPy in a Jupyter Notebook using Jupyter widgets.

ReactPy is a Python library for creating user interfaces without using JavaScript. ReactPy interfaces are built using components that offer a similar experience to ReactJS.

Designed for simplicity, ReactPy has a gentle learning curve and minimal API surface. This makes it accessible to those with no web development experience, yet it can also scale to support sophisticated applications.

It’s pretty easy to install ReactPy using pip:

After installation, try running the sample application using the script below.

python -c "import reactpy; reactpy.run(reactpy.sample.SampleApp)"

Our app starlette The backend runs on a local address. Just copy and paste it into your browser.

As we can see ReactPy works perfectly.

You can also install with a backend of your choice. In our case, we will install ReactPy with a fastapi backend.

pip install "reactpy[fastapi]"

Here is a list of the most popular Python backends that come with ReactPy:

We will now try to create a simple application with title 1 and a paragraph and run it in the default background (starlette).

• When you create a new component function, try to add a magic function @componnet above the function.
• After that, create a web page skeleton with various HTML elements such as:
  • html.h1 For Title 1.
  • html.b for the bold.
  • html.ul and html.li For bullet points.
  • html.img for pictures.

from reactpy import component, html, run


@component
def App():
    return html.section(
        html.h1("Welcome to KDnuggets"),
        html.p("KD stands for Knowledge Discovery."),
    )


run(App)

Save the above code a reactpy_simple.py file and run the following command in the terminal.

Our simple web application works smoothly.

Let’s try adding more html components like image and list and run the application fastapi backend. for that:

1. import FastAPI class and configure begining reactpy.backend.fastapi
2. Create a component function called Photo() and add all HTML elements.
3. Create an application object using FastAPI object and configure it with a ReactPy component.

from fastapi import FastAPI
from reactpy import component, html
from reactpy.backend.fastapi import configure


@component
def Photo():
    return html.section(
        html.h1("KDnuggets Blog Featured Image"),
        html.p(html.b("KD"), " stands for:"),
        html.ul(html.li("K: Knowledge"), html.li("D: Discovery")),
        html.img(
            
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": "width": "50%",
                "alt": "KDnuggets About Image",
            
        ),
    )


app = FastAPI()
configure(app, Photo)

save the file as reactpy_advance.py And run the application as you would run any FastAPI application using unicorn.

uvicorn reactpy_advance:app

As we can see, our application works with additional HTML elements.

To verify that it works with FastAPI as a backend, we’ll add /docs on the link.

Running and testing ReactPy in a Jupyter Notebook requires the installation of a Jupyter widget called reactpy_jupyter.

%pip install reactpy_jupyter

Before running anything, first run the following command to activate the widget.

or use %config Magic function for registration reactpy_jupyter As a permanent IPython extension in your configuration file.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

We have now launched the ReactPy component in a Jupyter Notebook. instead of using run()We run the component function directly.

from reactpy import component, html


@component
def App():
    return html.section(
        html.h1("Welcome to KDnuggets"),
        html.p("KD stands for Knowledge Discovery."),
    )


App()

Similar to the previous examples, we will run an extended example by running Photo() function.

from reactpy import component, html


@component
def Photo():
    return html.section(
        html.h1("KDnuggets Blog Featured Image"),
        html.p(html.b("KD"), " stands for:"),
        html.ul(html.li("K: Knowledge"), html.li("D: Discovery")),
        html.img(
            
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": "width": "50%",
                "alt": "KDnuggets About Image",
            
        ),
    )


Photo()

We can also create an interactive application using buttons and inputs as shown below. You can read the ReactPy documentation for creating user interfaces, interactivity, control state, API hooks, and escape hatches.

A gif from ReactPy on Binder

In short, this blog post provides an introduction to ReactPy, showing how to build simple ReactPy applications. By running ReactPy in a web browser using various API backends, as well as in Jupyter Notebooks using Jupyter widgets, we saw the flexibility of ReactPy to allow developers to build applications in both web and notebook environments.

ReactPy shows promise as a Python library for creating reactive user interfaces that can reach a wide audience. With continued development, ReactPy can become a compelling alternative to JavaScript-based React for machine learning and AI Python applications.

Abid Ali Awan (@1abidaliawan) is a certified data scientist professional who enjoys building machine learning models. Currently, he focuses on content creation and writes technical blogs on machine learning and data science technologies. Abid holds a Master’s degree in Technology Management and a Bachelor’s degree in Telecommunications Engineering. His vision is to create an AI product using a graph neural network for students struggling with mental illness.