Solara を使用して Python と ReactJS でクールなデータ ビューを作成する方法

こんにちは！ Python と React を使用しておしゃれなデータ ビューを作成したい場合は、ここが正しい場所です。今日は、フロントエンド ウィザードを必要とせずに対話型アプリケーションを非常に簡単に作成できるフレームワークである Solara について詳しく説明します。さあ、お気に入りのドリンクを手に入れて、始めましょう!

ところで、これは Solara によるスポンサーではなく、私が最近発見した素晴らしいものを共有しているだけです。

そもそもソララって何？

Solara は、Python と React の間の魔法の橋のようなものです。ユーザー インターフェイスに React の機能を活用しながら、Python を使用してインタラクティブな Web アプリケーションを構築できます。 Python は好きだが、JavaScript に惑わされずに視覚的に魅力的なものを作成したい人に最適です。

はじめに: 環境のセットアップ

コーディングに入る前に、すべての設定が完了していることを確認してください:

1. Solara のインストール: まず最初に、Solara をインストールする必要があります。ターミナルを開いて次を実行します。

   pip install solara

1. プロジェクト ディレクトリを作成します:

   mkdir my-solara-app
   cd my-solara-app

1. 基本的な Solara アプリのセットアップ: app.py という新しいファイルを作成し、次の簡単なコードを追加します。

   import solara

   @solara.component
   def App():
       return solara.h1("Welcome to My Data View!")

   if __name__ == "__main__":
       solara.run(App)

1. アプリケーションの実行: それでは、実際に動作する様子を見てみましょう。次のコマンドを実行します。

   python app.py

ブラウザを開いて http://localhost:8080 にアクセスすると、出来上がりです。アプリが表示されるはずです!

React マジックを追加する

Solara にはいくつかの組み込みコンポーネントがありますが、独自の React コンポーネントを使用してアレンジしたい場合もあります。やってみよう!

1. React コンポーネントの作成: プロジェクト フォルダーに、frontend という新しいフォルダーを作成し、DataView.js という名前のファイルを追加します。

   import React from 'react';

   const DataView = ({ data }) => {
       return (
           <div>
               <h2>Data View</h2>
               <ul>
                   {data.map((item, index) => (
                       <li key={index}>{item}</li>
                   ))}
               </ul>
           </div>
       );
   };

   export default DataView;

1. React コンポーネントを Solara に接続します: app.py ファイルを更新して、React コンポーネントを含めます。

   import solara
   from solara.react import use_react

   @solara.component
   def App():
       data = ["Item 1", "Item 2", "Item 3"]
       DataView = use_react("DataView")
       return solara.Column(
           [
               solara.h1("Welcome to My Data View!"),
               DataView(data=data),
           ]
       )

   if __name__ == "__main__":
       solara.run(App)

APIからデータを取得する

API から実際のデータを取得して、さらに面白いことにしましょう。その方法は次のとおりです:

1. データの取得: API からデータを取得するようにアプリ コンポーネントを変更します (楽しくプレースホルダー API を使用してみましょう)。

   import requests

   @solara.component
   def App():
       response = requests.get("https://jsonplaceholder.typicode.com/posts")
       data = response.json()
       titles = [post["title"] for post in data]

       DataView = use_react("DataView")
       return solara.Column(
           [
               solara.h1("Welcome to My Data View!"),
               DataView(data=titles),
           ]
       )

導入の時間です!

アプリに満足したら、それを世界と共有しましょう。 Heroku を使用してデプロイする方法は次のとおりです:

1. requirements.txt ファイルを作成します:

   solara
   requests

1. Procfile を作成します:

   web: python app.py

1. Heraku へのデプロイ:
   • プロジェクト フォルダーで Git リポジトリを初期化します。
   • 新しい Heroku アプリを作成します。
   • コードを Heroku にプッシュします。

まとめ

そして、これで完成です！ Python、React、Solara を使用してクールなデータ ビュー アプリケーションを作成しました。このセットアップにより、React で魅力的なユーザー インターフェイスを作成しながら、Python のパワーが得られます。

Solara ショーケースをチェックしてください。
コーディングを楽しんでください! ?

以上がSolara を使用して Python と ReactJS でクールなデータ ビューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。