شروع کار (Get Started)

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

پیش نیاز شروع کار ری اکت: Node.js و npm

برای استفاده از React در محیط واقعی، به npm نیاز داری. npm مدیر پکیج جاوااسکریپت است؛ یعنی برنامه ای که کتابخانه ها را نصب می کند. npm همراه Node.js نصب می شود. Node.js محیط اجرای جاوااسکریپت روی کامپیوتر است.

همچنین باید یک محیط ری اکت و یک ابزار ساخت (Build Tool) داشته باشی. ابزار ساخت برنامه را برای اجرا و انتشار آماده می کند. در این آموزش از ابزار Vite استفاده می کنیم.

1. نصب و بررسی Node.js

اول باید مطمئن شوی Node.js روی سیستم نصب است. برای این کار ترمینال را باز کن. ترمینال همان صفحه سیاه اجرای دستورها است. حالا این دستور را بزن:

node -v

اگر Node.js نصب باشد، یک شماره نسخه می بینی. مثلا چیزی شبیه v22.15.0 نمایش داده می شود. اگر هیچ نسخه ای ندیدی، باید Node.js را از سایت رسمی نصب کنی.

برای نصب می توانی به سایت Node.js بروی. نسخه مناسب سیستم عامل خودت را دانلود و نصب کن. بعد دوباره دستور node -v را امتحان کن.

2. نصب ابزار ساخت Vite

حالا وقت نصب ابزار ساخت Vite است. Vite ابزاری است که پروژه ری اکت را سریع راه می اندازد. همچنین کد را برای توسعه و اجرا آماده می کند.

در ترمینال این دستور را اجرا کن تا create-vite به صورت سراسری نصب شود:

npm install -g create-vite

اگر نصب موفق باشد، پیامی شبیه این می بینی: added 1 package in 649ms. این یعنی بسته موردنیاز اضافه شده است. حالا آماده ساخت پروژه هستی.

3. ساخت پروژه جدید React با Vite

حالا یک برنامه ری اکت جدید می سازیم. نام پروژه در این مثال my-react-app است. در ترمینال این دستور را وارد کن:

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

ممکن است پیامی ببینی که می گوید باید create-vite نصب شود. مثلا می نویسد Ok to proceed? (y). در این صورت حرف y را بزن و Enter فشار بده تا ادامه دهد.

اگر همه چیز درست باشد، خروجی ای شبیه متن زیر می بینی. در آن نوشته شده پروژه در پوشه my-react-app ساخته شده است. همچنین پیشنهاد می دهد این دستورها را اجرا کنی: cd my-react-app، بعد npm install و در پایان npm run dev.

4. نصب وابستگی ها (Dependencies)

حالا باید وابستگی ها را نصب کنی. وابستگی (Dependency) یعنی کتابخانه ها و پکیج هایی که پروژه لازم دارد. اول وارد پوشه پروژه شو:

cd my-react-app

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

npm install

بعد از چند لحظه، پیغامی شبیه این می بینی: added 154 packages و در انتها found 0 vulnerabilities. این یعنی بسته ها نصب شده اند و مشکلی گزارش نشده است.

5. اجرای اولین پروژه React

حالا آماده ای اولین برنامه واقعی React را اجرا کنی. هنوز داخل پوشه my-react-app هستی. این دستور را اجرا کن:

npm run dev

اگر همه چیز درست باشد، خروجی ای شبیه این می بینی. مثلا نوشته می شود VITE v6.3.5 ready in .... همچنین آدرس محلی پروژه نمایش داده می شود؛ مثل http://localhost:5173/.

گاهی مرورگر خودکار باز می شود و پروژه را نشان می دهد. اگر نشد، خودت مرورگر را باز کن. سپس آدرس localhost:5173 را در نوار آدرس بنویس. حالا صفحه پیش فرض React را می بینی.

مسیر ادامه بعد از شروع کار ری اکت

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

1. صفحه مقدمه ری اکت را دوباره سریع مرور کن.
2. پروژه my-react-app را در ادیتور کد باز کن.
3. سپس به سراغ صفحه اولین اپ React برو و کد را ویرایش کن.

نکته: اگر در هر مرحله خطایی دیدی، متن خطا را دقیق بخوان. بیشتر خطاها از اشتباه در دستور ترمینال یا نبودن Node.js و npm است.

جمع بندی سریع

• برای شروع کار ری اکت به Node.js و npm نیاز داری.
• با ابزار Vite یک پروژه React آماده می سازی.
• دستورهای npm install و npm run dev بسیار مهم هستند.
• بعد از اجرا، پروژه را روی آدرس localhost:5173 می بینی.
• قدم بعد، ویرایش کد در فصل اولین اپ React است.