如何使用 Solara 使用 Python 和 ReactJS 建立酷炫的資料視圖-Python教學-PHP中文網

如何使用 Solara 使用 Python 和 ReactJS 建立酷炫的資料視圖

Patricia Arquette

發布： 2024-09-22 18:15:02

原創

1063 人瀏覽過

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

嘿那裡！如果您希望使用 Python 和 React 建立一個時髦的資料視圖，那麼您來對地方了。今天，我們將深入探討 Solara，這是一個框架，它使創建互動式應用程式變得非常容易，而無需成為前端嚮導。所以，拿起你最喜歡的飲料，讓我們開始吧！

順便說一句，這根本不是由 Solara 贊助的，只是分享一些我最近發現的很酷的東西。

索拉拉到底是什麼？

Solara 就像 Python 和 React 之間的一座神奇橋樑。它允許您使用 Python 建立互動式 Web 應用程序，同時仍為您的使用者介面利用 React 的強大功能。對於那些熱愛 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，瞧！您應該會看到您的應用程式！

加入一些反應魔法

雖然 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),
           ]
       )

登入後複製