تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

آنچه در این مقاله می‌خوانید

چگونه یک پروژه React را با Vite برای توسعه سریع راه‌اندازی کنیم؟


۱۲ دی ۱۴۰۴

خلاصه کنید:

openaigeminiperplexity

معمولا برای ایجاد پروژه‌های React از Create React App استفاده می‌شود، اما نصب بیش از 140 مگابایت وابستگی زمان‌بر است. در مقابل، Vite ابزاری سبک و سریع با تنها حدود 31 مگابایت وابستگی است که شروع و به‌روزرسانی پروژه را بسیار سریع‌تر می‌کند و نیازی به بازساخت کامل بسته پس از هر تغییر ندارد.

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

در ادامه خواهید خواند:

  • مرحله 1: ایجاد یک پروژه Vite
  • مرحله 2: راه‌اندازی سرور توسعه
  • مرحله 3: پیش‌نمایش اپلیکیشن خود از طریق گوشی موبایل
  • مرحله 4: حذف کدهای پیش‌فرض (Boilerplate)
  • مرحله 5: ایجاد یک اپلیکیشن پایه
  • مرحله 6: ساخت نسخه تولید (Production)
  • سفارشی‌سازی فایل vite.config.js برای پروژه‌های React
  • افزودن پلاگین‌ها برای بهبود تجربه توسعه
  • جمع بندی

پیش نیاز

  • نصب Node.js نسخه 12.2.0 یا بالاتر: باید Node.js روی سیستم شما نصب باشد.
  • نصب Yarn نسخه 1.22.0 یا بالاتر: Yarn یک ابزار مدیریت بسته‌ها است که برای این آموزش نیاز داریم.
  • آشنایی با HTML, CSS و JavaScript مدرن: همچنین دانستن مفاهیم JavaScript مدرن که در React استفاده می‌شود، کمک زیادی خواهد کرد.
  • دانش پایه‌ای از React: برای شروع، باید با اصول React آشنا باشید.
  • گوشی موبایل متصل به همان شبکه وای‌فای: این مورد برای پیش‌نمایش اپلیکیشن روی موبایل ضروری است، بنابراین گوشی شما باید به همان شبکه وای‌فای که کامپیوترتان وصل است، متصل باشد.

مرحله 1: ایجاد یک پروژه Vite

در این مرحله، یک پروژه جدید React با استفاده از ابزار Vite از طریق خط فرمان ایجاد خواهید کرد. برای نصب و اجرای اسکریپت‌ها از yarn استفاده می‌کنیم.

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

yarn create vite

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

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

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
- create-vite
- cva
? Project name: » vite-project
Type your project name (this tutorial will use my-vite-app as the example name):

my-vite-app

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

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Solid
Qwik
Angular
Marko
Others

Vite این امکان را به شما می‌دهد که انواع پروژه‌ها را ایجاد کنید، نه فقط React. در حال حاضر پشتیبانی از React, Preact, Vue، Lit, Svelte و JavaScript ساده دارد. با کلیدهای جهت‌نمای کیبورد، گزینه React را انتخاب کنید.

پس از انتخاب Vite, React از شما می‌خواهد نوع زبان پروژه را مشخص کنید. می‌توانید بین JavaScript و TypeScript انتخاب کنید:

Output
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
> JavaScript
JavaScript + SWC
React Router v7
TanStack Router 
RedwoodSDK

توجه: SWC یک کامپایلر JavaScript/TypeScript سریع است که با زبان Rust نوشته شده و برای افزایش سرعت ساخت و بهبود عملکرد استفاده می‌شود.

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

Output
Done:
Scaffolding project in path\to\my-vite-app...

Done. Now run:

cd my-vite-app
yarn
yarn dev

Done in 129.89s.

به مسیر پروژه خود بروید:

cd my-vite-app

سپس با دستور زیر وابستگی‌های پروژه را نصب کنید:

yarn

بعد از اتمام نصب، مدت زمان نصب وابستگی‌ها نمایش داده می‌شود:

Output
success Saved lockfile.
Done in 43.26s.

شما اکنون یک پروژه React جدید با Vite راه‌اندازی کرده و تمام بسته‌های مورد نیاز React و Vite را نصب کرده‌اید. 

با هاست Node.js لیارا، اپلیکیشن‌های Node خودت رو روی بستر سریع، پایدار و امن اجرا کن.
✅ نصب فوری✅ منابع اختصاصی✅ دسترسی کامل SSH
خرید و راه‌اندازی هاست Node.js

مرحله 2: راه‌اندازی سرور توسعه

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

yarn run dev

این دستور در واقع یک alias برای دستور vite است و پروژه شما را در حالت توسعه (development mode) اجرا می‌کند. بعد از اجرا، خروجی مشابه زیر را خواهید دید:

Output
VITE v4.0.4 ready in 847 ms

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

