ری اکت (React.js) یک کتابخانه جاوااسکریپتی برای ساخت رابط کاربری(user interfaces) برای اپلیکیشن های تک صفحه ای (single page applications) هست که در سال ۲۰۱۳ توسط تیم توسعه شرکت متا (فیسبوک سابق) ساخته شده است. بخش اصلی در React.js کامپوننتها هستند. یک کامپوننت ترکیبی از HTML و javascript است و تمام منطق مورد نیاز برای نمایش قسمت کوچکی از یک رابط کاربری بزرگ تر را در خود دارد. هر کدام از این کامپوننتها میتوانند به بخشهای پیچیدهتر یک اپلیکیشن اضافه شوند. همچنین React.js این امکان رو در اختیار ما قرار میدهد که کامپوننتهای قابل استفاده مجدد (reusable UI components) رابط کاربری ایجاد کنیم. توی این دوره به آموزش پروژه محور react.js بر اساس آخرین ورژن که در حال حاضر 19 هست به همراه hook ها، react router و redux (redux toolkit) میپردازیم. که 3 پروژه توی این دوره ایجاد میشه شامل پروژه spa(single page application) و استفاده از react router ، پروژه مدیریت Todo با useRducer و useContext و همچنین پروژه سبد خرید با redux (redux toolkit)
برای آشنایی بیشتر با react.js و همچنین مشاهده پروژه ای که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.
همچنین دوره ای نکست جی اس (next.js) و دوره ای آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js) هم توی وبسایت قرار گرفت که نکست جی اس فریمورک، ری اکت جی اس هست و پیشنهاد میکنم حتما بعد از این دوره مشاهده کنید.
مباحثی که در این دوره گفته میشود شامل :
آشنایی با react.js
کار با style در react.js
آشنایی با event و props
کار با المان های فرم (form) در react.js
آشنایی با هوک useState
آشنایی با هوک useEffect
آشنایی با use و کامپوننت های Suspense و ErrorBoundary
آشنایی با هوک useContext
آشنایی با هوک useReducer
آشنایی با react router
ایجاد پروژه spa (single page application)
ایجاد پروژه مدیریت Todo با useReducer و useContext
آشنایی با redux(redux toolkit) و نحوه استفاده در react.js
ایجاد پروژه سبد خرید با redux(redux toolkit)
دوره های پیشنهادی، بعد از گذراندن این دوره :
پیش نیاز این دوره :
برای ارسال کامنت ابتدا باید وارد سایت شوید
عرض سلام و ادب و با تشکر از دوره های خوبی که برگذار میکنید
چطور میتونم با استفاده از input file عکسو برای web api لاراول ارسال کنم؟
منظورم اینه که چه اتریبیوتی از اینپواو باید برای سرور ارسال کنم؟
و اینکه چطور میشه تصویریو که از طریق اینپوت فایل انتخاب میکنم همون لحظه تو یه دیو بالای همون اینپوت نشون بدم
سلام وقت بخیر.
باید از formData استفاده کنید که کلاس js هست و توی fetch برای body مقدار formData را قرار میدید برای نمایش هم میتونید از کلاس FileReader استفاده کرد اما متاسفانه اینترنت نیست برای سرچ و مشاهده داکیومنت
سلام استاد.
از شما خیلی ممنونم بابت بازتولید دوره react .
بنده اموزش برنامه نویسی رو از سایت شما شروع کردم .
مت تقریبا توی ۷۰ درصد دوره های شما شرکت کردم و تقریبا میتونم بگم که با سایت شما دارم تبدیل میشم به یه برنامه نویس فول استک .
اما با این حال بنده متوجه چند موضوع شدم که اگه انجام بشه خیلی ممکنه به بهبود سایت شما و یاد گیری ما تاثیر بگذارد .
۱. چارت آموزشی به دو قسمت آموزش فرانت و بک اند تبدیل بشه . چون که مثلا شما آموزش های اصلی مثل react و vue و nest و ... رو توی چارت قرار ندادید . و بجای اون مسیر تبدیل شدن به برنامه نویس بک اند رو قرار دادید .
۲. اموزش هایی مثل سئو و یا pwa و یا regex اضافه کنید به سایت .
تشکر 🙏
سلام وقت بخیر.
ممنون از شما و ارسال نظرتون
بله حتما توی نسخه جدید سایت لحاظ میکنیم🙏
با عرض سلام و ادب و باتشکر از اهمیتی که برای دانشجوها قایلید و دوره هارو به روز رسانی میکنید
مهندس جان یه سوالی داشتم
چطور میشه وضعیت cheched چک باکس یا رادیو باکسو که از طریق api میگیریم همون موقع لود شدن اول صفحه رو چک باکس اعمال کنیم؟
سلام وقت بخیر.
ممنون از شما، پیشنهاد میکنم در ابتدا حتما یکبار دوره را مشاهده کنید مخصوص بخش پروژه هاش، بصورت کلی مهم اینکه توی دیتای برگشتی مقدار براش هست یا نه و خب اگه هست برای ویژگی checked قرار میدید مثلا checked={data.value} یه زمانیم مثلا چندتا دونه هست میتونیدبراشون useState تعریف کنید مثال x و وقتی دیتا دریافت میشه توی useEffect این useState مقدار دهی بشه و برای اون چک باکس در نظر گرفته بشه checked={x}
دقیقا همینکارو کردم تو حالت checked جواب میده ولی وقتی به defaultChecked تغییرش میدم اعمال نمیشه :(
توی defaultChecked فقط دفعه اول اجرا میشه و بعد از درخواست به api یا fetch دیگه آپدیت نمیشه
سلام تو آموزش ری اکت باید برای استفاده از cdn ,... باید به سایت react دسترسی داشته باشیم که با این وضع اینترنت دسترسی ندارم ، برای ادامه آموزشم باید چه کار کنم؟
سلام وقت بخیر.
در داخل فایل تمرینی قرار گرفته cdn برای استفاده ولی ممکنه بخاطر اختلال شدید در اینترنت کار نکنه و مهم نیست شما ویدیو رو مشاهده و ادامه بدید جلوتر با vite نصب و استفاده میشه
سلام
فایلهای مثل فونت و آیکون که خودمون به پروژه اضافه میکنیمو باید تو فولدر public اضافه کنیم؟
سلام وقت بخیر مهدی عزیز
توی جلسه مربوط به ایجاد "پروژه react.js با vite.js" از دقیقه 13 به بعد توضیح داده شده و توی پوشه assets قرار میگیره
سلام وقت بخیر
لطفاً راه حلی برای افرادی که با حساب گوگل وارد سایت میشوند ارائه بدهید.
سلام وقت بخیر.
اگه منظورتون دوستانی هستند که قبلا با اکانت گوگل وارد شدند و الان لاگین نیستند در سیستم و قصد ورود دارند. متاسفانه بخاطر اختلال شدید اینترنت براشون ایمیل تغیر رمز عبور ارسال نمیشه اما میتوانید در صفحه ارتباط با وب پروگ (لینک در هدر یا فوتر) در فرم ارسال پیشنهادات پیامی به همراه ایمیل و شماره تماس در خصوص فعال سازی ایمیل یا تغیر رمز عبور ارسال کنید
سلام و درود استاد عزیز❤️
تشکر میکنم بابت بازتولید دوره ریکت 🙏🙏
خسته نباشید و خداقوت👌👌👌
سلام وقت بخیر.
ممنون از شما و حمایتتون🙏
سلام استاد گرامی وقت شما بخیر، ببخشید در بازتولید دوره، پروژه سبد خرید از React toolkit استفاده میکنید یا خیر؟ و باز تولید کامل دوره حدودا تا کی طول میکشه؟ ممنون.
سلام وقت بخیر.
بله، استفاده میشه
مدت زمان مشخص نیست. چون هنوز ضبط دوره اش تموم نشده🙏
استاد سلام
وقتتون بخیر
فرموده بودید در باز تولید دوره درباره redux و redux toolkit صحبت می کنید اما محتوایی با این موضوع تا الان گذاشته نشده
سلام وقت بخیر.
بله، صحبت میشه و دوره در حال برگزاری هست و هنوز تموم نشده
سلام بعد از خرید دوره امکان دانلود اموزش ها وجود داره؟ دوره برای کسانی که هیچ دانشی از ری اکت ندارن مناسبه؟
سلام وقت بخیر.
بله، امکان دانلود هست مانند دوره های رایگان و هیچ تفاوتی نداره
بله، برای دوستانی هست که قصد آشنایی با ری اکت رو دارند اما نیازه با جاوااسکریپت به خوبی آشنا باشید.
توی توضیحات و ویدیو معرفی دوره کامل توضیحات داده شده، حتما مشاهده کنید.
با سلام و درود بر شما، همچنین پر قوت ادامه بدید ما هم استفاده کنیم.
سلام وقت بخیر.
ممنون از شما و حمایتتون🙏
خداروشکر دوره براتون مفید بوده
سلام و وقت بخیر خدمت شما خیلی ممنون بابت تنوع دوره ها و زحماتتون که بینظیر است
سلام وقت بخیر.
ممنون از شما و حمایتتون🙏
خداروشکر دوره براتون مفید بوده
سلام و احترام استاد اخرین ورژن ریکت هم دیروز معروفی شد توی کنفرانس react استاد در مورد <Activity />
useEffectEvent
cacheSignal این سه تا مورد جدید هم اگر امکانش هست یک توضیح بدید خیلی عالی میشه سپاس فراوان
سلام وقت بخیر.
چشم بررسی میکنم اگر کاربردی بود توی دوره اضافه میکنم. cacheSignal که برای سرور کامپوننت ها هست و توی فریمورک های مثله next.js که سرور کامپونت را ساپورت میکنن میشه استفاده
سلام و عرض ادب فکر میکنم منظور شما next.js یوده که در چند روز اخیر اخرین نسخه بصورت بتا معرفی شده و این موارد رو معرفی کرده
سلام وقت بخیر.
بله، هر ویژگی و تغییری در ری اکت باشه، سریعا next.js هم اضافه میکنه
چون next.js فریمورک ری اکت هست و بر پایه ای ری اکت کار میکنه
ممنون جناب شیخ بابت پاسخگوییتون در رابطه با فچ کردن اصولی دیتا فقط درخواستی که دارم اینه که یه پروژه بلاگ رو به صورت کامل بنظرم توی دوره قرار بدین تو لیست پروژه ها مثل فچ کردن دیتا به صورت اصولی توی ری اکت مثل همین چیزی که دیروز برای من پیش اومد یا ساخت بخش احراز هویت و لاگین رجیستر و انجام عملیات های ثبت و آپدیت و ویرایش و اعتبار سنجی فرم ها و.. بنظرم خیلی به نفعمون خواهد شد
سلام وقت بخیر.
خواهش میکنم، درخواست باشه یک دوره پروژه محور حالا فروشگاهی با ری اکت ایجاد کنیم و توی دوره هم گفتم اگه درخواست زیاد باشه اینجور دوره ای پیاده سازی کنیم.
هر چند دوره نکست جی اس که فریمورک ری اکت هست و همچنین ساخت فروشگاه اینترنتی با نکست جی اس هم توی سایت هست.
سوالی که برای من پیش اومده اینه که الان توی یه سایتی که هوم پیجش قسمت های مختلف داره و هر قسمت از api دیتا دریافت میکنه بهترین حالت برای هندل کردنش چیه ؟ ینی اگه فرض کنیم مثلا یه بلاگیه که وقتی شما هوم پیج رو باز میکنی همزمان شروع میکنه سکشن یوزر ها و پست ها و اخرین پست هارو پارالل لود کردن ایده ای که به ذهن خودم میرسید این بود که فچ کردن اطلاعات رو داخل کامپوننت مجزا مربوط به هر سکشن انجام بدم ولی نمیدونم این اصولی هست یا نه
سلام وقت بخیر.
ببینید شما میتونید توی هر کامپونت مجزا برای بخش های مختلف دیتا را دریافت کنید و ری اکت بصورت همزمان درخواست میزنه و برای تعداد درخواست و بخش های خیلی زیاد خیلی بهینه نیست و حتی میتونید برای فرضا بخش های انتهای صفحه از react lazy استفاده کنید که وقتی کاربر اسکرول کرد و پایین آمد درخواست زده بشه و دیتا برگشت داده بشه که بهینه باشه برای تعداد درخواست بالا در یک صفحه
بصورت موازی هم میشه اینکار را انجام داد یعنی استفاده از Promise.all که در موردش توی دوره (آموزش asynchronous در javascript (جاوااسکریپت) پروژه محور) صحبت شده که توی کامپونت والد دیتا بخش ها بصورت موازی دریافت و بصورت prop به کامپوننت ها پاس داده میشه که زمانی مهم هست استفاده از این روش، که وابستگی بین دریافت اطاعات توی بخش ها باشه مثلا اول درخواست زده بشه برای بخش کاربر و با توجه به اطلاعات برگشتی درخواست به بخش مقاله زده بشه
و اما روش دیگه اینکه از پکیج های حرفه ای برای data fetching استفاده کنید مثله react query (TanStack Query) که دیتا ها را کش و کار های مختلفی انجام میده که بشکل بهینه باشه و توی کامپونت هر بخش دیتا دریافت بشه و هر کجا از اون کامپوننت استفاده بشه فقط یکبار درخواست میزنه
سلام استاد به نظرم این دوره خیلی خوبی هست و خیلی کامل هست فقط استاد یک سوال داشتم یک هفته دیگه کنفرانس react هست میخوان به احتمال زیاد react ورژن ۲۰ معرفی کنن شامل یک سری بهبود ها هست به نظرم صبر کنید یک هفته تا کنفرانس react ورژن ۲۰ معرفی بشه از ورژن ۲۰ شروع به باز تولید دوره کنید بعدش هم اگر امکان داره یک دوره تکمیلی برای react hook form , react query بزارید که واقعا لازم هست
سلام وقت بخیر.
ممنون از شما و حمایتتون
ببینید الان توی ورژن 19 هم تغیرات خیلی جزیی بوده و بهبود ها توی خوده کامپایلر ری اکت بوده و سرور کامپوننت ها که توی فریمورک های مثل next.js قابل استفاده هست ولی بازم اگه مورد خاصی باشه حتما اضافه میشه
سلام و احترام استاد واقعا خیلی خوش حالم این دوره داره باز تولید میشه یکی از مهم ترین دوره ها هست با اختلاف من چند ماه پیش این خریدم می دونسم باز تولید میشه و باز ویدیو های جدید میبینم واقعا ممنون استاد بابت اموزش این دوره بی نظیر امید وارم بهترین دوره react فارسی بشه مثل قبل سپاس فراوان
سلام وقت بخیر.
ممنون از شما و حمایتتون
خداروشکر دوره براتون مفید و کاربردی بوده
سلام و صبحتون به خیر❤️
تشکر میکنم بابت باز تولید دوره🙏🙏🙏
خسته نباشید🙏🙏
سلام وقت بخیر.
ممنون از شما و حمایتتون🙏
سلام و خسته نباشید
استاد گرامی به نظرتون برای یادگیری همین رو شروع کنیم یا منتظر بازتولید باشیم؟
سلام وقت بخیر.
خیلی مباحث مشترک هست چون تغیرات جزئی بوده از طرفی توی هفته آینده ویدیو های جدید شروع میشه و توی سایت قرار میگیره
MehdiGoodBoY
درود خدمت دوستان بالاخص اقای شیخ عزیز.
توی این مدت قطعی نت مسلما کسانی که پیگیر یادگیری هستن راهی پیدا خواهند کرد.
من بعد از کند و کاو تونستم به مستنداتی دست پیدا کنم که دوست دارم با دوستان به اشتراک بزارم بلکه بتونن راه رو در نبود نت ملی ادامه بدن.
برای مستندات اکثر زبان ها میتونید از سایت https://docs.parchlinux.com استفاده کنید.
همچنین https://underdevelops.com هم وجود داره که فارسی هست ولی به کاملی مرجع بالایی نیست.
این از این
مورد بعدی اگه برای دانلود پکیج های npm یا vite به مشکل خوردید بصورت
بجای express اسم اون کتابخونه ای که میخواید رو وارد کنید. برای npx هم اوکی هست.
این میرور فارسی هست.پکیجهارو دانلود میکنه ولی نه به اخرین ورژن که بنظرم تو این روزا مهم نیست .فقط بتونیم ادامه بدیم کافیه.و اینکه در نظر داشته باشید زیاد درخواست الکی ندید فکر میکنم بالای ۲۰ تا برای هر ای پی لیمیت میخوره
مورد بعدی جایگزین Fake restful API هست که در مثال ها از jsonplaceholder استفاده شده که الان کار نمیکنه .من تونستم سایت https://moviesapi.ir/ پیدا کنم.خوبه کار راه اندازه و اینکه نهایتا اگر پسند نشد دوستان میتونن بصورت لوکال خودشون یک فایل txt درست کنن و بهش فچ بزنن.درست همونجوری که اوایل اموزش Asynchronous انجام داده شده و میتونن جهت یاد اوری رجوع کنن.
به امید روزای خوب برا هممون
علی شیخ
3 ماه پیش
سلام وقت بخیر مهدی عزیز
خیلی ممنون از توضیحات و راه حل های که پیدا کردی🙏
دانشجو 5686
3 ماه پیش
من واقعا ممنونم از اینکه اطلاعاتتون رو به اشتراک گذاشتید . من دقیقا توی همین نصب پکیج ها مونده بودم . خیلی ممنونم ازتون کارم راه افتاد کاملا
MehdiGoodBoY
3 ماه پیش
بازم جایگزین برای jsonplaceholder
https://apitester.ir/swagger/index.html
عالیه.استفاده کنید
دانشجو 8814
1 ماه پیش
سلام روز خوش ممنون بابت توضیحات
جای express میشه vite رو گذاشت؟ میخوام این دستور npm create vit@latest react_test رو درcmdنصب کنم اما ممکن نیست شما میدونین دقیقا چی باید بزنم
علی شیخ
1 ماه پیش
سلام وقت بخیر.
بله تفاوتی نداره