چگونه با Python و ReactJS با استفاده از Solara یک نمایش داده جالب ایجاد کنیم

Summarize this content to 400 words in Persian Lang
سلام! اگر می خواهید با استفاده از Python و React یک نمای داده زیبا ایجاد کنید، به جای درستی آمده اید. امروز، ما در حال غواصی هستیم خورشیدی، چارچوبی که ایجاد برنامه های تعاملی را بدون نیاز به جادوگر جلویی بسیار آسان می کند. بنابراین، نوشیدنی مورد علاقه خود را بردارید و بیایید شروع کنیم!

این به هیچ وجه توسط Solara btw حمایت نمی شود، فقط چیز جالبی را که اخیراً کشف کرده ام به اشتراک می گذارد.

سولارا چیست؟

سولارا مانند یک پل جادویی بین پایتون و ری اکت است. این به شما اجازه می دهد تا با استفاده از پایتون برنامه های کاربردی وب تعاملی بسازید در حالی که همچنان از قدرت React برای رابط کاربری خود استفاده می کنید. برای کسانی که پایتون را دوست دارند اما می‌خواهند بدون گم شدن در جاوا اسکریپت چیزی جذاب از نظر بصری ایجاد کنند عالی است.

شروع به کار: تنظیم محیط

قبل از اینکه وارد کدنویسی شویم، بیایید مطمئن شویم که همه چیز را تنظیم کرده اید:

Solara را نصب کنید: ابتدا باید Solara را نصب کنید. ترمینال خود را باز کنید و اجرا کنید:

pip install solara

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فهرست پروژه خود را ایجاد کنید:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک برنامه پایه سولارا راه اندازی کنید: یک فایل جدید به نام ایجاد کنید 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، و voilà! شما باید برنامه خود را ببینید!

اضافه کردن مقداری React Magic

در حالی که Solara دارای برخی از اجزای داخلی است، گاهی اوقات شما می‌خواهید با کامپوننت‌های React خودتان به چیزهای جاز بپردازید. بیایید این کار را انجام دهیم!

یک React Component ایجاد کنید: در پوشه پروژه خود، یک پوشه جدید به نام ایجاد کنید 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 Component خود را به 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، همه چیز را هیجان انگیزتر کنیم. در اینجا نحوه انجام این کار آمده است:

واکشی داده ها: خود را اصلاح کنید App مؤلفه برای استخراج داده از یک 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 آورده شده است:

ایجاد یک requirements.txt فایل:

solara
requests

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ایجاد یک Procfile:

web: python app.py

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استقرار در هروکو:

یک مخزن Git را در پوشه پروژه خود راه اندازی کنید.
یک برنامه Heroku جدید ایجاد کنید.
کد خود را به Heroku فشار دهید.

بسته بندی آن

و شما آن را دارید! شما به تازگی یک برنامه نمایش داده جالب با استفاده از Python، React و Solara ایجاد کرده اید. این راه‌اندازی به شما قدرت پایتون می‌دهد در حالی که هنوز یک رابط کاربری جذاب با React ایجاد می‌کند.

ویترین سولارا را بررسی کنید. کد نویسی مبارک! 🎉

   pip install solara

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

   import solara

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

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

   python app.py

   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;

   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)

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

   solara
   requests

   web: python app.py