Iniziare con ReactPy

'Getting started with ReactPy'

Una guida per principianti alla creazione di applicazioni web senza JavaScript.

Con la crescente popolarità di ReactJS nello sviluppo web, c’è una crescente domanda di un framework simile in Python per la creazione di applicazioni di machine learning, AI e data science pronte per la produzione. Qui entra in gioco ReactPy, fornendo ai principianti, ai data scientist e agli ingegneri la capacità di creare applicazioni simili a ReactJS in Python. ReactPy offre agli utenti un framework di visualizzazione semplice e dichiarativo che scala efficientemente le applicazioni per casi d’uso complessi.

In questo post del blog, esploreremo ReactPy, imparando come creare un’applicazione semplice ed eseguirla sia all’interno di un browser web che di un notebook di Jupyter. In particolare, copriremo:

• Crea una Dashboard di Analisi del Rapporto delle Serie Temporali
• Gli effetti di ChatGPT nelle scuole e perché sta venendo vietato
• È vivo! Costruisci i tuoi primi robot con Python e alcuni componenti economici e di base.

• Esecuzione di un’applicazione ReactPy su un browser web utilizzando vari backend API.
• Esecuzione di ReactPy in Jupyter Notebook utilizzando i widget di Jupyter.

Cos’è ReactPy?

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

Progettato per la semplicità, ReactPy ha una curva di apprendimento graduale e una superficie API minima. Ciò lo rende accessibile a coloro che non hanno esperienza nello sviluppo web, ma può anche scalare per supportare applicazioni sofisticate.

Configurazione

È abbastanza facile installare ReactPy utilizzando pip:

pip install reactpy

Dopo l’installazione, prova ad eseguire un’applicazione di esempio utilizzando lo script di seguito.

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

La nostra applicazione con il backend starlette sta eseguendo su un indirizzo locale. Copialo e incollalo nel browser web.

Come possiamo osservare, ReactPy sta funzionando perfettamente.

Puoi anche installarlo con il backend di tua scelta. Nel nostro caso, installeremo ReactPy con il backend fastapi.

pip install "reactpy[fastapi]"

Ecco l’elenco dei backend Python più popolari che vengono forniti con ReactPy:

• 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/

Esecuzione di un’applicazione ReactPy su un browser web

Proveremo ora a creare un’applicazione semplice con un’intestazione 1 e un paragrafo e a eseguirla sul backend predefinito (starlette).

• Quando crei una nuova funzione componente, cerca di aggiungere una funzione magica @componente sopra una funzione.
• Dopo di che, crea uno scheletro di una pagina web con diversi elementi HTML come:
  • html.h1 per l’intestazione 1.
  • html.b per il testo in grassetto.
  • html.ul e 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("Benvenuti in Nisoo"),
        html.p("KD sta per Knowledge Discovery."),
    )


run(App)

Salva il codice precedente in un file reactpy_simple.py ed esegui il comando seguente nel terminale.

python reactpy_simple.py

La nostra semplice applicazione web sta funzionando correttamente.

Proviamo ad aggiungere più componenti HTML come immagini e liste, e eseguire l’applicazione utilizzando il backend di fastapi. Per fare ciò:

1. Importa la classe FastAPI e configure da reactpy.backend.fastapi
2. Crea una funzione componente chiamata Photo() e aggiungi tutti gli elementi HTML.
3. Crea un oggetto app utilizzando l’oggetto FastAPI 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("Nisoo Blog Immagine in primo piano"),
        html.p(html.b("KD"), " sta per:"),
        html.ul(html.li("K: Conoscenza"), html.li("D: Scoperta")),
        html.img(
            {
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": {"width": "50%"},
                "alt": "Immagine di Nisoo About",
            }
        ),
    )


app = FastAPI()
configure(app, Photo)

Salva il file con il nome reactpy_advance.py ed esegui l’applicazione come faresti con qualsiasi applicazione FastAPI utilizzando Unicorn.

uvicorn reactpy_advance:app

Come possiamo osservare, la nostra app viene eseguita con elementi HTML aggiuntivi.

Per confermare che viene eseguito FastAPI come backend, aggiungeremo /docs al link.

Esecuzione di ReactPy in Jupyter Notebook

Eseguire e testare ReactPy in Jupyter Notebook richiede l’installazione di un widget Jupyter chiamato reactpy_jupyter.

%pip install reactpy_jupyter

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

import reactpy_jupyter

Oppure utilizza la funzione magica %config per registrare reactpy_jupyter come estensione IPython permanente nel tuo file di configurazione.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

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

from reactpy import component, html


@component
def App():
    return html.section(
        html.h1("Benvenuto in Nisoo"),
        html.p("KD sta per Conoscenza e Scoperta."),
    )


App()

Come nei precedenti esempi, eseguiremo un esempio avanzato eseguendo la funzione Photo().

from reactpy import component, html


@component
def Photo():
    return html.section(
        html.h1("Nisoo Blog Immagine in primo piano"),
        html.p(html.b("KD"), " sta per:"),
        html.ul(html.li("K: Conoscenza"), html.li("D: Scoperta")),
        html.img(
            {
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": {"width": "50%"},
                "alt": "Immagine di Nisoo About",
            }
        ),
    )


Photo()

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

Gif da ReactPy su Binder

Conclusione

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

ReactPy mostra promesse come libreria Python per la creazione di interfacce utente reattive che possono raggiungere un’ampia audience. Con uno sviluppo continuo, ReactPy potrebbe diventare un’alternativa interessante a React basato su JavaScript per le applicazioni Python di machine learning e AI.

• Prova ReactPy su Binder
• Documentazione di ReactPy
• Repository GitHub

Abid Ali Awan (@1abidaliawan) è un professionista certificato in scienze dei dati che ama creare modelli di machine learning. Attualmente si sta concentrando sulla creazione di contenuti e sulla scrittura di blog tecnici sulle tecnologie di machine learning e data science. Abid ha conseguito una laurea magistrale in Gestione della tecnologia e una laurea in Ingegneria delle telecomunicazioni. La sua visione è quella di creare un prodotto di intelligenza artificiale utilizzando una rete neurale a grafo per gli studenti che lottano con le malattie mentali.