ReactPy'ye Başlarken

Plato tarafından yeniden yayınlandı

İzleyiciler: 0

ReactPy'ye Başlarken
Yazara göre resim

Web geliştirmede ReactJS'nin artan popülaritesi ile üretime hazır makine öğrenimi, yapay zeka ve veri bilimi uygulamaları oluşturmak için Python'da benzer bir çerçeveye yönelik artan bir talep var. Yeni başlayanlara, veri bilimcilere ve mühendislere Python'da ReactJS benzeri uygulamalar oluşturma yeteneği sağlayan ReactPy burada devreye giriyor. ReactPy, kullanıcılara uygulamaları karmaşık kullanım durumlarına verimli bir şekilde ölçeklendiren basit, bildirime dayalı bir görünüm çerçevesi sunar.

Bu blog gönderisinde, basit bir uygulamanın nasıl oluşturulacağını ve hem bir web tarayıcısında hem de bir Jupyter Notebook'ta nasıl çalıştırılacağını öğrenerek ReactPy'yi keşfedeceğiz. Özellikle şunları ele alacağız:

Çeşitli arka uç API'lerini kullanarak bir web tarayıcısında ReactPy çalıştırma.
Jupyter widget'larını kullanarak ReactPy'yi Jupyter Notebook'ta çalıştırma.

ReactPy JavaScript kullanmadan kullanıcı arabirimleri oluşturmaya yönelik bir Python kitaplığıdır. ReactPy'nin arayüzleri kullanılarak oluşturulmuştur. bileşenler ReactJS'de bulunana benzer bir deneyim sunan.

Basitlik için tasarlanan ReactPy, yumuşak bir öğrenme eğrisine ve minimal bir API yüzeyine sahiptir. Bu, onu web geliştirme deneyimi olmayanlar için erişilebilir kılar, ancak aynı zamanda karmaşık uygulamaları desteklemek için ölçeklenebilir.

ReactPy'yi pip kullanarak kurmak oldukça kolaydır:

pip install reactpy

Kurduktan sonra, aşağıdaki betiği kullanarak örnek bir uygulama çalıştırmayı deneyin.

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

ile uygulamamız starlette arka uç yerel bir adres üzerinde çalışıyor. Sadece kopyalayın ve web tarayıcısına yapıştırın.

ReactPy'ye Başlarken

Gördüğümüz gibi ReactPy mükemmel çalışıyor.

ReactPy'ye Başlarken

İstediğiniz arka uçla da kurabilirsiniz. Bizim durumumuzda, ReactPy'yi şu şekilde kuracağız: fastapi Arka uç.

pip install "reactpy[fastapi]"

İşte ReactPy ile birlikte gelen en popüler Python arka uçlarının listesi:

Şimdi başlık 1 ve bir paragraf ile basit bir uygulama oluşturmaya ve varsayılan arka uçta çalıştırmaya çalışacağız (starlette).

Yeni bir bileşen işlevi oluşturduğunuzda, sihirli bir işlev eklemeyi deneyin. @componnet bir fonksiyonun üstünde.
Bundan sonra, aşağıdaki gibi farklı HTML öğeleriyle bir web sayfasının iskeletini oluşturun:
- html.h1 1. başlık için
- html.b kalın için.
- html.ul ve html.li madde işaretleri için.
- html.img görüntüler için.

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)

Yukarıdaki kodu bir reactpy_simple.py dosyasını açın ve terminalde aşağıdaki komutu çalıştırın.

python reactpy_simple.py

ReactPy'ye Başlarken

Basit web uygulamamız sorunsuz çalışıyor.

Resim ve liste gibi daha fazla html bileşeni eklemeye çalışalım ve uygulamayı kullanarak çalıştıralım. fastapi arka uç. Bunun için:

ithalat FastAPI sınıf ve configure itibaren reactpy.backend.fastapi
adlı bir bileşen işlevi oluşturun. Photo() ve tüm HTML öğelerini ekleyin.
Şunu kullanarak bir uygulama nesnesi oluşturun: FastAPI nesneyi kaydedin ve ReactPy bileşeniyle yapılandırın.

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)

Dosyayı adıyla kaydedin reactpy_advance.py ve tek boynuzlu at kullanarak herhangi bir FastAPI uygulamasını çalıştırdığınız gibi uygulamayı çalıştırın.

uvicorn reactpy_advance:app

ReactPy'ye Başlarken

Gördüğümüz gibi, uygulamamız ek HTML öğeleriyle çalışıyor.

Arka uç olarak FastAPI çalıştırdığını doğrulamak için ekleyeceğiz /docs bağlantıya.

ReactPy'ye Başlarken

Jupyter Notebook'ta ReactPy'yi Çalıştırmak ve Test Etmek, adlı bir Jupyter widget'ının yüklenmesini gerektirir. reactpy_jupyter.

%pip install reactpy_jupyter

Herhangi bir şeyi çalıştırmadan önce, widget'ı etkinleştirmek için aşağıdaki komutu çalıştırın.

import reactpy_jupyter

Or kullanım %config kayıt olmak için sihirli işlev reactpy_jupyter yapılandırma dosyanızda kalıcı bir IPython uzantısı olarak.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

Şimdi Jupyter Notebook'ta ReactPy bileşenini çalıştıracağız. Kullanmak yerine run(), doğrudan bir bileşen işlevi çalıştıracağız.

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

Önceki örneklere benzer şekilde, çalıştırarak gelişmiş bir örnek çalıştıracağız. Photo() fonksiyonu.

ReactPy'ye Başlarken

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'ye Başlarken

Aşağıda gösterildiği gibi düğmeleri ve girişi kullanarak etkileşimli bir uygulama da oluşturabiliriz. ReactPy'yi okuyabilirsiniz belgeleme kullanıcı arabirimi, etkileşim, yönetim durumu, API kancaları ve kaçış taramaları oluşturmak için.

ReactPy'ye Başlarken
gif'ten Bağlayıcıda ReactPy

Özet olarak, bu blog gönderisi, basit ReactPy uygulamalarının nasıl oluşturulacağını göstererek ReactPy'ye bir giriş sağladı. ReactPy'yi farklı API arka uçları kullanan bir web tarayıcısında ve ayrıca Jupyter pencere öğelerini kullanan Jupyter Not Defterlerinde çalıştırarak, ReactPy'nin geliştiricilerin hem web hem de dizüstü bilgisayar ortamları için uygulamalar oluşturmasına izin verme esnekliğini gördük.

ReactPy, geniş bir kitleye ulaşabilen reaktif kullanıcı arayüzleri oluşturmak için bir Python kitaplığı olarak umut vaat ediyor. Devam eden geliştirmeyle ReactPy, makine öğrenimi ve AI Python uygulamaları için JavaScript tabanlı React'e çekici bir alternatif haline gelebilir.

Abid Ali Avan (@1abidaliwan), makine öğrenimi modelleri oluşturmayı seven sertifikalı bir veri bilimcisi uzmanıdır. Şu anda, makine öğrenimi ve veri bilimi teknolojileri üzerine içerik oluşturmaya ve teknik bloglar yazmaya odaklanıyor. Abid, Teknoloji Yönetimi alanında yüksek lisans ve Telekomünikasyon Mühendisliği alanında lisans derecesine sahiptir. Vizyonu, akıl hastalığı ile mücadele eden öğrenciler için bir grafik sinir ağı kullanarak bir AI ürünü oluşturmaktır.