Kom godt i gang med ReactPy - KDnuggets

Kom godt i gang med ReactPy – KDnuggets

Kildeknude: 2713213

Kom godt i gang med ReactPy
Billede af forfatter
 

Med den stigende popularitet af ReactJS inden for webudvikling er der en stigende efterspørgsel efter en lignende ramme i Python til at bygge produktionsklare maskinlærings-, AI- og datavidenskabsapplikationer. Det er her, ReactPy kommer ind, og giver begyndere, dataforskere og ingeniører muligheden for at skabe ReactJS-lignende applikationer i Python. ReactPy giver brugerne en enkel, deklarativ visningsramme, der effektivt skalerer applikationer til komplekse use cases.

I dette blogindlæg vil vi udforske ReactPy, lære at bygge en simpel applikation og køre den både i en webbrowser og en Jupyter Notebook. Konkret vil vi dække:

  • Kørsel af en ReactPy på en webbrowser ved hjælp af forskellige backends API.
  • Kørsel af ReactPy i Jupyter Notebook ved hjælp af Jupyter-widgets.

ReactPy er et Python-bibliotek til opbygning af brugergrænseflader uden brug af JavaScript. Grænsefladerne til ReactPy er bygget vha komponenter der tilbyder en lignende oplevelse som den, der findes i ReactJS.

Designet til enkelhed, ReactPy har en blid indlæringskurve og en minimal API-overflade. Dette gør det tilgængeligt for dem uden webudviklingserfaring, men det kan også skaleres til at understøtte sofistikerede applikationer.

Det er ret nemt at installere ReactPy ved at bruge pip:

pip install reactpy

 

Efter installationen, prøv at køre et eksempelprogram ved hjælp af scriptet nedenfor.  

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

 

Vores ansøgning med starlette backend kører på en lokal adresse. Bare kopier det og indsæt det i webbrowseren. 

 

Kom godt i gang med ReactPy
 

Som vi kan se, at ReactPy kører perfekt. 

 

Kom godt i gang med ReactPy
 

Du kan også installere med backend efter eget valg. I vores tilfælde vil vi installere ReactPy med fastapi bagende. 

pip install "reactpy[fastapi]"

 

Her er listen over de mest populære Python-backends, der følger med ReactPy:

Vi vil nu prøve at bygge en simpel app med overskrift 1 og et afsnit og køre den på standard backend (starlette). 

  • Når du opretter en ny komponentfunktion, så prøv at tilføje en magisk funktion @componnet over en funktion.
  • Derefter skal du oprette et skelet af en webside med forskellige HTML-elementer som: 
    • html.h1 for overskrift 1.
    • html.b for fed.
    • html.ul , html.li for punkttegn.
    • html.img til billeder.
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)

 

Gem ovenstående kode i en reactpy_simple.py fil og kør følgende kommando i terminalen.  

python reactpy_simple.py

 

Kom godt i gang med ReactPy
 
Vores enkle webapplikation kører problemfrit. 
 
Kom godt i gang med ReactPy
 

Lad os prøve at tilføje flere html-komponenter som billede og liste, og køre programmet vha fastapi bagende. For det:

  1. Importere FastAPI klasse og configure fra reactpy.backend.fastapi
  2. Opret en komponentfunktion kaldet Photo() og tilføje alle HTML-elementerne. 
  3. Opret et app-objekt vha FastAPI objekt og konfigurer det med ReactPy-komponenten. 
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)

 

Gem filen med navnet reactpy_advance.py og kør applikationen, som du kører enhver FastAPI-applikation ved hjælp af enhjørning. 

uvicorn reactpy_advance:app

 

Kom godt i gang med ReactPy
 
Som vi kan se, kører vores app med yderligere HTML-elementer. 
 
Kom godt i gang med ReactPy
 

For at bekræfte, at det kører FastAPI som en backend, tilføjer vi /docs til linket.  
 

Kom godt i gang med ReactPy

Kørsel og test af ReactPy i Jupyter Notebook kræver installation af en Jupyter-widget kaldet reactpy_jupyter.

%pip install reactpy_jupyter

 

Før du kører noget, skal du først køre følgende kommando for at aktivere widgetten.

import reactpy_jupyter

 

Or brug %config magisk funktion til at registrere reactpy_jupyter som en permanent IPython-udvidelse i din konfigurationsfil.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

 

Vi vil nu køre ReactPy-komponenten i Jupyter Notebook. I stedet for at bruge run(), kører vi direkte en komponentfunktion.

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

 

I lighed med tidligere eksempler vil vi køre et avanceret eksempel ved at køre Photo() funktion.
 

Kom godt i gang med 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()

 

Kom godt i gang med ReactPy
 

Vi kan også oprette en interaktiv app ved hjælp af knapper og input, som vist nedenfor. Du kan læse ReactPy dokumentation til oprettelse af brugergrænsefladen, interaktivitet, administration af tilstand, API hooks og escape luges.  

 

Kom godt i gang med ReactPy
Gif fra ReactPy på Binder
 

Sammenfattende har dette blogindlæg givet en introduktion til ReactPy, der demonstrerer, hvordan man laver enkle ReactPy-applikationer. Ved at køre ReactPy i en webbrowser ved hjælp af forskellige API-backends såvel som i Jupyter Notebooks ved hjælp af Jupyter-widgets, har vi set fleksibiliteten i ReactPy i at tillade udviklere at bygge applikationer til både web- og notebookmiljøer. 

ReactPy viser løfte som et Python-bibliotek til at skabe reaktive brugergrænseflader, der kan nå ud til et bredt publikum. Med fortsat udvikling kan ReactPy blive et overbevisende alternativ til JavaScript-baseret React til maskinlæring og AI Python-applikationer.

 
 
Abid Ali Awan (@1abidaliawan) er en certificeret dataforsker, der elsker at bygge maskinlæringsmodeller. I øjeblikket fokuserer han på indholdsskabelse og skriver tekniske blogs om maskinlæring og datavidenskabsteknologier. Abid har en kandidatgrad i teknologiledelse og en bachelorgrad i telekommunikationsingeniør. Hans vision er at bygge et AI-produkt ved hjælp af et grafisk neuralt netværk til studerende, der kæmper med psykisk sygdom.
 

Tidsstempel:

Mere fra KDnuggets