حالا مرورگر خود را باز کرده و آدرس زیر را وارد کنید:

http://localhost:5173/

در اینجا، پروژه پیش‌فرض React که توسط vite ساخته شده است اجرا می‌شود و روی پورت 5173 در حال نمایش خواهد بود.

اگر صفحه پیش‌فرض React در مرورگر نمایش داده شد، یعنی شما با موفقیت React را با vite نصب و راه‌اندازی کرده‌اید.

مرحله 3: پیش‌نمایش اپلیکیشن خود از طریق گوشی موبایل

به‌صورت پیش‌فرض، Vite اپلیکیشن را فقط روی همان سیستم (localhost) اجرا می‌کند و آن را در شبکه لوکال (local network) در دسترس قرار نمی‌دهد. برای اینکه بتوانید اپ خود را روی گوشی موبایل هم ببینید، باید آن را در شبکه محلی باز کنید.

اگر سرور در حال اجرا است، ابتدا در ترمینال با کلیدهای CTRL + C آن را متوقف کنید.

حالا دستور زیر را وارد کنید:

yarn run dev --host

فلگ --host به Vite می‌گوید که اپلیکیشن را در شبکه محلی نیز در دسترس کند.

بعد از اجرا، خروجی مشابه زیر خواهید دید:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

در اینجا، آدرسhttp://your_ip_address:5173/ همان IP محلی سیستم شما است که روی شبکه وای‌فای یا روترتان فعال است.

گوشی موبایل خود را به همان شبکه وای‌فای که لپ‌تاپ یا کامپیوترتان به آن متصل است وصل کنید. سپس در مرورگر گوشی، آدرس http://your_ip_address:5173/ را وارد کنید.

با هاست React لیارا، اپلیکیشن‌های React خودت رو با سرعت و کیفیت میزبانی کن.
✅ نصب فوری✅ منابع اختصاصی✅ دسترسی کامل SSH
خرید و راه‌اندازی هاست React

مرحله 4: حذف کدهای پیش‌فرض (Boilerplate)

در این مرحله، فایل‌های پیش‌فرض پروژه Vite را از پوشه src/ حذف می‌‌کنیم تا بتوانیم اپلیکیشن جدید خودمان را از صفر بسازیم. همچنین با ساختار پیش‌فرض پروژه هم آشنا می‌شوید.

1. مشاهده فایل‌های داخل پوشه src/

برای دیدن فایل‌های موجود در پوشه src/ دستور زیر را وارد کنید:

ls src/

خروجی چیزی شبیه به این خواهد بود:

OutputApp.css
App.jsx
assets
index.css
main.jsx

2. حذف فایل‌های پیش‌فرض

با دستور rm می‌توان فایل یا پوشه‌ها را حذف کرد. دستورات زیر را اجرا کنید تا فایل‌های پیش‌فرض پاک شوند:

rm src/App.css
rm src/App.jsx
rm src/index.css

برای حذف پوشه assets همراه با محتوایش از دستور زیر استفاده کنید:

rm -r src/assets

فلگ -r یعنی حذف بازگشتی (recursive)، که برای پاک کردن پوشه و تمام فایل‌های داخل آن لازم است.

3. بررسی باقی‌مانده فایل‌ها

بعد از حذف این فایل‌ها، تنها فایل main.jsx در پوشه src/ باقی می‌ماند. دوباره دستور زیر را اجرا کنید:

ls src/

خروجی این بار فقط شامل فایل زیر خواهد بود:

Outputmain.jsx

4. ویرایش فایل main.jsx

چون فایل‌های CSS پیش‌فرض را حذف کردیم، باید خطی که به آن‌ها اشاره می‌کند را هم پاک کنیم. فایل main.jsx را باز کنید:

nano src/main.jsx

کدی شبیه به زیر خواهید داشت:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

خط زیر را حذف کنید چون فایل index.css دیگر وجود ندارد:

nano src/App.jsx

سپس تغییرات را ذخیره کرده و فایل را ببندید.

5. ایجاد فایل جدید App.jsx

حالا باید یک کامپوننت جدید به نام App بسازیم. برای این کار فایل App.jsx را در پوشه src/ ایجاد کنید:

export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

کد زیر را در فایل وارد کنید:

yarn run dev --host

این کد یک کامپوننت تابعی (Functional Component) به نام App ایجاد می‌کند. با استفاده از export default،این کامپوننت به‌عنوان خروجی اصلی فایل صادر می‌شود. داخل تابع هم یک div داریم که متن Hello World را نمایش می‌دهد.

فایل را ذخیره کنید و ببندید.

6. اجرای دوباره سرور توسعه

حالا دوباره پروژه را اجرا کنید:

yarn run dev --host

مرورگر را باز کنید و آدرس زیر را وارد یا صفحه را رفرش کنید:

