Commencer avec ReactPy

Start with ReactPy

Un guide pour débutants sur la création d’applications Web sans JavaScript.

Avec la popularité croissante de ReactJS dans le développement web, il y a une demande croissante pour un framework similaire en Python pour la construction d’applications de machine learning, d’IA et de science des données prêtes pour la production. C’est là que ReactPy intervient, offrant aux débutants, aux data scientists et aux ingénieurs la possibilité de créer des applications similaires à ReactJS en Python. ReactPy donne aux utilisateurs un framework de vue simple et déclaratif qui permet de mettre à l’échelle efficacement les applications pour des cas d’utilisation complexes.

Dans cet article de blog, nous explorerons ReactPy, en apprenant comment créer une application simple et la faire fonctionner à la fois dans un navigateur Web et dans un notebook Jupyter. En particulier, nous aborderons :

• Créer un tableau de bord d’analyse de ratio de séries chronologiques
• Les effets de ChatGPT dans les écoles et pourquoi il est en train d’être interdit.
• C’est vivant! Construisez vos premiers robots avec Python et quelques composants bon marché et basiques.

• L’exécution d’un ReactPy sur un navigateur Web en utilisant diverses API backend.
• L’exécution de ReactPy dans un notebook Jupyter en utilisant des widgets Jupyter.

Qu’est-ce que ReactPy?

ReactPy est une bibliothèque Python pour la construction d’interfaces utilisateur sans utiliser JavaScript. Les interfaces de ReactPy sont construites à l’aide de composants offrant une expérience similaire à celle trouvée dans ReactJS.

Conçu pour la simplicité, ReactPy a une courbe d’apprentissage douce et une API minimale. Cela le rend accessible à ceux qui n’ont pas d’expérience en développement Web, mais il peut également être mis à l’échelle pour prendre en charge des applications sophistiquées.

Configuration

Il est assez facile d’installer ReactPy en utilisant pip :

pip install reactpy

Après l’installation, essayez d’exécuter une application d’exemple en utilisant le script ci-dessous.

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

Notre application avec le backend starlette est en cours d’exécution sur une adresse locale. Il suffit de la copier et de la coller dans le navigateur Web.

Comme nous pouvons l’observer, ReactPy fonctionne parfaitement.

Vous pouvez également installer le backend de votre choix. Dans notre cas, nous installerons ReactPy avec le backend fastapi.

pip install "reactpy[fastapi]"

Voici la liste des backends Python les plus populaires fournis avec 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/

Exécution d’un ReactPy sur un navigateur Web

Nous allons maintenant essayer de créer une application simple avec un titre 1 et un paragraphe et l’exécuter sur le backend par défaut (starlette).

• Lorsque vous créez une nouvelle fonction de composant, essayez d’ajouter une fonction magique @componnet au-dessus d’une fonction.
• Ensuite, créez un squelette d’une page Web avec différents éléments HTML comme:
  • html.h1 pour le titre 1.
  • html.b pour le gras.
  • html.ul et html.li pour les points de balle.
  • html.img pour les images.

from reactpy import component, html, run


@component
def App():
    return html.section(
        html.h1("Bienvenue sur IPGirl"),
        html.p("KD signifie Knowledge Discovery."),
    )


run(App)

Enregistrez le code ci-dessus dans un fichier reactpy_simple.py et exécutez la commande suivante dans le terminal.

python reactpy_simple.py

Notre application Web simple fonctionne sans problème.

Essayons d’ajouter plus de composants html tels que des images et des listes, et exécutons l’application en utilisant le backend fastapi. Pour cela:

1. Importer la classe FastAPI et configure de reactpy.backend.fastapi
2. Créer une fonction de composant appelée Photo() et ajouter tous les éléments HTML.
3. Créer un objet d’application en utilisant l’objet FastAPI et le configurer avec le composant ReactPy.

from fastapi import FastAPI
from reactpy import component, html
from reactpy.backend.fastapi import configure


