著者による画像
 

Web 開発における ReactJS の人気の高まりに伴い、本番環境に対応した機械学習、AI、データ サイエンス アプリケーションを構築するための Python の同様のフレームワークに対する需要が高まっています。 ここで ReactPy が登場し、初心者、データ サイエンティスト、エンジニアに Python で ReactJS のようなアプリケーションを作成できる機能を提供します。 ReactPy は、アプリケーションを複雑なユースケースに効率的に拡張する、シンプルで宣言的なビュー フレームワークをユーザーに提供します。

このブログ投稿では、ReactPy を探索し、シンプルなアプリケーションを構築し、それを Web ブラウザーと Jupyter Notebook の両方で実行する方法を学びます。 具体的には、以下について説明します。

• さまざまなバックエンド API を使用して Web ブラウザーで ReactPy を実行します。
• Jupyter ウィジェットを使用して Jupyter Notebook で ReactPy を実行します。

ReactPy は、JavaScript を使用せずにユーザー インターフェイスを構築するための Python ライブラリです。 ReactPy のインターフェイスは次を使用して構築されます。 コンポーネント ReactJS と同様のエクスペリエンスを提供します。

シンプルさを追求して設計された ReactPy は、学習曲線が緩やかで、API サーフェスが最小限に抑えられています。 これにより、Web 開発の経験のない人でもアクセスできるようになりますが、高度なアプリケーションをサポートするために拡張することもできます。

pip を使用して ReactPy をインストールするのは非常に簡単です。

pip install reactpy

インストール後、以下のスクリプトを使用してサンプル アプリケーションを実行してみてください。  

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

私たちのアプリケーションは、 starlette バックエンドはローカル アドレスで実行されています。 それをコピーして Web ブラウザに貼り付けるだけです。 

ReactPy が完全に実行されていることがわかります。 

選択したバックエンドを使用してインストールすることもできます。 この例では、ReactPy を次のようにインストールします。 ファストピ バックエンド。 

pip install "reactpy[fastapi]"

ReactPy に付属する最も人気のある Python バックエンドのリストは次のとおりです。

ここで、見出し 1 と段落を持つ単純なアプリを構築し、デフォルトのバックエンドで実行してみます (starlette). 

• 新しいコンポーネント関数を作成するときは、マジック関数を追加してみてください @componnet 関数の上。
• その後、次のようなさまざまな HTML 要素を含む Web ページのスケルトンを作成します。 
  • html.h1 見出し1の場合。
  • html.b 太字で。
  • html.ul および html.li 箇条書きの場合。
  • html.img 画像用です。

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)

上記のコードを次の場所に保存します reactpy_simple.py ファイルを開き、ターミナルで次のコマンドを実行します。  

python reactpy_simple.py

 
シンプルな Web アプリケーションはスムーズに実行されています。 
 

 

画像やリストなどの HTML コンポーネントをさらに追加し、次を使用してアプリケーションを実行してみましょう。 fastapi バックエンド。 そのために:

1. インポート FastAPI クラスと configure から reactpy.backend.fastapi
2. というコンポーネント関数を作成します。 Photo() すべての HTML 要素を追加します。 
3. 次を使用してアプリ オブジェクトを作成します FastAPI オブジェクトを作成し、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)

名前を付けてファイルを保存します reactpy_advance.py そして、unicorn を使用して FastAPI アプリケーションを実行するのと同じようにアプリケーションを実行します。 

uvicorn reactpy_advance:app

 
ご覧のとおり、アプリは追加の HTML 要素を使用して実行されています。 
 

 

FastAPI がバックエンドとして実行されていることを確認するには、以下を追加します。 /docs リンクへ。  
 

Jupyter Notebook で ReactPy を実行およびテストするには、という Jupyter ウィジェットをインストールする必要があります。 reactpy_jupyter.

%pip install reactpy_jupyter

何かを実行する前に、まず次のコマンドを実行してウィジェットをアクティブにします。

import reactpy_jupyter

Or つかいます %config 登録する魔法の関数 reactpy_jupyter 構成ファイル内の永続的な IPython 拡張機能として。

%config InteractiveShellApp.extensions = ['reactpy_jupyter']

次に、Jupyter Notebook で ReactPy コンポーネントを実行します。 使用する代わりに run()では、コンポーネント関数を直接実行します。

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

前の例と同様に、以下を実行して高度な例を実行します。 Photo() 機能。
 

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を読むことができます ドキュメント ユーザー インターフェイス、対話性、状態の管理、API フック、およびエスケープ ハッチの作成に使用されます。  

からのGIF バインダー上の ReactPy
 

要約すると、このブログ投稿では ReactPy の概要を説明し、単純な ReactPy アプリケーションの作成方法を示しました。 さまざまな API バックエンドを使用して Web ブラウザー内で ReactPy を実行するだけでなく、Jupyter ウィジェットを使用して Jupyter Notebook 内で ReactPy を実行することにより、開発者が Web 環境とノートブック環境の両方でアプリケーションを構築できるという ReactPy の柔軟性がわかりました。 

ReactPy は、幅広いユーザーにリーチできるリアクティブなユーザー インターフェイスを作成するための Python ライブラリとして有望です。 開発が続けば、ReactPy は機械学習および AI Python アプリケーションにおいて JavaScript ベースの React に代わる有力な代替手段となる可能性があります。

 
 
アビッド・アリ・アワン (@ 1abidaliawan）は、機械学習モデルの構築を愛する認定データサイエンティストの専門家です。 現在、彼はコンテンツの作成と、機械学習とデータサイエンステクノロジーに関する技術ブログの執筆に注力しています。 Abidは、技術管理の修士号と電気通信工学の学士号を取得しています。 彼のビジョンは、精神疾患に苦しんでいる学生のためにグラフニューラルネットワークを使用してAI製品を構築することです。
 

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• EVMファイナンス。 分散型金融のための統一インターフェイス。 こちらからアクセスしてください。
• クォンタムメディアグループ。 IR/PR増幅。 こちらからアクセスしてください。
• プラトアイストリーム。 Web3 データ インテリジェンス。 知識増幅。 こちらからアクセスしてください。
• 情報源： https://www.kdnuggets.com/2023/06/getting-started-reactpy.html?utm_source=rss&utm_medium=rss&utm_campaign=getting-started-with-reactpy