Solara を使用して Python と ReactJS でクールなデータビューを作成する方法-Python チュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-09-22 18:15:02

オリジナル

1035 人が閲覧しました

How to Create a Cool Data View with Python and ReactJS Using Solara

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

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

そもそもソララって何？

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

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

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

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

   pip install solara

ログイン後にコピー

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

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

ログイン後にコピー

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

   import solara

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

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

ログイン後にコピー

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

   python app.py

ログイン後にコピー

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

React マジックを追加する

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

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;

ログイン後にコピー

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 から実際のデータを取得して、さらに面白いことにしましょう。その方法は次のとおりです:

データの取得: 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),
           ]
       )

ログイン後にコピー