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

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

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

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

۱. بارگذاری آنی:

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

۲. زمان ساخت بهینه:

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

۳. تقسیم‌بندی مؤثر کد:

Vite با استفاده از Code Splitting، اطمینان می‌دهد که تنها بخش‌های موردنیاز هر صفحه بارگذاری شوند. این ویژگی، سرعت لود را افزایش داده و تجربه کاربری را، به‌ویژه در پروژه‌های بزرگ، بهبود می‌دهد.

۴. سرعت و سبک بودن:

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

۵. پشتیبانی native از ماژول‌های ES:

پشتیبانی Vite از ESM باعث بارگذاری سریع‌تر ماژول‌ها و در نهایت کدی تمیزتر و قابل نگه‌داری‌تر می‌شود.

چرا باید تایپ اسکریپت و Vite را ترکیب کنیم؟

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

۱. افزایش Type Safety:

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

۲. تجربه توسعه سریع‌تر:

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

۳. کد مقیاس‌پذیر و قابل نگه‌داری:

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

۴. بهبود عملکرد:

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

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

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

۱. چرخه توسعه سریع:

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

۲. پشتیبانی بی‌دردسر از JSX :

Vite به‌صورت پیش‌فرض از JSX پشتیبانی می‌کند؛ بنابراین بدون نیاز به تنظیمات اضافه می‌توان مستقیماً کامپوننت‌های React را توسعه داد.

۳. بهینه‌سازی اندازه باندل:

Vite در مرحله ساخت نهایی از Rollup استفاده می‌کند که به تولید باندل‌های کوچک، بهینه و سریع منجر می‌شود. این موضوع برای اپلیکیشن‌های React بزرگ اهمیت بسیاری دارد.

۴. مدیریت هوشمند دارایی‌ها:

Vite تصاویر، فونت‌ها و دیگر دارایی‌ها را مانند ماژول‌های جاوااسکریپت مدیریت می‌کند. این امکان باعث می‌شود منابع هر کامپوننت به‌سادگی در خود آن وارد شده و در مرحله ساخت نهایی نیز بهینه‌سازی شوند.

۵. پیکربندی ساده و سازگار با React :

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

۶. پشتیبانی از React Fast Refresh:

Vite از Fast Refresh پشتیبانی می‌کند که هنگام ذخیره فایل، state کامپوننت‌ها را حفظ می‌کند. این ویژگی برای پروژه‌هایی که از کامپوننت‌های Stateful استفاده می‌کنند ضروری است و تجربه توسعه را بسیار روان‌تر می‌کند.

ایجاد اپلیکیشن React، تایپ اسکریپت با Vite

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

در ابتدا باید مطمئن باشیم که نسخه Node.js روی سیستم حداقل ۱۸ یا بالاتر است. سپس برای ایجاد یک پروژه جدید با Vite، دستور زیر را در ترمینال اجرا می‌کنیم:

npm create vite@latest my-react-app -- --template react-ts

این دستور از ما می‌خواهد نامی برای پروژه انتخاب کنیم. می‌توانیم هر نام دلخواهی وارد کرده و با فشردن کلید Enter ادامه دهیم. در این آموزش، نام پروژه را my-react-app در نظر می‌گیریم.

در گام بعد، باید فریم‌ورک موردنظر خود را برای پروژه انتخاب کنیم. Vite از فریم‌ورک‌های متنوعی مانند React، Vue.js، Svelte، Preact، Lit و Vanilla JavaScript پشتیبانی می‌کند. در این مثال، گزینه React را انتخاب می‌کنیم.

در نهایت، از ما خواسته می‌شود نوع پروژه را مشخص کنیم. از آن‌جا که قصد داریم یک اپلیکیشن React با تایپ اسکریپت ایجاد کنیم، گزینه react-ts را انتخاب می‌کنیم.

ساختار پروژه

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

📦my-react-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

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

اجرای اپلیکیشن

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

cd vite-ts-app
npm install
npm run dev

در صورت اجرای صحیح، ترمینال پیغامی مشابه نمونه زیر نمایش می‌دهد که نشان‌دهنده فعال شدن سرور توسعه است:

VITE v4.1.1  ready in 978 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h to show help

با فشردن کلید o در ترمینال، اپلیکیشن در مرورگر پیش‌فرض باز می‌شود.

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

اکنون که پروژه Vite با موفقیت اجرا شده، قصد داریم یک اپلیکیشن وبلاگ ساده بسازیم که داده‌های استاتیک را از یک فایل JSON نمایش دهد.

برای شروع، محتوای فایل App.tsx را تغییر می‌دهیم و یک نوار Navbar به رابط کاربری اضافه می‌کنیم:

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;
}

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

در مرحله بعد، باید داده‌های مربوط به پست‌های وبلاگ را تعریف کنیم. برای این کار، در root پروژه فایلی با نام 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"
 }
]

در این فایل، چند آرایه از آبجکت‌های وبلاگ تعریف می‌کنیم که بعداً در رابط کاربری اپلیکیشن نمایش داده خواهند شد.

ایجاد کامپوننت Blog

حالا باید یک پوشه با نام components در مسیر 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 برای پیمایش آرایه blogData و تولید یک card برای هر آیتم استفاده می‌شود.

در ادامه، باید فایل App.css را به‌روزرسانی کنیم تا استایل‌های مربوط به کامپوننت Blog را به آن اضافه نماییم:

.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>
 )
}
export default App

با انجام این مراحل، ما با موفقیت یک اپلیکیشن وبلاگ ساده را با استفاده از تایپ اسکریپت و Vite ایجاد کردیم.

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

برای مقایسه سرعت اجرای اولیه اپلیکیشنی که با Vite ساخته شده با اپلیکیشنی مشابه در Create React App (CRA)، هر دو پروژه را تحت شرایط یکسان ایجاد و تست کردیم.

ابتدا نسخه CRA همان دموی ساخته شده در این آموزش را ایجاد کردیم و سپس با استفاده از ابزار Performance در Chrome DevTools، زمان شروع اجرای هر اپلیکیشن را اندازه گرفتیم.

نتایج نشان می‌دهد اپلیکیشن ساخته‌شده با Vite حدود ۵۸٪ سریع‌تر از نسخه CRA اجرا می‌شود. این تفاوت چشمگیر نشان می‌دهد که Vite با معماری سبک و استفاده از ES Modules، زمان اجرا و تجربه توسعه‌دهنده را به‌طور قابل‌توجهی بهبود می‌دهد.

رفع خطاهای رایج هنگام راه‌اندازی پروژه

در هنگام ساخت یا اجرای پروژه‌های Vite، ممکن است با خطاهای رایجی روبه‌رو شویم. در ادامه، چند نمونه از این مشکلات و راه‌حل آن‌ها را بررسی می‌کنیم:

جمع‌بندی

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

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

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