[ad_1]
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_3.png)
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.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_1.png)
As we can see ReactPy works perfectly.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_2.png)
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
andhtml.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.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_9.png)
Our simple web application works smoothly.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_15.png)
Let’s try adding more html components like image and list and run the application fastapi
backend. for that:
- import
FastAPI
class andconfigure
beginingreactpy.backend.fastapi
- Create a component function called
Photo()
and add all HTML elements. - 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
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_7.png)
As we can see, our application works with additional HTML elements.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_18.jpg)
To verify that it works with FastAPI as a backend, we’ll add /docs
on the link.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_4.png)
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.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_6.png)
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()
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_11.png)
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.
![Getting started with ReactPy](https://www.kdnuggets.com/wp-content/uploads/./awan_getting_started_reactpy_10.gif)
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.
[ad_2]
Source link