آموزش نصب ری‌اکت (React) + Vite و راه‌اندازی پروژه (روش جدید و قدیم)

برای شروع کار با ری‌اکت، ابتدا باید ابزارهای مورد نیاز را نصب کرده و یک پروژه جدید راه‌اندازی کنید. در این آموزش، دو روش اصلی برای نصب و ایجاد پروژه ری‌اکت را به همراه نصب پکیج‌ها و اکستنشن‌های کاربردی VS Code آموزش می‌دهیم.

پیش‌نیازها: نصب Node.js

قبل از هر اقدامی، باید Node.js را روی سیستم خود نصب داشته باشید. Node.js شامل npm (مدیریت بسته‌های Node) است که برای نصب پکیج‌های ری‌اکت ضروری می‌باشد.

• برای دانلود و نصب آخرین نسخه Node.js، به سایت رسمی Node.js مراجعه کنید.
• نسخه LTS (پشتیبانی طولانی‌مدت) را برای پایداری بیشتر انتخاب کنید.
• پس از نصب، با اجرای دستورات زیر در ترمینال می‌توانید از نصب صحیح اطمینان حاصل کنید:

node -v
npm -v

روش اول: نصب ری‌اکت با Create React App (روش قدیمی)

Create React App یک ابزار رسمی و محبوب برای راه‌اندازی سریع پروژه‌های ری‌اکت بدون نیاز به تنظیمات پیچیده است.

مراحل:

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

npx create-react-app App-Name

• App-Name را با نام دلخواه پروژه خود جایگزین کنید.

2. پس از اتمام نصب، وارد پوشه پروژه شوید:

cd App-Name

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

npm start

• پروژه شما روی آدرس http://localhost:3000 اجرا خواهد شد.

روش دوم: نصب ری‌اکت با Vite (روش جدید و سریع‌تر)

Vite یک ابزار جدید و بسیار سریع برای ساخت پروژه‌های جاوااسکریپتی است که نسبت به Create React App سرعت بیشتری در اجرا و بیلد دارد.

مراحل:

1. برای ایجاد پروژه جدید با Vite، دستور زیر را اجرا کنید:

npm create vite@latest App-Name

2. در مرحله بعد، فریم‌ورک مورد نظر را انتخاب کنید. با استفاده از کلیدهای جهت‌نما، گزینه React را انتخاب کرده و Enter بزنید.

3. سپس نوع پروژه را انتخاب کنید. می‌توانید React (جاوااسکریپت) یا React + TypeScript را انتخاب کنید.

4. وارد پوشه پروژه شوید:

cd App-Name

5. پکیج‌های مورد نیاز را نصب کنید:

npm install

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

npm run dev

• پروژه شما روی آدرس http://localhost:5173 (یا پورت دیگری) اجرا خواهد شد.

نصب پکیج‌ها (Dependencies)

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

npm install
# یا به صورت مخفف
npm i

• برای نصب یک پکیج خاص، از دستور npm install package-name استفاده کنید.
• پکیج‌های نصب شده در فایل package.json ثبت می‌شوند.

بهترین اکستنشن‌های VS Code برای توسعه ری‌اکت

برای افزایش سرعت کدنویسی و بهبود تجربه توسعه در محیط VS Code، اکستنشن‌های زیر را نصب کنید:

جمع‌بندی

در این آموزش، دو روش اصلی برای نصب ری‌اکت را یاد گرفتید:

• روش قدیمی (Create React App): مناسب برای پروژه‌های ساده و مبتدیان.
• روش جدید (Vite): سریع‌تر و سبک‌تر، مناسب برای پروژه‌های حرفه‌ای.

همچنین با نحوه نصب پکیج‌ها و بهترین اکستنشن‌های VS Code برای توسعه ری‌اکت آشنا شدید. برای شروع کدنویسی، یکی از روش‌های بالا را انتخاب کرده و اولین پروژه ری‌اکت خود را راه‌اندازی کنید.