راه‌اندازی محیط توسعه React در اوبونتو (با Node.js و Vite)

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

این راهنما شما را با جدیدترین روش‌ها برای راه‌اندازی یک پروژه حرفه‌ای روی یک VPS برای برنامه نویسی React آشنا می‌کند.

پیش‌نیازها

• یک سرور با سیستم‌عامل اوبونتو (20.04، 22.04 یا 24.04).
• دسترسی به ترمینال با یک کاربر دارای دسترسی sudo.

قدم اول: نصب آخرین نسخه Node.js

React و ابزارهای اکوسیستم آن بر پایه Node.js اجرا می‌شوند (آموزش نصب Nodejs). برای اطمینان از سازگاری و عملکرد بهتر، ما آخرین نسخه LTS (پشتیبانی بلندمدت) Node.js را با استفاده از اسکریپت رسمی NodeSource نصب می‌کنیم.

# 1. اسکریپت نصب Node.js 20.x (آخرین نسخه LTS) را دانلود و اجرا کنید
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# 2. Node.js را نصب کنید
sudo apt-get install -y nodejs

پس از اتمام نصب، با اجرای دستور node -v مطمئن شوید که Node.js به درستی نصب شده است. شما باید نسخه 20.x.x را مشاهده کنید.

قدم دوم: ایجاد پروژه جدید React با Vite (روش مدرن)

در گذشته، ابزار create-react-app روش اصلی برای ساخت پروژه‌های React بود. اما این ابزار اکنون کند و قدیمی محسوب می‌شود. امروزه، Vite به دلیل سرعت فوق‌العاده بالا، به عنوان بهترین و توصیه‌شده‌ترین ابزار برای راه‌اندازی پروژه‌های جدید React شناخته می‌شود.

برای ساخت یک پروژه جدید، دستور زیر را در ترمینال اجرا کنید. این دستور از `npm` (که همراه با Node.js نصب شده) برای اجرای اسکریپت `create-vite` استفاده می‌کند:

npm create vite@latest

پس از اجرای این دستور، Vite یک فرآیند تعاملی را آغاز می‌کند:

1. Project name: یک نام برای پروژه خود وارد کنید (مثلا my-react-app).
2. Select a framework: با استفاده از کلیدهای جهت‌نما، React را انتخاب کرده و Enter را بزنید.
3. Select a variant: گزینه JavaScript را انتخاب کنید (مگر اینکه بخواهید از TypeScript استفاده کنید).

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

قدم سوم: نصب وابستگی‌ها و اجرای سرور توسعه

حالا که پروژه ساخته شده، باید وابستگی‌های اولیه آن را نصب کنید.

# 1. وارد پوشه پروژه خود شوید
cd my-react-app

# 2. وابستگی‌ها را نصب کنید
npm install

پس از اتمام نصب، می‌توانید سرور توسعه (Development Server) را با دستور زیر اجرا کنید:

npm run dev

اگر همه چیز به درستی انجام شده باشد، خروجی به شما اطلاع می‌دهد که سرور توسعه روی یک آدرس مشخص (معمولا http://localhost:5173) در حال اجراست. اگر روی سرور مجازی کار می‌کنید، باید این پورت را در فایروال خود باز کرده و با استفاده از IP عمومی سرور به آن دسترسی پیدا کنید.

قدم چهارم: ساخت نسخه نهایی برای انتشار (Production Build)

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

npm run build

این دستور یک پوشه جدید به نام dist در پروژه شما ایجاد می‌کند. محتویات این پوشه (فایل‌های استاتیک HTML, CSS, JavaScript) همان چیزی است که شما باید روی وب‌سرور خود (مانند آپاچی یا Nginx) آپلود کنید تا سایت شما برای کاربران قابل مشاهده باشد.

شما با موفقیت اولین نسخه نهایی اپلیکیشن React خود را ساختید. اکنون محتویات پوشه dist آماده است تا روی یک VPS برای وب اپلیکیشن‌ قرار گرفته و در دسترس کاربران سراسر جهان باشد.”