ちょっと、そこ！ 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 (
           

               
Data View
               

                   {data.map((item, index) => (
                       
{item}
                   ))}
               
           
       );
   };

   export default DataView;

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

   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 のパワーを得ることができます。

ソララのショーケースをご覧ください。
コーディングを楽しんでください! ?