آموزش نصب ری اکت در 5 دقیقه ! ( به ساده ترین روش ممکن برای مبتدی ها )
اگه تازه با ری اکت آشنا شدید و نمیدونید چطور میشه تو 5 دقیقه نصب ری اکت رو به کمک ابزار Vite انجام داد، تو این مقاله با فِرانت اِندی همراه باشید 🙂
نصب ری اکت در 5 دقیقه !
تو این مقاله میخوایم آموزش نصب ری اکت به کمک ابزار Vite رو در چند دقیقه باهمدیگه یاد بگیریم. همچنین تو این آموزش از فریمورک Tailwind CSS برای استایل دهی استفاده میکنیم.
برای اینکه بتونیم ری اکت رو نصب کنیم، باید با موارد زیر آشنا باشیم ( اگه با هرکدوم آشنا نیستید، روی عنوانش کلیک کنید تا به مقاله مربوطه ریدایرکت بشید )
پیش نیاز های نصب ری اکت در این مقاله
برای اینکه بتونیم ری اکت رو به کمک ابزار Vite و فریمورک Tailwind CSS نصب کنیم، باید با پیش نیاز های زیر آشنایی داشته باشیم:
خب دیگه بریم سراغ آموزش نصب ری اکت 🙂
نصب ری اکت ( مرحله اول )
تو مرحله اول آموزش نصب ری اکت، باید به پوشه ای که میخوایم ری اکت رو داخلش نصب کنیم بریم و دستور نصب ری اکت رو اجرا کنیم. من از VSCode استفاده میکنم و بعد از رفتن به مسیر دلخواهم، دستور زیر رو داخل ترمینال وارد میکنم :
npm create vite@latest your-project-name -- --template react
تو تصویر زیر میشه دید که من داخل VSCode به مسیر دلخواهم رفتم ( پوشه FrontEndi ) و دستور نصب React رو داخل ترمینال اجرا کردم.
اگه داخل ترمینال از شما سوال شد که آیا از نصب پکیج Vite اطمینان دارید؟ دکمه y کیبورد رو فشار بدید تا این پکیج برای ما نصب بشه.
بعد چند ثانیه ری اکت + ابزار Vite با موفقیت برای ما نصب میشه ( مطابق تصویر زیر ) :
اگه دقت کنید میبینیم که پوشه your-project-name برای ما ساخته شده اما ما واردش نشدیم! در حقیقت برای اینکه بتونیم داخل Vscode با این پروژه کار کنیم، باید وارد پوشه پروژه ساخته شده بشیم.
برای اینکه وارد این پوشه بشیم باید دستور زیر رو داخل ترمینال وارد کنیم تا به مسیر پوشه جدید بریم :
cd your-project-name
عالیه 🙂 تا به اینجای کار ما نصب ری اکت رو انجام دادیم.
نصب ری اکت ( مرحله دوم )
تو این مرحله ما فریمورک Tailwind CSS رو برای استایل دهی پروژمون نصب میکنیم. اگه به Tailwind CSS احتیاجی نداریم، میتونیم از این مرحله عبور کنیم و سراغ مرحله ششم بریم.
برای نصب Tailwind CSS در ری اکت، بباید دستور زیر رو داخل ترمینال VScode وارد کنیم :
npm install -D tailwindcss postcss autoprefixer
با دستور بالا، فریمورک TailwindCSS + پیش نیاز های خودش برای ما نصب میشه.
بعد از نصب Tailwind ، باید پوشه بندی پروژه ما بصورت زیر باشه :
نصب ری اکت ( مرحله سوم )
حالا که Tailwind رو نصب کردیم، باید کانفیگش رو هم انجام بدیم. برای ساخت فایل کانفیگ Tailwind باید دستور زیر رو داخل ترمینال وارد کنیم :
npx tailwindcss init -p
دستور بالا فایل tailwind.config.js و postcss.config.js رو برای ما ایجاد میکنه.
نصب ری اکت ( مرحله چهارم )
تو این مرحله باید به Tailwind بگیم که چه فایل هایی با چه فرمتی رو بررسی کنه. ( برای تبدیل className های Tailwind به CSS خام )
برای اینکار باید وارد فایل tailwind.config.js بشیم و کد زیر رو داخلش قرار بدیم :
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html",
"./src/**/*.{js,ts,jsx,tsx}",],
theme: {
extend: {},
},
plugins: [],
}
تو خط 3 و 4 تیکه کد بالا، گفتیم هرچی فایل با فرمت js , ts , jsx و tsx دیدی + فایل index.html رو بررسی کن و تمامی className های تیلویند رو به css خام تبدیل کن.
نصب ری اکت ( مرحله پنجم )
تو این مرحله باید Tailwind Directives رو به CSS های خودمون اضافه کنیم.
تیلویند سه لایه مختلف داره که ما باید این 3 لایه رو به CSS های خودمون اضافه کنیم.
برای اینکار وارد آدرس src/index.css میشیم و کد زیر رو داخلش قرار میدیم ( اگه این فایل رو نداریم، میتونیم بسازیم ) :
@tailwind base;
@tailwind components;
@tailwind utilities;
نصب ری اکت ( مرحله ششم )
تو این مرحله میتونیم پروژه ری اکت خودمون رو Start کنیم تا خروجی رو داخل مرورگر ببینیم 🙂
برای اینکار دستور زیر رو داخل ترمینال وارد میکنیم :
npm run dev
پس از چند لحظه، پیام موفقیت آمیز زیر رو داخل ترمینال میبینیم :
حالا اگه دکمه ctrl کیبورد رو نگه داریم و روی آدرس آبی رنگ بالا کلیک کنیم، خروجی رو داخل مرورگر میبینیم ( یا آدرس آبی رنگ رو بصورت دستی داخل مرورگر وارد کنیم ):
و تمام 🙂
ما علاوه بر اینکه یک پروژه ری اکتی به کمک Vite ساختیم، میتونیم از تیلویند هم توی پروژه خودمون برای استایل دهی استفاده کنیم.
اگه بصورت متنی آموزش نصب ری اکت رو متوجه نشدید، اصلا نگران نباشید! ابتدای همین صفحه ویدئوی آموزش نصب ری اکت قرار داده شده که میتونید بصورت ویدئویی این مورد رو یاد بگیرید.
فایلهای پروژه ری اکت شامل چه مواردی هستن ؟
پس از نصب React ، یکسری فایل بصورت پیشفرض به پوشه ما اضافه میشن که فایلهای پیشفرض خود ری اکت هستن.
ما به عنوان یک React Developer باید با این فایلها و کاربرد اونها آشنایی داشته باشیم تا درصورت لزوم، ازشون استفاده کنیم.
بریم ببینیم این فایلها و پوشه ها چه مواردی هستن ؟
پوشه node_modules چیست ؟
زمانی که یک پروژه ایجاد میکنیم، اون پروژه تعداد خیلی زیادی وابستگی ( Dependencies ) داره. هر کدوم از این وابستگی ها یک ماژول/ پکیج هستن که یا بصورت خودکار توسط خود ری اکت نصب میشن، یا توسط خود ما نصب میشن ( مثل Tailwind که ما خودمون نصبش کردیم )
اگر وارد پوشه node_modules بشیم میبینیم که شامل تعداد زیادی پوشه هست که هر پوشه یک پکیج/ماژول هست که داخل پروژه بهش نیاز داریم.
نکته ای که باید بهش توجه داشته باشیم این هست که به هیچ وجه نباید فایها و پوشه های داخل node_modules رو دستکاری کنیم.
پوشه public چیست ؟
داخل پوشه public فایلهای زیادی وجود داره. یکی از مهمترین این فایلها، فایل index.html هست. همونطور که میدونیم اپیکیشن های ری اکتی تک صفحه ( Single Page Application هستن و تمام اپیکین ما در نهایت داخل همین فایل index.html قرار میگیره و نمایش داده میشه.
همچنین یک فایل با نام manifest,json داریم که برای اپیکیشن های PWA کاربرد داره.
پوشه src چیست ؟
داخل پوشه src معمولا کامپوننت ها، توابع، استایل ها و سایر فایهای پروژه ری اکتی خودمون رو نگهداری میکنیم.
داخل این پوشه یک فایل با نام index.js بصورت پیشفرض وجود داره که وظیفش Render کردن کامپوننت APP داخل فایل index.html هست.
فایل package.json چیست ؟
این فایل در حقیقت شامل اطلاعات پروژه ما هست ( مواردی از جمله ورژن فعلی پروژه، لیست پکیج ها و وابستگی های پروژه، اسکریپت های پیشفرض و دلخواه ما و .. )
جمع بندی
تو این مقاله ما آموزش نصب React به کمک ابزار Vite و فریمورک TailwindCSS رو بررسی کردیم و دیدیم که چقدر ساده تو 5 دقیقه میشه تمامی این موارد رو نصب و کانفیگ کرد!
امیدوارم که خیلی راحت بتونید نصب React رو انجام بدید، اگه مشکلی تو این پروسه براتون پیش اومد یا سوالی داشتید توی کامنت ها مطرح کنید، تو کمتر از چند ساعت پاسخ میدیم 🙂
خیر اصلا سخت نیست!
تو این مقاله تو کمتر از چند دقیقه نصب ریکت رو انجام دادیم.
ابزار create-react-app مدتی هست که منسوخ شده و بهترین ابزاری که در حال حاضر برای نصب React وجود داره، Vite هست که تو این آموزش ازش استفاده کردیم.
تا مدتها قبل نصب ریکت با این ابزار امکانپذیر بود اما به دلیل منسوخ شدن این ابزار، دیگه امکان استفاده از این ابزار برای نصب ریاکت وجود نداره و حتی اگر ممکن باشه، پیشنهاد نمیشه ( به دلیل مزایای ابزار Vite )
دیدگاهتان را بنویسید