ReactPy
ReactPy là một thư viện để xây dựng giao diện người dùng bằng Python mà không cần sử dụng JavaScript. Giao diện ReactPy được tạo ra từ các thành phần có giao diện và hoạt động tương tự như những gì bạn tìm thấy trong ReactJS. Thiết kế với sự đơn giản trong tâm trí, ReactPy có thể được sử dụng bởi những người không có kinh nghiệm phát triển web, đồng thời mạnh mẽ đủ để phát triển theo những hoài bão của bạn.
Các Hệ thống Hỗ trợ
Hệ thống Sẵn có| Hệ thống Bên ngoài
Flask, FastAPI, Sanic, Tornado | Django, Jupyter, Plotly-Dash
Tóm lược
Để có một ý tưởng sơ bộ về cách viết ứng dụng trong ReactPy, hãy xem ứng dụng Hello World nhỏ này.
from reactpy import component, html, run
@component
def hello_world():
return html.h1("Hello, World!")
run(hello_world)
ReactPy
ReactPy là một thư viện để xây dựng giao diện người dùng bằng Python mà không cần JavaScript. Giao diện ReactPy được tạo ra từ components, có giao diện và hoạt động tương tự như những gì bạn tìm thấy trong ReactJS. Thiết kế với sự đơn giản trong tâm trí, ReactPy có thể được sử dụng bởi những người không có kinh nghiệm phát triển web, đồng thời mạnh mẽ đủ để phát triển theo những hoài bão của bạn.
Tóm lược
Để có một ý tưởng sơ bộ về cách viết ứng dụng trong ReactPy, hãy xem ứng dụng nhỏ “hello world” bên dưới:
main.py
from reactpy import component, html, run
@component
def App():
return html.h1("Hello, world!")
run(App)
🚀 kết quả
Gợi ý
Hãy thử nhấn vào tab 🚀 kết quả để xem nội dung hiển thị!
Về code này, trước tiên, nó import một số công cụ từ reactpy mà sẽ được sử dụng để mô tả và thực hiện ứng dụng. Sau đó, chúng ta tạo một hàm App để định nghĩa nội dung mà ứng dụng hiển thị. Cụ thể, nó hiển thị một loại phần tử HTML gọi là h1 section heading. Quan trọng là, một decorator @component đã được áp dụng cho hàm App để biến nó thành một component. Cuối cùng, chúng ta run một máy chủ web phát triển bằng cách truyền thành phần App cho hàm run().
Lưu ý
Xem Running ReactPy in Production để tìm hiểu cách sử dụng máy chủ cấp sản phẩm để chạy ReactPy.
Học ReactPy
Tài liệu này đã được chia thành các chương và phần giới thiệu bạn với các khái niệm từng bước với giải thích chi tiết và nhiều ví dụ. Bạn có thể tự do nắm bắt bất kỳ nội dung nào có vẻ thú vị. Mặc dù mỗi chương giả định kiến thức từ những chương trước, khi bạn gặp một khái niệm mà bạn không quen thuộc, bạn nên tìm các liên kết sẽ giúp bạn dẫn đến nơi nó được giảng dạy ban đầu.
Chương 1 – Bắt đầu
Nếu bạn muốn theo dõi các ví dụ trong các phần tiếp theo, bạn nên bắt đầu ở đây để bạn có thể install ReactPy. Phần này cũng chứa thông tin chi tiết hơn về cách run ReactPy trong ngữ cảnh khác nhau. Ví dụ, nếu bạn muốn nhúng ReactPy vào ứng dụng hiện có hoặc chạy ReactPy trong một Jupyter Notebook, đây là nơi bạn có thể tìm hiểu cách thực hiện những việc đó.
Đọc thêm
Cài đặt ReactPy và chạy nó theo nhiều cách khác nhau – với các máy chủ web và framework khác nhau. Bạn thậm chí có thể nhúng ReactPy vào ứng dụng hiện có.
Chương 2 – Tạo Giao diện
ReactPy là một gói Python để tạo giao diện người dùng (UI). Những giao diện này được xây dựng từ các thành phần nhỏ về chức năng như nút, văn bản và hình ảnh. ReactPy cho phép bạn kết hợp những thành phần này thành “components” có thể tái sử dụng. Trong các phần tiếp theo, bạn sẽ tìm hiểu cách tạo ra các thành phần giao diện người dùng này và cách tổ chức chúng thành các thành phần. Sau đó, bạn sẽ sử dụng kiến thức này để tạo giao diện từ dữ liệu thô:
main.py
from reactpy import component, html, run
@component
def DataList(items, filter_by_priority=None, sort_by_priority=False):
if filter_by_priority is not None:
items = [i for i in items if i["priority"] <= filter_by_priority]
if sort_by_priority:
items = sorted(items, key=lambda i: i["priority"])
list_item_elements = [html.li({"key": i["id"]}, i["text"]) for i in items]
return html.ul(list_item_elements)
@component
def TodoList():
tasks = [
{"id": 0, "text": "Make breakfast", "priority": 0},
{"id": 1, "text": "Feed the dog", "priority": 0},
{"id": 2, "text": "Do laundry", "priority": 2},
{"id": 3, "text": "Go on a run", "priority": 1},
{"id": 4, "text": "Clean the house", "priority": 2},
{"id": 5, "text": "Go to the grocery store", "priority": 2},
{"id": 6, "text": "Do some coding", "priority": 1},
{"id": 7, "text": "Read a book", "priority": 1},
]
return html.section(
html.h1("My Todo List"),
DataList(tasks, filter_by_priority=1, sort_by_priority=True),
)
run(TodoList)
🚀 kết quả
Đọc thêm
Học cách xây dựng giao diện người dùng từ các phần tử HTML cơ bản và các thành phần có thể tái sử dụng.
Chương 3 – Thêm Tính năng Tương tác
Thường xuyên, các thành phần cần thay đổi những gì hiển thị trên màn hình sau khi tương tác. Ví dụ, việc nhập vào mẫu nên cập nhật trường nhập, bấm nút “Bình luận” nên đưa ra trường nhập văn bản, bấm “Mua” nên đưa sản phẩm vào giỏ hàng. Các thành phần cần “ghi nhớ” các thông tin như giá trị hiện tại của đầu vào, hình ảnh hiện tại, giỏ hàng. Trong ReactPy, loại bộ nhớ cụ thể cho từng thành phần như vậy được tạo và cập nhật bằng một “hook” được gọi là use_state() tạo ra một biến trạng thái và bộ đặt trạng thái tương ứng:
main.py
import json
from pathlib import Path
from reactpy import component, hooks, html, run
HERE = Path(__file__)
DATA_PATH = HERE.parent / "data.json"
sculpture_data = json.loads(DATA_PATH.read_text())
@component
def Gallery():
index, set_index = hooks.use_state(0)
def handle_click(event):
set_index(index + 1)
bounded_index = index % len(sculpture_data)
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)
data.json🚀 kết quả
Trong ReactPy, use_state, cũng như bất kỳ hàm nào khác mà tên bắt đầu bằng use, được gọi là một “hook”. Đây là những hàm đặc biệt chỉ nên được gọi khi ReactPy đang rendering. Chúng cho phép bạn “kết nối” vào các khả năng khác nhau của các thành phần của ReactPy, trong đó use_state chỉ là một phần (chúng ta sẽ tìm hiểu về các phần khác later).
Đọc thêm
Học cách giao diện người dùng có thể phản hồi tương tác của người dùng trong thời gian thực.
Chương 4 – Quản lý Trạng thái
Đọc thêm
Đang xây dựng 🚧
Chương 5 – Các Cổng Thoát
Đọc thêm
Đang xây dựng 🚧
Chương 6 – Hiểu ReactPy
Đọc thêm
Đang xây dựng 🚧
Tài Nguyên
Theo các liên kết dưới đây để tìm hiểu thêm về dự án này.
- Try ReactPy (Jupyter Notebook)
- Documentation
- GitHub Discussions
- Discord
- Contributor Guide
- Code of Conduct
Chi tiết Tải về:
Tác giả: reactive-python
Nguồn: https://github.com/reactive-python/reactpy
Giấy phép: MIT license
