چگونه با Vite یک برنامه React + TypeScript بسازیم

React، همراه با TypeScript، یک راه قدرتمند برای توسعه برنامه های کاربردی وب مقیاس پذیر و قابل نگهداری ارائه می دهد. TypeScript تایپ استاتیک را به دنیای جاوا اسکریپت می آورد و نوشتن کدهای بدون خطا را آسان تر می کند. در همین حال، Vite یک ابزار ساخت سریع و سبک برای توسعه وب مدرن است که یک تجربه توسعه سریع را با تمرکز بر سرعت و سادگی ارائه می دهد.

در این مقاله، نحوه استفاده از نقاط قوت ترکیبی React، TypeScript و Vite را برای ایجاد یک برنامه وب کارآمد بررسی خواهیم کرد. ما از طریق فرآیند شروع یک پروژه جدید، ادغام TypeScript، راه اندازی React و استفاده از قابلیت های Vite برای بهبود تجربه توسعه قدم خواهیم زد.

چه یک توسعه دهنده وب با تجربه باشید و چه تازه شروع به کار کرده اید، فکر می کنم این مقاله برای شما ارزشمند خواهد بود. پس یک فنجان قهوه بردارید و شروع کنیم!

ویژگی های منحصر به فرد Vite

Vite بسیاری از ویژگی های منحصر به فرد را ارائه می دهد که آن را از سایر ابزارهای ساخت متمایز می کند و آن را به یک انتخاب عالی برای توسعه وب تبدیل می کند. بیایید به برخی از ویژگی های خاص Vite نگاهی بیندازیم:

بارگذاری مجدد فوری: Vite بارگذاری مجدد فوری را ارائه می دهد، به این معنی که تغییرات ایجاد شده در کد بلافاصله بدون نیاز به بارگیری کامل صفحه در مرورگر منعکس می شود. این امر روند توسعه را سرعت می بخشد و تست و اشکال زدایی کد را آسان تر می کند.

زمان‌های ساخت بهینه: Vite برای زمان‌های ساخت سریع بهینه شده است، با تمرکز بر حداقل هزینه سربار. از کش در حافظه و ساخت‌های افزایشی سریع استفاده می‌کند تا زمان مورد نیاز برای کامپایل و ساخت برنامه را به حداقل برساند. این منجر به زمان ساخت کوتاه‌تر و تجربه توسعه کارآمدتر می‌شود.

تقسیم کد کارآمد: Vite از تقسیم کد کارآمد استفاده می کند تا اطمینان حاصل کند که کاربر فقط کد مورد نیاز برای صفحه فعلی را دانلود می کند و در نتیجه زمان بارگذاری سریعتر و تجربه کاربری بهتری را به همراه دارد. این امر به ویژه برای برنامه های کاربردی بزرگ و پیچیده، که در آن زمان بارگذاری می تواند به گلوگاه تبدیل شود، مهم است.

سریع و سبک وزن: Vite به گونه ای طراحی شده است که سریع و سبک وزن باشد و آن را به یک انتخاب عالی برای کاربردهای کوچک و بزرگ تبدیل می کند. این به حداقل تنظیمات و پیکربندی نیاز دارد و استفاده و درک آن، حتی برای مبتدیان، آسان است.

پشتیبانی از ماژول بومی ES: ویت از قالب ماژول بومی ES (ESM)، استاندارد مدرن برای ماژول های جاوا اسکریپت پشتیبانی می کند. این امکان بارگذاری سریع‌تر و کارآمدتر ماژول‌ها را فراهم می‌کند و یک پایگاه کد تمیزتر و قابل نگهداری‌تر را فراهم می‌کند.

چرا TypeScript و Vite را ترکیب می کنیم؟

TypeScript و Vite دو ابزار قدرتمندی هستند که محبوبیت گسترده ای در جامعه توسعه وب به دست آورده اند. در حالی که TypeScript ایمنی نوع و پایه ای قوی برای ساخت برنامه های مقیاس پذیر ارائه می دهد، Vite یک تجربه توسعه سریع و کارآمد را ارائه می دهد. بنابراین، چرا این دو فناوری را با هم ترکیب می کنیم؟ بیا یک نگاهی بیندازیم.

ایمنی نوع بهبود یافته: TypeScript حاشیه نویسی نوع اختیاری را ارائه می دهد که می تواند خطاهای مربوط به نوع را در طول توسعه تشخیص دهد. این به توسعه دهندگان کمک می کند تا کدهای قوی تر و قابل نگهداری بیشتری بنویسند و احتمال بروز اشکالات و رفتار غیرمنتظره را کاهش می دهد. با TypeScript و Vite، توسعه دهندگان می توانند اطمینان حاصل کنند که کدی که می نویسند با کیفیت بالا و عاری از خطاهای مربوط به نوع است.

