Cara Membuat Paparan Data Hebat dengan Python dan ReactJS Menggunakan Solara

Hei! Jika anda ingin menghasilkan paparan data yang menarik menggunakan Python dan React, anda telah datang ke tempat yang betul. Hari ini, kami menyelami Solara, rangka kerja yang menjadikannya sangat mudah untuk mencipta aplikasi interaktif tanpa perlu menjadi ahli sihir bahagian hadapan. Jadi, dapatkan minuman kegemaran anda, dan mari mulakan!

Ini tidak ditaja sama sekali oleh Solara btw, cuma berkongsi sesuatu yang menarik yang saya temui baru-baru ini.

Apa itu Solara?

Solara adalah seperti jambatan ajaib antara Python dan React. Ia membolehkan anda membina aplikasi web interaktif menggunakan Python sambil masih menggunakan kuasa React untuk antara muka pengguna anda. Ia sesuai untuk mereka yang menggemari Python tetapi ingin mencipta sesuatu yang menarik secara visual tanpa tersesat dalam JavaScript.

Bermula: Sediakan Persekitaran Anda

Sebelum kita mendalami pengekodan, mari pastikan anda telah menyediakan segala-galanya:

1. Pasang Solara: Perkara pertama dahulu, anda perlu memasang Solara. Buka terminal anda dan jalankan:

   pip install solara

1. Buat Direktori Projek Anda:

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

1. Sediakan Apl Solara Asas: Buat fail baharu bernama app.py dan tambah kod mudah ini:

   import solara

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

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

1. Jalankan Aplikasi Anda: Sekarang, mari lihat ia beraksi! Jalankan arahan ini:

   python app.py

Buka penyemak imbas anda dan pergi ke http://localhost:8080, dan voilà! Anda sepatutnya melihat apl anda!

Menambah Beberapa React Magic

Walaupun Solara mempunyai beberapa komponen terbina dalam, kadangkala anda ingin menceriakan perkara dengan komponen React anda sendiri. Mari lakukannya!

1. Buat Komponen React: Dalam folder projek anda, buat folder baharu yang dipanggil frontend dan tambahkan fail bernama DataView.js:

   import React from 'react';

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

   export default DataView;

1. Sambungkan Komponen Reaksi Anda ke Solara: Kemas kini fail app.py anda untuk memasukkan komponen 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)

Mengambil Data daripada API

Mari kita jadikan perkara lebih menarik dengan mengambil beberapa data sebenar daripada API. Begini cara anda boleh melakukannya:

1. Ambil Data: Ubah suai komponen Apl anda untuk menarik data daripada API (mari gunakan API pemegang tempat untuk berseronok):

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

Masa untuk Digunakan!

Setelah anda berpuas hati dengan apl anda, tiba masanya untuk berkongsi dengan dunia! Begini cara anda boleh menggunakan ia menggunakan Heroku:

1. Buat Fail requirements.txt:

   solara
   requests

1. Buat Profil:

   web: python app.py

1. Menggunakan Heroku:
   • Mulakan repositori Git dalam folder projek anda.
   • Buat apl Heroku baharu.
   • Tolak kod anda ke Heroku.

Membungkusnya

Dan begitulah! Anda baru sahaja mencipta aplikasi paparan data yang menarik menggunakan Python, React dan Solara. Persediaan ini memberi anda kuasa python sambil masih mencipta antara muka pengguna yang menarik dengan React.

Lihat Pameran Solara.
Selamat mengekod! ?

Atas ialah kandungan terperinci Cara Membuat Paparan Data Hebat dengan Python dan ReactJS Menggunakan Solara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!