http://localhost:5173

این بار یک صفحه ساده خواهید دید که فقط متن Hello World را نمایش می‌دهد.

مرحله 5: ایجاد یک اپلیکیشن پایه

در این مرحله یک برنامه ساده ایجاد می‌کنید. در این برنامه، کامپوننت‌های جدید ساخته می‌شوند، فایل CSS اضافه می‌شود و یک تصویر نیز به پروژه متصل خواهد شد. پیش از شروع، ابتدا لازم است سرور توسعه را متوقف کنید.

ایجاد یک کامپوننت (Component)

کامپوننت‌ها موجب سازماندهی بهتر کد و قابل مدیریت شدن پروژه می‌شوند. برای رعایت ساختار و نظم در پروژه، تمام کامپوننت‌ها در پوشه‌ای با نام components قرار خواهند گرفت.

برای ایجاد این پوشه، دستور زیر را اجرا کنید:

mkdir src/components

سپس یک فایل جدید با نام Welcome.jsx در این پوشه ایجاد نمایید:

nano src/components/Welcome.jsx

محتوای زیر را در فایل قرار دهید:

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

کد فوق یک کامپوننت تابعی جدید با نام Welcome ایجاد می‌کند. کلیدواژه export default این امکان را فراهم می‌سازد که این کامپوننت در بخش‌های دیگر پروژه مورد استفاده قرار گیرد.

المان div با کلاس wrapper نیز این بخش را برای استایل‌دهی در CSS هدف‌گذاری خواهد کرد. پس از تکمیل، فایل را ذخیره و ببندید.

استفاده از کامپوننت در App.jsx

اکنون لازم است این کامپوننت در فایل App.jsx مورد استفاده قرار گیرد.

nano src/App.jsx

محتوای فایل را به‌صورت زیر به‌روزرسانی کنید:

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

در اینجا کامپوننت Welcome فراخوانی و در بدنه تابع App قرار داده شده است.

افزودن تصویر به پروژه

برای افزودن تصویر، ابتدا پوشه‌ای با نام img در مسیر src/ ایجاد کنید:

mkdir src/img
cd src/img

سپس تصویر مورد نظر را دانلود و نام آن را تغییر دهید:

wget https://html.sammy-codes.com/images/small-profile.jpeg
mv small-profile.jpeg sammy.jpeg

اکنون به مسیر اصلی پروژه بازگردید:

cd ../../

فایل Welcome.jsx را باز کرده و تصویر را به آن اضافه نمایید:

nano src/components/Welcome.jsx

محتوا را مطابق زیر تغییر دهید:

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={200} height={200} />
      </div>
    </>
  )
}

خط اول تصویر را به‌عنوان ماژول ایمپورت می‌کند و تگ <img> تصویر را در صفحه نمایش خواهد داد.

React چیست و چه کاربردی دارد؟ با مشهورترین برنامه‌های تحت وب React آشنا شوید
React چیست

افزودن CSS

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

mkdir src/css
nano src/css/main.css

کد زیر را در فایل CSS قرار دهید:

body {
  display: grid;
  place-items: center;
  background-color: #b4a7d6;
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  background-color: #fff9e6;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  color: #8873be;
}

اکنون فایل CSS را در Welcome.jsx ایمپورت کنید:

import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={200} height={200} />
      </div>
    </>
  )
}

تغییر عنوان برنامه در مرورگر

به‌صورت پیش‌فرض، عنوان پنجره مرورگر در برنامه‌های Vite روی Vite + React قرار دارد. برای تغییر آن، فایل index.html را باز کنید:

nano index.html

محتوای تگ <title> را تغییر دهید:

<title>My Cool App</title>

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

در صورتی که سرور توسعه غیرفعال است، آن را با دستور زیر اجرا کنید:

yarn run dev --host

مرحله 6: ساخت نسخه تولید (Production)

در این مرحله قصد دارید یک بسته بهینه‌شده از برنامه خود ایجاد کنید که آماده استقرار بر روی سرور باشد. برای ساخت نسخه Production، در ترمینال دستور زیر را اجرا کنید:

yarn run build

این دستور پوشه‌ای با نام dist ایجاد می‌‌کند که شامل فایل‌های فشرده‌سازی و بهینه‌سازی‌شده است. این فایل‌ها همان نسخه‌ای هستند که می‌تواند بر روی سرور قرار دهید.

پس از اجرا دستور فوق، خروجی مشابه زیر مشاهده خواهید کرد:

Outputvite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

اکنون محتوای پوشه dist آماده استقرار می‌باشد. شما می‌توانید:

  • فایل‌ها را روی یک سرور مانند Apache یا Nginx آپلود کنید.
  • از پلتفرم‌های مختلف ابری یا هاست‌های مدرن استفاده کنید که قابلیت اجرای خودکار اسکریپت build را دارند.