تجربه توسعه سریعتر: Vite با سرعت و سادگی در ذهن طراحی شده است. این برنامه بارگذاری مجدد و زمان ساخت بهینه شده را ارائه می دهد و برنامه های کاربردی وب را در دسترس تر و کارآمدتر می کند. با ترکیب TypeScript با Vite، توسعه دهندگان می توانند از سیستم نوع قوی TypeScript و تجربه توسعه سریع Vite برای یک فرآیند توسعه لذت بخش تر و کارآمدتر استفاده کنند.

کد مقیاس پذیر و قابل نگهداری: TypeScript یک زبان تایپ ایستا است که از ویژگی های جاوا اسکریپت مدرن پشتیبانی می کند و به طور گسترده در پروژه های مقیاس بزرگ استفاده می شود. با ترکیب TypeScript با Vite، توسعه دهندگان می توانند کدهای مقیاس پذیر و قابل نگهداری بنویسند که به راحتی قابل درک و تغییر در طول زمان است.

عملکرد بهبود یافته: Vite برای زمان‌های ساخت سریع و حداقل هزینه‌های اضافی بهینه شده است، و آن را به انتخابی عالی برای برنامه‌های بزرگ و پیچیده تبدیل می‌کند. این باعث بهبود عملکرد و زمان بارگذاری کوتاه‌تر برای کاربر نهایی می‌شود. با ترکیب TypeScript و Vite، توسعه دهندگان می توانند برنامه های کاربردی وب با کارایی بالا بسازند که تجربه کاربری سریع و روانی را ارائه می دهند.

مزایای استفاده از React با Vite

Vite به دلیل سرعت، کارایی و سازگاری با کتابخانه های مدرن جاوا اسکریپت مانند React، یک تجربه توسعه منحصر به فرد را ارائه می دهد. در اینجا برخی از مزایای خاص هنگام استفاده از React with Vite آورده شده است:

چرخه توسعه سریع: بزرگترین مزیت استفاده از Vite، تعویض سریع ماژول داغ (HMR) آن است. در ترکیب با React، این منجر به بازتاب تقریباً آنی تغییرات ایجاد شده در مرورگر در طول فرآیند توسعه می‌شود. این حلقه بازخورد سریع تجربه کلی توسعه را به شدت بهبود می بخشد.

پشتیبانی یکپارچه از JSX: React به دلیل دستور زبان JSX، ترکیبی از جاوا اسکریپت و HTML، محبوب است و روشی بصری‌تر برای ساختار طرح‌بندی مؤلفه‌ها ارائه می‌دهد. Vite با پشتیبانی داخلی برای JSX ارائه می شود. این بدان معنی است که می توانید اجزای React خود را بدون هیچ گونه پیکربندی اضافی بنویسید و به روز کنید، بنابراین روند توسعه خود را تسریع می کنید.

اندازه باندل کارآمد: Vite از Rollup در زیر هود برای ساخت تولید خود استفاده می کند، که به دلیل تولید بسته های کوچک و کارآمد شناخته شده است. ساخت برنامه‌های React در مقیاس بزرگ منجر به زمان بارگذاری سریع‌تر می‌شود که منجر به تجربه کاربری بهتری می‌شود.

مدیریت بصری دارایی: Vite با در نظر گرفتن آنها به عنوان واردات جاوا اسکریپت، مدیریت برتر دارایی ها را ارائه می دهد. این به شما امکان می‌دهد مستقیماً به تصاویر، فونت‌ها و سایر دارایی‌های اجزای React خود مراجعه کنید. Vite به طور بهینه این دارایی ها را در طول ساخت تولید مدیریت می کند و عملکرد برنامه شما را بهبود می بخشد.

پیکربندی ساده و سازگار با واکنش: پیکربندی Vite به خصوص در مقایسه با باندلرهای قدیمی ساده است. Vite یک قالب آماده برای استفاده برای React ارائه می دهد که به شما امکان می دهد یک پروژه جدید React را به سرعت راه اندازی و اجرا کنید. این تمرکز روی ساده‌سازی به شما این امکان را می‌دهد که زمان بیشتری را برای توسعه برنامه خود و زمان کمتری را برای راه‌اندازی صرف کنید.

ادغام React Fast Refresh: Vite از React Fast Refresh، ابزاری قدرتمند از تیم React برای تازه سازی سریع در طول توسعه محلی پشتیبانی می کند. حتی پس از ذخیره یک فایل، وضعیت کامپوننت را حفظ می کند، که منجر به یک تجربه توسعه یکپارچه و بدون وقفه می شود. این به ویژه در React مفید است، جایی که منطق کامپوننت حالتی رایج است.
 

