无 JavaScript 构建 Web 应用程序入门指南

随着ReactJS在Web开发中的日益流行，人们对于在Python中构建生产就绪的机器学习、人工智能和数据科学应用程序的类似框架的需求也越来越高。这就是ReactPy的所在地，为初学者、数据科学家和工程师提供了在Python中创建类似于ReactJS的应用程序的能力。ReactPy提供了一个简单的、声明式的视图框架，可以有效地将应用程序扩展到复杂的用例。

在本篇博客中，我们将探索ReactPy，学习如何构建一个简单的应用程序，并在Web浏览器和Jupyter Notebook中运行它。特别是，我们将涵盖以下内容：

• 使用各种后端API在Web浏览器上运行ReactPy。
• 使用Jupyter小部件在Jupyter Notebook中运行ReactPy。

ReactPy是什么？

ReactPy是一个用于构建用户界面的Python库，不需要使用JavaScript。ReactPy的界面是使用组件构建的，这些组件提供了与ReactJS中找到的类似体验。

设计简单，ReactPy具有平缓的学习曲线和最小的API表面。这使得它适用于没有Web开发经验的人员，但也可以扩展以支持复杂的应用程序。

设置

通过使用pip安装ReactPy非常容易：

pip install reactpy

安装完成后，使用下面的脚本运行一个示例应用程序。

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

我们的带有starlette后端的应用程序正在本地地址上运行。只需将其复制并粘贴到Web浏览器中即可。

正如我们所观察到的，ReactPy正在完美地运行。

您还可以使用所选的后端进行安装。在我们的情况下，我们将使用fastapi后端安装ReactPy。

pip install "reactpy[fastapi]"

这里是ReactPy附带的最流行的Python后端列表：

• fastapi：https://fastapi.tiangolo.com
• flask：https://palletsprojects.com/p/flask/
• sanic：https://sanicframework.org
• starlette：https://www.starlette.io/
• tornado：https://www.tornadoweb.org/en/stable/

在Web浏览器上运行ReactPy

现在，我们将尝试构建一个简单的应用程序，其中包含标题1和段落，并在默认后端（starlette）上运行它。

• 当您创建一个新组件函数时，请尝试在函数上方添加一个魔术函数@component。
• 之后，使用不同的HTML元素创建一个Web页面的骨架，如：
  • 用于标题1的html.h1。
  • 用于加粗的html.b。
  • 用于项目符号的html.ul和html.li。
  • 用于图像的html.img。

from reactpy import component, html, run


@component
def App():
    return html.section(
        html.h1("欢迎来到小猪AI"),
        html.p("KD代表知识发现。"),
    )


run(App)

将上面的代码保存在reactpy_simple.py文件中，并在终端中运行以下命令。

python reactpy_simple.py

我们的简单Web应用程序正在顺利运行。

让我们尝试添加更多的HTML组件，如图像和列表，并使用fastapi后端运行应用程序。为此：

1. 从reactpy.backend.fastapi导入FastAPI类和configure
2. 创建一个组件函数Photo()并添加所有HTML元素。
3. 使用FastAPI对象创建一个应用程序对象，并将其配置为ReactPy组件。

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


@component
def Photo():
    return html.section(
        html.h1("小猪AI 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": "小猪AI About Image",
            }
        ),
    )


app = FastAPI()
configure(app, Photo)

将文件保存为reactpy_advance.py并像运行任何FastAPI应用程序一样运行应用程序，使用独角兽。

uvicorn reactpy_advance:app

可以观察到，我们的应用程序正在运行并具有额外的HTML元素。

为了确认它正在作为后端运行FastAPI，我们将在链接中添加/docs。

在Jupyter Notebook中运行ReactPy

在Jupyter Notebook中运行和测试ReactPy需要安装名为reactpy_jupyter的Jupyter小部件。

%pip install reactpy_jupyter

在运行任何内容之前，请先运行以下命令以激活小部件。

import reactpy_jupyter

或者使用%config魔术函数在您的配置文件中注册reactpy_jupyter作为永久IPython扩展。

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

现在，我们将在Jupyter Notebook中运行ReactPy组件。与使用run()类似，我们将直接运行组件函数。

from reactpy import component, html


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


App()

与以前的示例类似，我们将通过运行Photo()函数来运行高级示例。

from reactpy import component, html


@component
def Photo():
    return html.section(
        html.h1("小猪AI 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": "小猪AI About Image",
            }
        ),
    )


Photo()

我们也可以创建一个具有按钮和输入的交互式应用程序，如下所示。您可以阅读ReactPy文档以创建用户界面、交互性、管理状态、API挂钩和逃生舱。

来自ReactPy on Binder的Gif

结论

总之，本篇博客介绍了ReactPy的基本概念，演示了如何创建简单的ReactPy应用程序。通过在不同的API后端中在Web浏览器中运行ReactPy以及在Jupyter Notebook中使用Jupyter小部件运行ReactPy，我们看到了ReactPy在允许开发人员为Web和Notebook环境构建应用程序方面的灵活性。

ReactPy作为一个Python库，为创建响应式用户界面并吸引广泛受众提供了希望。随着持续的开发，ReactPy可能成为基于Python的机器学习和人工智能应用程序的具有吸引力的替代JavaScript的React。

• 在Binder上尝试ReactPy
• ReactPy文档
• GitHub存储库

Abid Ali Awan（@1abidaliawan）是一位认证的数据科学家专业人士，热爱构建机器学习模型。目前，他专注于内容创作和撰写有关机器学习和数据科学技术的技术博客。Abid拥有技术管理硕士学位和电信工程学士学位。他的愿景是使用图形神经网络为患有心理疾病的学生构建AI产品。