اگه تازه با ری اکت آشنا شدید و نمیدونید چطور میشه تو 5 دقیقه نصب ری اکت رو به کمک ابزار Vite انجام داد، تو این مقاله با فِرانت اِندی همراه باشید 🙂
تو این مقاله میخوایم آموزش نصب ری اکت به کمک ابزار Vite رو در چند دقیقه باهمدیگه یاد بگیریم. همچنین تو این آموزش از فریمورک Tailwind CSS برای استایل دهی استفاده میکنیم.
برای اینکه بتونیم ری اکت رو نصب کنیم، باید با موارد زیر آشنا باشیم ( اگه با هرکدوم آشنا نیستید، روی عنوانش کلیک کنید تا به مقاله مربوطه ریدایرکت بشید )
خب دیگه بریم سراغ آموزش نصب ری اکت 🙂
تو مرحله اول آموزش نصب ری اکت، باید به پوشه ای که میخوایم ری اکت رو داخلش نصب کنیم بریم و دستور نصب ری اکت رو اجرا کنیم. من از VSCode استفاده میکنم و بعد از رفتن به مسیر دلخواهم، دستور زیر رو داخل ترمینال وارد میکنم :
npm create vite@latest your-project-name -- --template react
تو دستور بالا، به جای your-project-name میتونیم اسم پروژه خودمون رو وارد کنیم ( مثلا digikala یا هر اسم دیگه )
تو تصویر زیر میشه دید که من داخل VSCode به مسیر دلخواهم رفتم ( پوشه FrontEndi ) و دستور نصب React رو داخل ترمینال اجرا کردم.
اگه داخل ترمینال از شما سوال شد که آیا از نصب پکیج Vite اطمینان دارید؟ دکمه y کیبورد رو فشار بدید تا این پکیج برای ما نصب بشه.
بعد چند ثانیه ری اکت + ابزار Vite با موفقیت برای ما نصب میشه ( مطابق تصویر زیر ) :
اگه دقت کنید میبینیم که پوشه your-project-name برای ما ساخته شده اما ما واردش نشدیم! در حقیقت برای اینکه بتونیم داخل Vscode با این پروژه کار کنیم، باید وارد پوشه پروژه ساخته شده بشیم.
برای اینکه وارد این پوشه بشیم باید دستور زیر رو داخل ترمینال وارد کنیم تا به مسیر پوشه جدید بریم :
cd your-project-name
عالیه 🙂 تا به اینجای کار ما نصب ری اکت رو انجام دادیم.
تو این مرحله ما فریمورک Tailwind CSS رو برای استایل دهی پروژمون نصب میکنیم. اگه به Tailwind CSS احتیاجی نداریم، میتونیم از این مرحله عبور کنیم و سراغ مرحله ششم بریم.
رفقا لطفا برای مشاهده مرحله 2 تا 6 روی لینک زیر کلیک کنید و مابقی مقاله رو در فِرانت اِندی مطالعه کنید :