ایجاد پروژه Vite

اکنون که درباره ترکیب قدرتمند TypeScript و Vite بیشتر می‌دانیم، اجازه دهید به بخش نمایشی این آموزش بپردازیم.

ابتدا مطمئن شوید که Node.js ≥v18 را روی دستگاه خود نصب کرده اید، سپس با اجرای دستور زیر در ترمینال، یک پروژه Vite ایجاد کنید:

npm create vite@latest

این دستور از شما می خواهد که یک نام برای پروژه خود انتخاب کنید. با خیال راحت هر نامی را انتخاب کنید. سپس برای ادامه Enter را فشار دهید. برای این نمایش، از نام پروژه vite-ts-app استفاده خواهیم کرد.

در مرحله بعد، از شما خواسته می شود که یک چارچوب برای پروژه Vite خود انتخاب کنید. Vite چارچوب های مختلفی را ارائه می دهد که ممکن است برای یک برنامه استفاده شود: React، Vue.js، Lit، Preact، vanilla JavaScript و Svelte. برای این دمو، React را انتخاب می کنیم.

در نهایت، از شما خواسته می شود که یک نوع برای برنامه خود انتخاب کنید. برای این نسخه نمایشی، ما در حال ساخت یک برنامه TypeScript با Vite هستیم، بنابراین TypeScript را انتخاب می کنیم.

ساختار پروژه

پس از انجام مراحل بالا ، Vite ساختار پوشه پروژه را ایجاد می کند:

📦vite-ts-app
┣ 📂public
┃ ┗ 📜vite.svg
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┗ 📜react.svg
┃ ┣ 📜App.css
┃ ┣ 📜App.tsx
┃ ┣ 📜index.css
┃ ┣ 📜main.tsx
┃ ┗ 📜vite-env.d.ts
┣ 📜.gitignore
┣ 📜index.html
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜tsconfig.json
┣ 📜tsconfig.node.json
┗ 📜vite.config.ts

در زیر فایل های کلیدی از پوشه پروژه vite-ts-app آمده است:

index.html: فایل اصلی که معمولاً در یک فهرست عمومی در پروژه Vite یافت می شود
main.tsx: جایی که کد تولید خروجی مرورگر اجرا می شود. این فایل برای پروژه های Vite رایج است
vite.config.json: فایل پیکربندی برای هر پروژه Vite

در حال اجرای برنامه

ما دستورات ایجاد یک پروژه Vite را تکمیل کردیم. حالا بیایید داخل پوشه پروژه cd کنیم و از دستورات زیر برای اجرای برنامه استفاده کنیم:

cd vite-ts-app
npm install
npm run dev

برای تأیید اینکه برنامه در حال اجرا است، ترمینال را بررسی کنید

ساخت اپلیکیشن وبلاگ

با اجرای برنامه Vite در مرورگر ما، بیایید یک برنامه وبلاگ با استفاده از Vite و React ایجاد کنیم که برخی از داده های وبلاگ ثابت را از یک فایل JSON ارائه می کند.

برای شروع، بیایید کد موجود در فایل App.tsx را به روز کنیم تا یک نویگیشن به رابط کاربری برنامه اضافه کنیم:

import './App.css'
function App() {

 return (
  <div className="App">
   <div className="navbar">
    <ul>
     <li>Home</li>
     <li>Blog</li>
    </ul>
   </div>
  </div>
 )
}
export default App

در مرحله بعد، اجازه دهید فایل App.css را به روز کنیم تا چند استایل جدید به برنامه اضافه کنیم:

* {
 padding: 0px;
 margin: 0px;
 box-sizing: border-box;
}
.navbar {
 background-color: rgb(50, 47, 47);
 color: white;
 padding: 10px;
}
.navbar ul {
 display: flex;
 width: 600px;
 margin: 0px auto;
 font-size: 14px;
 list-style: none;
}
.navbar ul li {
 margin: 10px;
}

ایجاد داده های وبلاگ

در مرحله بعد، ما باید داده هایی را به برنامه وبلاگ خود اضافه کنیم. بیایید یک فایل blog.json در فهرست اصلی پروژه ایجاد کنیم و داده های زیر را اضافه کنیم:

[
 {
  "id": 1,
  "title": "Building a Todo App with Vue",
  "cover": "https://nextjs.org/static/images/learn/foundations/next-app.png",
  "author":"John Doe"
 },
 {
  "id": 2,
  "title": "Getting started with TypeScript",
  "cover": "https://nextjs.org/static/images/learn/foundations/components.png",
  "author":"Claman Joe"
 }
]