به این ترتیب، اپلیکیشن React شما با استفاده از Vite به‌صورت بهینه‌سازی‌شده آماده اجرا در محیط Production خواهد بود.

سفارشی‌سازی فایل vite.config.js برای پروژه‌های React

Vite یک فایل پیکربندی بسیار انعطاف‌پذیر به نام  vite.config.js ارائه می‌دهد که به شما امکان می‌دهد فرآیند توسعه و ساخت پروژه را متناسب با نیازهای خاص خود تنظیم کنید. در این بخش با برخی از پیکربندی‌های ضروری برای اپلیکیشن‌های React آشنا می‌شویم.

پیکربندی پایه

یک فایل پایه  vite.config.js برای پروژه React ممکن است به شکل زیر باشد:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
});

این پیکربندی، پلاگین React را فعال می‌کند که قابلیت‌هایی مانند پشتیبانی از JSX، تبدیل خودکار JSX و ویژگی React Fast Refresh را فراهم می‌سازد.

افزودن پیش پردازنده‌های CSS

برای استفاده از پیش‌پردازنده‌هایی مانند Sass یا Less، می‌توانید پلاگین‌های مربوطه را به پیکربندی خود اضافه کنید. به‌عنوان نمونه برای Sass:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import sass from 'vite-plugin-sass';

export default defineConfig({
  plugins: [react(), sass()]
});

این پیکربندی پلاگین Sass را اضافه می‌کند و به شما امکان استفاده از فایل‌های Sass در پروژه را می‌دهد.

پیکربندی مرحله Build

می‌توانید فرآیند Build را با تعیین مسیر خروجی، فشرده‌سازی فایل‌ها و سایر موارد سفارشی کنید. به عنوان مثال:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist', // Output directory
    minify: 'terser', // Minify files using Terser
    sourcemap: true // Generate source maps
  }
});

این پیکربندی پوشه خروجی را به  dist تغییر می‌دهد، فشرده‌سازی با Terser را فعال می‌کند و فایل‌های Source Map برای دیباگ را ایجاد می‌کند.

پیکربندی‌های پیشرفته

برای پیکربندی‌های پیشرفته‌تر می‌توانید از اکوسیستم گسترده پلاگین‌های Vite استفاده کنید. به‌عنوان نمونه، برای پشتیبانی از TypeScript می‌توانید پلاگین زیر را اضافه کنید:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactTs from '@vitejs/plugin-react-ts';

export default defineConfig({
  plugins: [react(), reactTs()]
});

این پیکربندی پشتیبانی از TypeScript را برای پروژه React شما فراهم می‌کند.

بهینه‌‌سازی درخواست‌های سرور با استفاده از React Hooks
React Hooks

افزودن پلاگین‌ها برای بهبود تجربه توسعه

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

1. React Refresh

React Refresh قابلیتی به نام Fast Refresh را فعال می‌کند که باعث می‌شود هر زمان تغییری در کد ایجاد کردید، اپلیکیشن به‌طور خودکار به‌روزرسانی شود، بدون آنکه نیاز به بارگذاری مجدد کامل صفحه باشد.

برای استفاده از این قابلیت، کافی است پلاگین @vitejs/plugin-react-refresh را نصب و در فایل پیکربندی اضافه کنید:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
  plugins: [react(), reactRefresh()]
});

2. ESLint

ESLint یکی از ابزارهای پرکاربرد برای بررسی کدهای JavaScript است که مطمئن می‌شود کد شما مطابق با استانداردها و بهترین شیوه‌های برنامه‌نویسی نوشته شده است.

برای اضافه کردن آن به Vite، پلاگین vite-plugin-eslint را نصب و در فایل vite.config.js پیکربندی کنید:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [react(), eslint()]
});

3. Prettier

Prettier یک ابزار محبوب برای فرمت‌دهی کد است که به شما کمک می‌کند سبک کدنویسی یکپارچه و خوانا داشته باشید.

برای استفاده از آن در Vite، کافی است پلاگین vite-plugin-prettier را نصب کرده و در پیکربندی قرار دهید:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import prettier from 'vite-plugin-prettier';

export default defineConfig({
  plugins: [react(), prettier()]
});

جمع بندی

در این آموزش یک پروژه React جدید با استفاده از ابزار Vite ایجاد شد. ابتدا با دستور yarn create vite یک اپلیکیشن تازه راه‌اندازی کردیم. سپس با حذف کدهای اولیه (boilerplate)، ساخت کامپوننت‌ها، اضافه کردن تصویر دلخواه و فایل CSS و همچنین تغییر عنوان صفحه، پروژه را شخصی‌سازی کردیم. در نهایت با اجرای دستور yarn run build یک بسته‌ی بهینه و آماده برای دیپلوی تولید شد.

به اشتراک بگذارید