Iniziare con ReactPy - KDnuggets - Plato AiStream V2.1

Ripubblicato da Platone

Seguaci: 0

Iniziare con ReactPy
Immagine dell'autore

Con la crescente popolarità di ReactJS nello sviluppo web, vi è una crescente domanda di un framework simile in Python per la creazione di applicazioni di machine learning, intelligenza artificiale e data science pronte per la produzione. È qui che entra in gioco ReactPy, fornendo a principianti, data scientist e ingegneri la possibilità di creare applicazioni simili a ReactJS in Python. ReactPy offre agli utenti un framework di visualizzazione semplice e dichiarativo che ridimensiona in modo efficiente le applicazioni per casi d'uso complessi.

In questo post del blog, esploreremo ReactPy, imparando come creare una semplice applicazione ed eseguirla sia all'interno di un browser Web che di un Jupyter Notebook. Nello specifico, tratteremo:

Esecuzione di ReactPy su un browser Web utilizzando varie API di backend.
Esecuzione di ReactPy in Jupyter Notebook utilizzando i widget di Jupyter.

ReactPy è una libreria Python per la creazione di interfacce utente senza utilizzare JavaScript. Le interfacce di ReactPy sono costruite usando componenti che offrono un'esperienza simile a quella trovata in ReactJS.

Progettato per semplicità, ReactPy ha una curva di apprendimento delicata e una superficie API minima. Questo lo rende accessibile a chi non ha esperienza di sviluppo web, ma può anche scalare per supportare applicazioni sofisticate.

È abbastanza facile installare ReactPy usando pip:

pip install reactpy

Dopo l'installazione, provare a eseguire un'applicazione di esempio utilizzando lo script seguente.

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

La nostra applicazione con il starlette backend è in esecuzione su un indirizzo locale. Basta copiarlo e incollarlo nel browser web.

Iniziare con ReactPy

Come possiamo osservare, ReactPy funziona perfettamente.

Iniziare con ReactPy

Puoi anche installare con il back-end di tua scelta. Nel nostro caso, installeremo ReactPy con il file fastapi back-end.

pip install "reactpy[fastapi]"

Ecco l'elenco dei backend Python più popolari forniti con ReactPy:

Proveremo ora a creare una semplice app con l'intestazione 1 e un paragrafo ed eseguirla sul backend predefinito (starlette).

Quando crei una nuova funzione componente, prova ad aggiungere una funzione magica @componnet sopra una funzione.
Successivamente, crea uno scheletro di una pagina web con diversi elementi HTML come:
- html.h1 per la rubrica 1.
- html.b per grassetto.
- html.ul ed html.li per i punti elenco.
- html.img per le immagini.

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)

Salva il codice sopra in a reactpy_simple.py file ed eseguire il seguente comando nel terminale.

python reactpy_simple.py

Iniziare con ReactPy

La nostra semplice applicazione web funziona senza problemi.

Proviamo ad aggiungere più componenti html come image e list ed eseguire l'applicazione utilizzando fastapi back-end. Per quello:

Importare FastAPI classe e configure da reactpy.backend.fastapi
Crea una funzione componente chiamata Photo() e aggiungi tutti gli elementi HTML.
Crea un oggetto app utilizzando FastAPI oggetto e configurarlo con il componente 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)

Salva il file con il nome reactpy_advance.py ed esegui l'applicazione come se eseguissi qualsiasi applicazione FastAPI utilizzando unicorn.

uvicorn reactpy_advance:app

Iniziare con ReactPy

Come possiamo osservare, la nostra app è in esecuzione con elementi HTML aggiuntivi.

Per confermare che sta eseguendo FastAPI come back-end, aggiungeremo /docs al collegamento.

Iniziare con ReactPy

L'esecuzione e il test di ReactPy in Jupyter Notebook richiede l'installazione di un widget Jupyter chiamato reactpy_jupyter.

%pip install reactpy_jupyter

Prima di eseguire qualsiasi cosa, esegui prima il seguente comando per attivare il widget.

import reactpy_jupyter

Or uso %config funzione magica da registrare reactpy_jupyter come estensione IPython permanente nel file di configurazione.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

Ora eseguiremo il componente ReactPy nel Jupyter Notebook. Invece di usare run(), eseguiremo direttamente una funzione componente.

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

Analogamente agli esempi precedenti, eseguiremo un esempio avanzato eseguendo Photo() funzione.

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

Iniziare con ReactPy

Possiamo anche creare un'app interattiva utilizzando pulsanti e input, come mostrato di seguito. Puoi leggere ReactPy documentazione per la creazione dell'interfaccia utente, l'interattività, la gestione dello stato, gli hook API e le vie di fuga.

Iniziare con ReactPy
Gif da ReactPy su Binder

In sintesi, questo post sul blog ha fornito un'introduzione a ReactPy, dimostrando come creare semplici applicazioni ReactPy. Eseguendo ReactPy all'interno di un browser Web utilizzando diversi backend API e all'interno di Jupyter Notebook utilizzando i widget Jupyter, abbiamo visto la flessibilità di ReactPy nel consentire agli sviluppatori di creare applicazioni per ambienti sia Web che notebook.

ReactPy si mostra promettente come libreria Python per la creazione di interfacce utente reattive in grado di raggiungere un vasto pubblico. Con il continuo sviluppo, ReactPy potrebbe diventare un'alternativa convincente a React basato su JavaScript per l'apprendimento automatico e le applicazioni Python AI.

Abid Ali Awan (@1abidaliawan) è un professionista di data scientist certificato che ama creare modelli di machine learning. Attualmente si sta concentrando sulla creazione di contenuti e sulla scrittura di blog tecnici sulle tecnologie di apprendimento automatico e scienza dei dati. Abid ha conseguito un Master in Technology Management e una laurea in Ingegneria delle Telecomunicazioni. La sua visione è quella di costruire un prodotto di intelligenza artificiale utilizzando una rete neurale grafica per studenti alle prese con malattie mentali.