ReactPy：使用Python搭建动态前端的应用程序。
微信搜索关注《Python学研大本营》，加入读者群，分享更多精彩
在Web开发领域，ReactJS已经成为一个占据主导地位的工具，为开发人员提供了强大的工具集，用于创建动态和交互式用户界面。但是，如果你更喜欢Python的多功能性和简单性作为后端，并希望在前端中利用其功能，该怎么办？这就是ReactPy的用途，这是一个Python库，将ReactJS熟悉的语法和灵活性带入Python web开发的世界。
在本文中，我们将概述ReactPy并探索其功能、优点和用例。无论你是想要增强前端技能的Python爱好者，还是寻求无缝集成你的后端和前端技术的开发人员，ReactPy都可以成为你工具包中有价值的补充。我们还将指导你完成设置ReactPy的过程，并演示如何使用此库构建简单的前端应用程序。
ReactPy是什么？
ReactPy的优点和缺点
优点：
-
熟悉性：许多开发人员已经熟悉React了。ReactPy提供了类似的编程模型和基于组件的架构，使Python开发人员能够利用其现有的知识和技能。
-
易学易用：ReactPy也易于学习和使用，使其适用于各个级别的开发人员。
-
全栈式开发：使用ReactPy，开发人员可以使用Python在Web应用程序的前端和后端工作。这消除了在不同的编程语言和框架之间切换的需要，提供了更无缝的全栈开发体验。
-
社区和生态系统：虽然ReactPy相对较新（约3个月前首次发布），但它受益于充满活力的Python社区和生态系统。开发人员可以利用现有的Python库、工具和框架来增强他们的ReactPy项目，创建更为强大和可扩展的应用程序。同时，你还可以在ReactJS中搜索你的问题，然后只需将代码从JavaScript更改为Python。
-
易于安装：如果你已经运行了Python，安装ReactPy非常容易。
-
Jupyter Notebooks：在开发过程中在Jupyter Notebooks中运行应用程序。这允许逐步运行程序，使得调试和向其他人解释程序更加容易。
-
支持其他Python后端：ReactPy支持Flask、FastAPI、Sanic、Tornado、Django和许多其他库。
缺点：
-
ReactPy相对较新：由于它发布时间不长，仍存在一些未完成的部分、正在完善的文档内容和社区较小等问题。
-
Python的异步限制：Python的异步能力，特别是在Python 3.7之前的版本中，可能与ReactPy的响应式编程模型不完全一致。这可能会使处理异步操作（例如网络请求）更具挑战性并需要额外的解决方案。
-
不是所有的React功能都完成了：由于ReactPy仍在开发中，不是所有的React功能都已经完成并可以使用。
-
在人力资源和公司中受欢迎程度有限：由于ReactPy是一个相对较新的库，它可能不会被不同IT公司的HR和程序员广泛认可或追捧。这意味着专门针对ReactPy开发的工作机会可能比像ReactJS这样更成熟的前端技术有限。
开始使用ReactPy
通常会在支持其原生后端之一上pip安装ReactPy。例如，如果想使用Starlette后端运行ReactPy，则可以运行以下命令：
【Starlette】：https://www.starlette.io/
pip install "reactpy[starlette]"
注：本文的后续部分将使用Starlette后端来使用ReactPy。如果你安装了其他后端，不能保证你的代码能够运行。
ReactPy包含了内置的对于各种后端实现的支持。如果有需要，可以通过用逗号分隔它们来安装多个选项：
pip install "reactpy[fastapi,flask,sanic,starlette,tornado]"
如果你想要安装一个“纯”的ReactPy版本，没有任何后端实现，你可以直接安装，不需要任何安装扩展。你可能会这样做，如果你想要使用自定义后端（https://reactpy.dev/docs/guides/escape-hatches/using-a-custom-backend.html#using-a-custom-backend）或者手动固定你所选择的后端的依赖项：
pip install reactpy
简单的前端应用实例
从一个简单的HelloWorld应用程序开始。你可以使用Jupyter来运行这段代码，或者只是使用普通的Python脚本：
# 组件用于创建返回类似HTML的React组件的函数，
# html用于网站元素，
# run用于启动你的应用程序。
from reactpy import component, html, run
# 定义你的组件
@component
def HelloWorld():
return html.h1("Hello, World!")
# 在开发服务器上运行它。仅用于测试目的。
run(HelloWorld)
示例输出应该如下所示：
2023-06-09T14:21:46+0200 | WARNING | The `run()` function is only intended for testing during development! To run in production, consider selecting a supported backend and importing its associated `configure()` function from `reactpy.backend.<package>` where `<package>` is one of ['starlette', 'fastapi', 'sanic', 'tornado', 'flask']. For details refer to the docs on how to run each package.
2023-06-09T14:21:46+0200 | INFO | Running with starlette.applications.Starlette at http://127.0.0.1:8000
INFO: Started server process [12328]
INFO: Waiting for application startup.
INFO: Application startup complete.
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: 127.0.0.1:8274 - "GET / HTTP/1.1" 200 OK
INFO: 127.0.0.1:8274 - "GET /index.53b29c63.js HTTP/1.1" 200 OK
INFO: ('127.0.0.1', 8276) - "WebSocket /_reactpy/stream" [accepted]
INFO: connection open
INFO: 127.0.0.1:8274 - "GET /reactpy-logo.ico HTTP/1.1" 200 OK
现在，如果你点击链接http://127.0.0.1:8000，你将能够看到你的第一个运行的ReactPy应用程序：
Hello World!
通过在Python控制台中使用Ctrl+C，你可以关闭应用程序，网站将不再可访问。所以，基本上，每当你想要创建一个组件时，你都可以创建一个返回html的函数并添加一个@component装饰器。
现在，让我们来做一些更复杂的事情。通过使用不同的HTML元素，你可以添加图片、标题、说明，并将它们全部放入一个函数中：
from reactpy import component, html, run
@component
def Title(title):
return html.h1(title)
# 从https://picsum.photos/id/152/500/300，加载一个图片，
# 用CSS指定图片的样式：width: 30%
@component
def Photo():
return html.img(
{
"src": "https://picsum.photos/id/152/500/300",
"style": {"width": "30%"},
}
)
@component
def PhotographerName(caption):
return html.h4(caption)
# 在一个函数中合并之前的所有组件
@component
def PhotoViewer():
return html.section(
Title("Photo of the day"),
Photo(),
PhotographerName("Steven Spassov")
)
run(PhotoViewer)
结果：
更多组件。
可以看到，你的代码是可重复使用的。例如，你可以定义一个新的函数，它具有照片和摄影师的名字，然后多次使用该函数，仅指定url和名字本身。这已经足够搭建类似于画廊网站的东西了。
现在，让我们添加一些交互性。毕竟，React是关于对用户的操作做出反应的。编写如下所示的代码：
from reactpy import component, html, run
# 定义一个函数，返回一个按钮，点击后执行
# Python函数"handle_event"(输出一些文本)
@component
def PrintButton(display_text, message_text):
def handle_event(event):
print(message_text)
return html.button({"on_click": handle_event}, display_text)
@component
def App():
return html.div(
PrintButton("Play", "Playing"),
PrintButton("Pause", "Paused"),
)
run(App)
你的应用程序将如下所示：
我们现在有按钮。
当点击播放按钮时，Python将输出“正在播放”，而点击暂停按钮时，它将输出“已暂停”：
INFO: ('127.0.0.1', 8385) - "WebSocket /_reactpy/stream" [accepted]
INFO: connection open
INFO: 127.0.0.1:8383 - "GET /reactpy-logo.ico HTTP/1.1" 304 Not Modified
Playing
Paused
因此，通过使用默认的HTML元素和ReactPy组件，你可以轻松地搭建前端应用程序。最后一个例子让我们来看看React的状态。你知道，没有状态，React就不是React。让我们看一下这段代码：
import json
from pathlib import Path
from reactpy import component, hooks, html, run
# 定义当前脚本目录，在 DATA_PATH 中保存 data.json 文件的路径、
# 在sculpture_data（一个字典）中加载这个json文件
HERE = Path(__file__)
DATA_PATH = HERE.parent / "data.json"
sculpture_data = json.loads(DATA_PATH.read_text())
@component
def Gallery():
# 设置React状态
index, set_index = hooks.use_state(0)
# 按下按钮后将运行的函数。
# 它改变了索引，所以我们可以跟踪当前状态。
def handle_click(event):
set_index(index + 1)
# 索引不应该大于数据中的元素数量
bounded_index = index % len(sculpture_data)
# 从dict中获取数据
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"on_click": handle_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
html.p(description),
)
run(Gallery)
为了运行这段代码，你还需要在Python脚本所在的同一目录中创建data.json文件。数据的示例：
[
{
"name": "Homenaje a la Neurocirugía",
"artist": "Marta Colvin Andrade",
"description": "Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.",
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Homenaje_a_la_Neurocirug%C3%ADa%2C_Instituto_de_Neurocirug%C3%ADa%2C_Providencia%2C_Santiago_20200106_02.jpg/1024px-Homenaje_a_la_Neurocirug%C3%ADa%2C_Instituto_de_Neurocirug%C3%ADa%2C_Providencia%2C_Santiago_20200106_02.jpg",
"alt": "A bronze statue of two crossed hands delicately holding a human brain in their fingertips."
},
{
"name": "Eternal Presence",
"artist": "John Woodrow Wilson",
"description": "Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as \"a symbolic Black presence infused with a sense of universal humanity.\"",
"url": "https://upload.wikimedia.org/wikipedia/commons/6/6f/Chicago%2C_Illinois_Eternal_Silence1_crop.jpg",
"alt": "The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity."
}
]
你可以在网站上添加更多元素以获得更多可能的状态。启动该应用程序后，你可以获得一个具有状态的交互式网站：
从JSON中加载数据的网站，具有在点击按钮时更改的状态。
总结
ReactPy是一个Python库，它将ReactJS类似的能力带到了使用Python进行前端开发的领域。使用ReactPy，可以轻松成为全栈开发人员，使用同一种语言来处理前端和后端。
通过本文，你学习了ReactPy的基础知识，可以编写简单的前端应用程序并了解它们的工作原理。请参考文档和社区资源以获取进一步的指导。
使用ReactPy发挥Python在前端开发中的力量。开始尝试轻松构建现代用户界面。
推荐书单
【秋日阅读企划】点击下方链接立享优惠，叠加五折使用
秋日阅读企划
https://pro.m.jd.com/mall/active/2Z3HoZGKy5i9aEpmoTUZnmcoAhHg/index.html
《Python Web开发从入门到精通》
《Python Web开发从入门到精通》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Python进行Web程序开发应该掌握的各项技术。全书共分15章，包括HTML和CSS基础、JavaScript基础、网络编程基础、MySQL数据库基础、Web框架基础、Flask框架基础、Flask框架进阶、Django框架基础、Django框架进阶、Tornado框架基础、FastAPI框架基础、Flask框架开发好记星博客系统、Django框架开发智慧星学生管理系统、Tornado框架开发BBS社区系统和FastAPI框架开发看图猜成语微信小程序等内容。
Python Web开发从入门到精通https://item.jd.com/13291942.html
精彩回顾
《Python性能分析，使用cProfile可视化并解决性能瓶颈问题》
《事半功倍，掌握12个在VSCode中进行Python开发的小技巧》
微信搜索关注《Python学研大本营》，加入读者群
访问【IT今日热榜】，发现每日技术热点
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
