Начало работы с ReactPy - KDnuggets

Переиздано Платоном

Читают: 0

Начало работы с ReactPy
Изображение по автору

С ростом популярности ReactJS в веб-разработке растет спрос на аналогичную среду на Python для создания готовых к производству приложений для машинного обучения, искусственного интеллекта и обработки данных. Здесь на помощь приходит ReactPy, предоставляющий новичкам, специалистам по данным и инженерам возможность создавать ReactJS-подобные приложения на Python. ReactPy предоставляет пользователям простую декларативную структуру представления, которая эффективно масштабирует приложения для сложных вариантов использования.

В этом сообщении блога мы рассмотрим ReactPy, узнаем, как создать простое приложение и запустить его как в веб-браузере, так и в блокноте Jupyter. В частности, мы рассмотрим:

Запуск ReactPy в веб-браузере с использованием различных бэкэндов API.
Запуск ReactPy в Jupyter Notebook с использованием виджетов Jupyter.

РеактПи — это библиотека Python для создания пользовательских интерфейсов без использования JavaScript. Интерфейсы ReactPy построены с использованием компоненты которые предлагают аналогичный опыт в ReactJS.

Разработанный для простоты, ReactPy имеет плавную кривую обучения и минимальную поверхность API. Это делает его доступным для тех, у кого нет опыта веб-разработки, но его также можно масштабировать для поддержки сложных приложений.

Установить ReactPy довольно просто с помощью pip:

pip install reactpy

После установки попробуйте запустить пример приложения, используя приведенный ниже сценарий.

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

Наше приложение с starlette Бэкэнд работает на локальном адресе. Просто скопируйте его и вставьте в веб-браузер.

Начало работы с ReactPy

Как мы видим, ReactPy работает отлично.

Начало работы с ReactPy

Вы также можете установить с серверной частью по вашему выбору. В нашем случае мы установим ReactPy с Fastapi бэкенд.

pip install "reactpy[fastapi]"

Вот список самых популярных бэкендов Python, поставляемых с ReactPy:

Теперь мы попробуем создать простое приложение с заголовком 1 и абзацем и запустить его на серверной части по умолчанию (starlette).

Когда вы создаете новую функцию компонента, попробуйте добавить волшебную функцию @componnet над функцией.
После этого создайте скелет веб-страницы с различными элементами HTML, такими как:
- html.h1 для заголовка 1.
- html.b для жирного.
- html.ul и html.li для маркеров.
- html.img для изображений.

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)

Сохраните приведенный выше код в reactpy_simple.py файл и выполните следующую команду в терминале.

python reactpy_simple.py

Начало работы с ReactPy

Наше простое веб-приложение работает без сбоев.

Давайте попробуем добавить больше html-компонентов, таких как изображение и список, и запустим приложение, используя fastapi бэкенд. Для этого:

Импортировать FastAPI класс и configure от reactpy.backend.fastapi
Создайте функцию компонента с именем Photo() и добавьте все элементы HTML.
Создайте объект приложения, используя 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("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)

Сохраните файл с именем reactpy_advance.py и запустите приложение, как вы запускаете любое приложение FastAPI, используя unicorn.

uvicorn reactpy_advance:app

Начало работы с ReactPy

Как мы видим, наше приложение работает с дополнительными элементами HTML.

Чтобы подтвердить, что он использует FastAPI в качестве серверной части, мы добавим /docs по ссылке.

Начало работы с ReactPy

Запуск и тестирование ReactPy в Jupyter Notebook требует установки виджета Jupyter под названием reactpy_jupyter.

%pip install reactpy_jupyter

Прежде чем запускать что-либо, сначала выполните следующую команду, чтобы активировать виджет.

import reactpy_jupyter

Or использование %config волшебная функция для регистрации reactpy_jupyter как постоянное расширение IPython в вашем файле конфигурации.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

Теперь мы запустим компонент ReactPy в Jupyter Notebook. Вместо использования run(), мы будем напрямую запускать функцию компонента.

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

Как и в предыдущих примерах, мы запустим расширенный пример, запустив Photo() функции.

Начало работы с ReactPy

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()

Начало работы с ReactPy

Мы также можем создать интерактивное приложение с помощью кнопок и ввода, как показано ниже. Вы можете прочитать ReactPy документации для создания пользовательского интерфейса, интерактивности, управления состоянием, крючков API и аварийных люков.

Начало работы с ReactPy
гифка от ReactPy на связующем

Таким образом, эта запись в блоге представляет собой введение в ReactPy, демонстрируя, как создавать простые приложения ReactPy. Запустив ReactPy в веб-браузере с использованием различных бэкендов API, а также в блокнотах Jupyter с помощью виджетов Jupyter, мы увидели гибкость ReactPy, позволяющую разработчикам создавать приложения как для веб-сред, так и для ноутбуков.

ReactPy обещает стать библиотекой Python для создания реактивных пользовательских интерфейсов, которые могут охватить широкую аудиторию. При дальнейшем развитии ReactPy может стать привлекательной альтернативой React на основе JavaScript для машинного обучения и приложений AI Python.

Абид Али Аван (@ 1abidaliawan) — сертифицированный специалист по анализу данных, который любит создавать модели машинного обучения. В настоящее время он занимается созданием контента и ведением технических блогов по технологиям машинного обучения и обработки данных. Абид имеет степень магистра в области управления технологиями и степень бакалавра в области телекоммуникаций. Его видение состоит в том, чтобы создать продукт искусственного интеллекта с использованием графовой нейронной сети для студентов, борющихся с психическими заболеваниями.