در اینجا چند آرایه از اشیاء وبلاگ را تعریف می کنیم که آنها را در UI برنامه Vite خود ارائه می دهیم.

ایجاد یک کامپوننت وبلاگ

حالا بیایید یک پوشه کامپوننت در دایرکتوری src ایجاد کنیم. سپس، یک فایل Blog.tsx ایجاد می کنیم و قطعه زیر را اضافه می کنیم:

import blogData from '../../blog.json'
type Blog = {
  id: number,
  title: string,
  cover: string,
  author: string
}
export function Blog() {
  return (
    <div className="container">
      <div className="blog">
        {blogData.map((blog: Blog) =>
          <div className="card" key={blog.id}>
            <img src={blog.cover} alt="" />
            <div className="details">
              <h2>{blog.title}</h2>
              <h4>{blog.author}</h4>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

این کد تابعی را تعریف می کند که ظرفی را برای پست های وبلاگ برمی گرداند و شامل لیستی از کارت های وبلاگ است. هر کارت عنوان، تصویر و نویسنده پست وبلاگ را نمایش می دهد. کد از یک تابع map استفاده می کند تا از طریق آرایه بلاگ دیتا حلقه بزند و برای هر آیتم یک کارت ایجاد کند.

در مرحله بعد، بیایید فایل App.css را به‌روزرسانی کنیم تا به کامپوننت بلاگ استایل بدهیم:

.App {
 background: rgb(44, 183, 134);
 height: 100vh;
}
.container {
 width: 600px;
 margin: 0px auto;
}
.container .blog {
 display: flex;
 padding: 10px;
}
.container .card {
 background-color: white;
 margin: 10px;
 padding: 10px;
 border-radius: 4px;
 width: 50%;
 font-size: 10px;
 color: rgb(50, 47, 47);
}
.container .card img {
 width: 100%;
}

در نهایت، اجازه دهید کامپوننت App.tsx را برای وارد کردن و رندر کردن کامپوننت Blog به روز کنیم:

import './App.css'
import { Blog} from './components/Blog'

function App() {

 return (
  <div className="App">
   <div className="navbar">
    <ul>
     <li>Home</li>
     <li>Blog</li>
    </ul>
   </div>
    <Blog />
  </div>
 )
}

و با آن، ما با موفقیت یک برنامه وبلاگ با استفاده از TypeScript و Vite ایجاد کردیم!

مقایسه عملکرد: CRA در مقابل Vite

برای مقایسه زمان راه‌اندازی یک برنامه Vite با یک برنامه ساخته شده با یک جایگزین مانند Create React App (CRA)، باید هر دو برنامه را تحت شرایط مشابه بسازیم و آزمایش کنیم. برای نشان دادن این موضوع، من همان برنامه آزمایشی را ساختم که در این آموزش ایجاد کردیم، با این تفاوت که از CRA استفاده کردم. سپس، از ویژگی بازرسی عملکرد در Chrome DevTools برای آزمایش زمان شروع برای هر نسخه از برنامه استفاده کردم.

در اینجا نتیجه عملکرد برنامه TypeScript ساخته شده با CRA است. زمان راه اندازی 99 میلی ثانیه بود.

و عملکرد برنامه TypeScript ساخته شده با Vite است. زمان راه اندازی 42 میلی ثانیه بود.

در آزمایش ما، برنامه TypeScript ساخته شده با ویت 58 درصد سریعتر از برنامه TypeScript ساخته شده با Create React App شروع شد.

نتیجه

در این مقاله، مزایای بسیاری از ترکیب React، TypeScript و Vite را مورد بحث قرار دادیم، نحوه ساختن یک برنامه وبلاگ ساده مبتنی بر React را با استفاده از TypeScript و Vite نشان دادیم و سپس عملکرد برنامه خود را با یک برنامه TypeScript ساخته شده با آن مقایسه کردیم.

ادغام React، TypeScript و Vite مجموعه‌ای از مزایا را برای توسعه‌دهندگان وب ارائه می‌کند - از رویکرد مبتنی بر کامپوننت React و ایمنی نوع پیشرفته TypeScript تا تجربه توسعه سریع Vite. این ترکیب کد مقیاس پذیر، قابل نگهداری و عملکرد برتر را ارتقا می دهد.

تمرکز Vite بر سرعت، کارایی و سادگی به ارائه برنامه های کاربردی وب با کیفیت بالا و عملکرد کمک می کند. ترکیبی از TypeScript و Vite به توسعه دهندگان همه سطوح یک انتخاب عالی برای ساخت برنامه های کاربردی وب با کیفیت بالا و کارآمد می دهد.