@component
def Photo():
    return html.section(
        html.h1("Image en vedette du blog IPGirl"),
        html.p(html.b("KD"), " signifie:"),
        html.ul(html.li("K: Connaissance"), html.li("D: Découverte")),
        html.img(
            {
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": {"width": "50%"},
                "alt": "Image à propos d'IPGirl",
            }
        ),
    )


app = FastAPI()
configure(app, Photo)

Enregistrez le fichier sous le nom de reactpy_advance.py et exécutez l’application comme vous exécutez toute application FastAPI en utilisant unicorn.

uvicorn reactpy_advance:app

Comme nous pouvons l’observer, notre application s’exécute avec des éléments HTML supplémentaires.

Pour confirmer qu’elle s’exécute en tant que backend FastAPI, nous ajouterons /docs au lien.

Exécution de ReactPy dans Jupyter Notebook

L’exécution et le test de ReactPy dans Jupyter Notebook nécessitent l’installation d’un widget Jupyter appelé reactpy_jupyter.

%pip install reactpy_jupyter

Avant de tout exécuter, exécutez d’abord la commande suivante pour activer le widget.

import reactpy_jupyter

Ou utilisez la fonction magique %config pour enregistrer reactpy_jupyter comme extension IPython permanente dans votre fichier de configuration.

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

Nous allons maintenant exécuter le composant ReactPy dans le notebook Jupyter. Au lieu d’utiliser run(), nous allons exécuter directement une fonction de composant.

from reactpy import component, html


@component
def App():
    return html.section(
        html.h1("Bienvenue sur IPGirl"),
        html.p("KD signifie Connaissance Découverte."),
    )


App()

De même que pour les exemples précédents, nous exécuterons un exemple avancé en exécutant la fonction Photo().

from reactpy import component, html


@component
def Photo():
    return html.section(
        html.h1("Image en vedette du blog IPGirl"),
        html.p(html.b("KD"), " signifie:"),
        html.ul(html.li("K: Connaissance"), html.li("D: Découverte")),
        html.img(
            {
                "src": "https://www.kdnuggets.com/wp-content/uploads/about-kdn-header.jpeg",
                "style": {"width": "50%"},
                "alt": "Image à propos d'IPGirl",
            }
        ),
    )


Photo()

Nous pouvons également créer une application interactive à l’aide de boutons et d’entrées, comme indiqué ci-dessous. Vous pouvez lire la documentation de ReactPy pour créer l’interface utilisateur, l’interactivité, la gestion de l’état, les API hooks et les échappatoires.

Gif de ReactPy sur Binder

Conclusion

En résumé, ce billet de blog a présenté une introduction à ReactPy, en démontrant comment créer des applications ReactPy simples. En exécutant ReactPy dans un navigateur web en utilisant différentes API backends ainsi que dans des cahiers Jupyter en utilisant des widgets Jupyter, nous avons vu la flexibilité de ReactPy en permettant aux développeurs de construire des applications pour les environnements de navigateur et de cahier.

ReactPy montre des promesses en tant que bibliothèque Python pour créer des interfaces utilisateur réactives qui peuvent atteindre un large public. Avec un développement continu, ReactPy pourrait devenir une alternative convaincante à React basé sur JavaScript pour les applications Python de machine learning et d’IA.

• Essayez ReactPy sur Binder
• Documentation ReactPy
• Dépôt GitHub

Abid Ali Awan (@1abidaliawan) est un professionnel de la science des données certifié qui aime construire des modèles d’apprentissage automatique. Actuellement, il se concentre sur la création de contenu et l’écriture de blogs techniques sur les technologies de l’apprentissage automatique et de la science des données. Abid est titulaire d’une maîtrise en gestion de la technologie et d’un baccalauréat en génie des télécommunications. Sa vision est de construire un produit d’IA en utilisant un réseau neuronal graphique pour les étudiants qui luttent contre les maladies mentales.

We will continue to update IPGirl; if you have any questions or suggestions, please contact us!