ری اکت (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)
دوره های پیشنهادی، بعد از گذراندن این دوره :
پیش نیاز این دوره :
برای ارسال نظر ابتدا باید وارد سایت شوید
ممنون جناب شیخ بابت پاسخگوییتون در رابطه با فچ کردن اصولی دیتا فقط درخواستی که دارم اینه که یه پروژه بلاگ رو به صورت کامل بنظرم توی دوره قرار بدین تو لیست پروژه ها مثل فچ کردن دیتا به صورت اصولی توی ری اکت مثل همین چیزی که دیروز برای من پیش اومد یا ساخت بخش احراز هویت و لاگین رجیستر و انجام عملیات های ثبت و آپدیت و ویرایش و اعتبار سنجی فرم ها و.. بنظرم خیلی به نفعمون خواهد شد
سلام وقت بخیر.
خواهش میکنم، درخواست باشه یک دوره پروژه محور حالا فروشگاهی با ری اکت ایجاد کنیم و توی دوره هم گفتم اگه درخواست زیاد باشه اینجور دوره ای پیاده سازی کنیم.
هر چند دوره نکست جی اس که فریمورک ری اکت هست و همچنین ساخت فروشگاه اینترنتی با نکست جی اس هم توی سایت هست.
سوالی که برای من پیش اومده اینه که الان توی یه سایتی که هوم پیجش قسمت های مختلف داره و هر قسمت از 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 فارسی بشه مثل قبل سپاس فراوان
سلام وقت بخیر.
ممنون از شما و حمایتتون
خداروشکر دوره براتون مفید و کاربردی بوده
سلام و صبحتون به خیر❤️
تشکر میکنم بابت باز تولید دوره🙏🙏🙏
خسته نباشید🙏🙏
سلام وقت بخیر.
ممنون از شما و حمایتتون🙏
سلام و خسته نباشید
استاد گرامی به نظرتون برای یادگیری همین رو شروع کنیم یا منتظر بازتولید باشیم؟
سلام وقت بخیر.
خیلی مباحث مشترک هست چون تغیرات جزئی بوده از طرفی توی هفته آینده ویدیو های جدید شروع میشه و توی سایت قرار میگیره
سلام استاد خسته نباشید .
واقعا از شما تشکر میکنم بابت این دوره .
https://webprog-projects-js.ir/
بنده جلو جلو رفتم و پروژه نهایی دوره react رو مشاهده کردم .
البته بنده این دوره رو تازه خریداری کردم .
ایا به ویدیو جدید دسترسی دارم ؟
این دوره تا چند وقت دیگه اپلود میشه ؟؟
سلام وقت بخیر.
ممنون از شما دانیال عزیز
درحال آماده سازی هستم و هنوز ضبط شروع نکردم و مشخص نیست زمان آپلود دوره
کار تولید محتوا کار سخت و زمانبری هست🙏
بله به محتوای جدید دسترسی دارید.
تشکر میکنم از شما بابت این همه پیگیری 🙏🙏🙏
خواهش میکنم.
سلام استاد .
اگه امکانش هست این دوره رو بازتولید کنید .
چون الان یکسری تغییرات داشته مثل پسوند jsx. و در نحوه اجرا با vite و ....
سلام وقت بخیر.
بله، باز تولید میشه دوره
استاد سلام
وقتتون بخیر
جسارتا میشه تغییرات react ورژن19 رو هم بذارید؟
سلام وقت بخیر.
تغییرات زیادی نداشته اما قرار دوره را کامل بازتولید کنیم.
سلام لطفا در خصوص react native هم آموزش بذارید.ممنون از وب سایتتون
سلام وقت بخیر.
ممنون از شما و حمایتتون🙏
اگه درخواست زیاد باشه سعی میکنم توی برنامه کاری قرار بدیم.
ضمن تشکر فراوان از جنابعالی،
استاد میشه با دستور npx بصورت پیش فرض یک پروژه react نسخه 6 ایجاد کرد.
وقتی دستور npx create-react-app projectname رو اجرا میکنیم نسخه 5 هست.
سلام وقت بخیر.
ری اکت الان نسخه ۱۹ هست و ورژن ۶ که خیلی قدیمی هست. درست متوجه سوالتون نشدم
سلام وقت بخیر
من لاراول کار میکنم و برای فول استک شدن میخوام vue یا react یاد بگیرم. ولی نمیدونم کدوم بیشتر به کارم میاد. دوست داشتم اگه ممکنه نظر شما رو بدونم.
سلام وقت بخیر.
این موضوع بستگی به هدف شما داره یه زمانی هدف شما کار توی شرکتی هست پس بهتره برید و ببینید بیشتر با کدوم کار میکنن توی شرکت ها یا شرکت های که توی شهرتون هست.خیلی تفاوتی بین این دوتا نیست و با یکی آشنا بشید چون مفهوم و کانسپت شبیه هم هستند اون یکی را سریع یاد میگیرید.
سلام و احترام استاد این دوره را اپدیت نمی کنید به react 19 چون واقعا الان react توی بازار کار خیلی نیاز هست ...؟
سلام وقت بخیر
توی ورژن 19 تغیراتی نبوده و صرفا چندتا هوک جدید معرفی شده و محتوا مشکلی نداره ولی چشم در موزشون صحبت میکنیم.
سلام ، من میخام این دوره رو تهیه کنم
آیا بروز هست؟
جون react 19 اومده ، ازین بابت گفتم...
سلام وقت بخیر.
مطالب دوره برای استفاده در ورژن ۱۹ بدون مشکل هست و صرفا توی ورژن ۱۹ چندین هوک جدید معرفی کرده
سلام خواهشا درباره ری اکت ۱۹ و ری اکت روتر ۷ حتما ویدیوهاشو به این دوره اضافه کنید.
سلام وقت بخیر.
چشم، در موردشون صحبت میکنیم.
سلام وقت بخیر
یه سوال راجب Redux داشتم این درسته که تعداد زیادی Slice توی App.js پروواید بشه؟ و توی هرکدوم هم عملیات Crud سرور باشه مشکلی پیش نمیاد برای پرفورمنس؟
یا برا باز کردن مودال هم از redux استفاده بشه
سلام وقت بخیر.
ببینید بصورت کلی شما برای موارد مهم و خاصی که نیاز دارید توی صفحات مختلف بهش دسترسی داشته باشید ازش استفاده میکنید. برای باز کردن مودال یا هر کاری که فقط توی همون صفحه هست اصلا نیازی نیست همچنین از لوکال استوریج هم میشه برای یکسری کار ها استفاده کرد.
سلام و خسته نباشید به استاد شیخ
استاد من نزدیک 5 ماهه دوبار دوره ریکتتونو دیدم پروژه هاشو باهاتون کد زدم و تمرین کردم مفاهیم رو هم بلدم اما بازم نمیتونم 0 تا 100 یه سایت رو تنهایی بالا بیارمش میخواستم نظرتونو بدونم و کمکم کنین ک چیکار باید بکنم
و در اخر اینکه الان بمونم روی ریکت و وسواس بیشتری بعد 5 ماه به خرج بدم یا نکست رو شروع کنم
سلام وقت بخیر.
ببینید توی دنیای برنامه نویسی تحلیل خیلی مهم هست و شما زمانیکه تحلیل کنید که فلان کار را میخواهید انجام بدید با یه سرچ ساده تکه کد یا سینتکس اون زبان و فریمورک را پیدا میکنید و شما روی تحلیل کردن کل و جز باید کار کنید.
اگه ری اکت را درک کردید و به خوبی آشنا هستید که فکر میکنم به همین شکل هست. برید سراغ دوره نکست و فروشگاهی نکست اونجا امکانات بیشتر هست و دید خیلی بهتری میده مخصوصا زمانیکه توی یک پروژه فروشگاهی تجربه کنید.
وظیفه خودم دونستم باز هم ازتون تشکر کنم با این آموزش هم غافلگیر شدم پارت 31 مگه میشه به این زیبایی usereducer رو کسی توضیح بده و صد البته همه ی آموزش های شما با همین کیفیت ممنونم استاد
سلام وقت بخیر.
ممنون از شما و حمایتتون
خداروشکر دوره براتون کاربردی بوده
با عرض سلام و وقت بخیر.
بنده میخواستم فایل های تمرین های 67 و 69 پروژه تودو رو اجرا کنم. طبق اموزشتون از دستور npm i استفاده کردم پس از گذشت چند دقیقه یک سری فایل نصب شد ولی فایل اجرا نمیشه.میخواستم اگر امکان داره یک دور این تمرین ها رو چک کنید و ببینید مشکلشون کجاست؟
سلام وقت بخیر.
ارور چی دریافت میکنید؟
mwmix
سلام و احترام استاد اخرین ورژن ریکت هم دیروز معروفی شد توی کنفرانس react استاد در مورد <Activity />
useEffectEvent
cacheSignal این سه تا مورد جدید هم اگر امکانش هست یک توضیح بدید خیلی عالی میشه سپاس فراوان
علی شیخ
1 هفته پیش
سلام وقت بخیر.
چشم بررسی میکنم اگر کاربردی بود توی دوره اضافه میکنم. cacheSignal که برای سرور کامپوننت ها هست و توی فریمورک های مثله next.js که سرور کامپونت را ساپورت میکنن میشه استفاده
hamed rezaei
1 هفته پیش
سلام و عرض ادب فکر میکنم منظور شما next.js یوده که در چند روز اخیر اخرین نسخه بصورت بتا معرفی شده و این موارد رو معرفی کرده
علی شیخ
1 هفته پیش
سلام وقت بخیر.
بله، هر ویژگی و تغییری در ری اکت باشه، سریعا next.js هم اضافه میکنه
چون next.js فریمورک ری اکت هست و بر پایه ای ری اکت کار میکنه