توضیحات

ری اکت (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

  • آشنایی با react.js
  • نحوه کار react.js
  • ایجاد و توضیح ساختار پروژه react.js با vite.js
  • آشنایی با JSX (javascript XML)
  • توضیح و ایجاد کامپوننت 

کار با style در react.js

  • افزودن فایل css
  • افزودن فایل sass
  • آشنایی با inline style
  • نحوه افزودن فریمورک bootstrap (بوت استرپ)
  • نحوه افزودن react-bootstrap
  • نحوه افزودن فریمورک tailwindcss (تیلویند سی اس اس)

آشنایی با event و props

  • توضیح و نحوه کار با event ها در react.js
  • آشنایی با مبحث prop در react.js

کار با المان های فرم (form) در react.js

  • کار با input و textarea
  • کار با select box
  • کار با checkbox و radio

آشنایی با هوک useState 

  • آشنایی با useState
  • نحوه استفاده از object و array در useState

آشنایی با هوک useEffect 

  • آشنایی با useEffect
  • اجرای useEffect بصورت شرطی و همچنین یکبار
  • آشنایی با cleanup
  • دریافت دیتا از api با useEffect

آشنایی با use و کامپوننت های Suspense و ErrorBoundary  

آشنایی با هوک useContext

  • آشنایی با مبحث context
  • آشنایی با هوک useContext

آشنایی با هوک useReducer

  • آشنایی با useReducer
  • ترکیب و استفاده از useReducer و useContext

آشنایی با react router

  • توضیح spa (single page application)
  • Link & NavLink
  • useParams
  • useLocation
  • useHistory
  • nested routing

ایجاد پروژه spa (single page application) 

ایجاد پروژه مدیریت Todo با useReducer و useContext

آشنایی با redux(redux toolkit) و نحوه استفاده در react.js

ایجاد پروژه سبد خرید با redux(redux toolkit)

 

دوره های پیشنهادی، بعد از گذراندن این دوره :

پیش نیاز این دوره :


javascript جاوا اسکریپت جاوااسکریپت fetch api asynchronous react ری اکت ری_اکت_جی_اس ری_اکت_جی_اس_ورژن_19 react_js react_js_version_19 ریداکس_جی_اس redux_js ری_اکت_روتر react_router

مدرس دوره علی شیخ
مدت دوره 21:00:21
تعداد ویدیو 133

وضعیت دوره : درحال برگزاری
قیمت دوره : 699,000 524,000 تومان
% 25 تخفیف

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

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

    • سلام وقت بخیر.
      خواهش میکنم، درخواست باشه یک دوره پروژه محور حالا فروشگاهی با ری اکت ایجاد کنیم و توی دوره هم گفتم اگه درخواست زیاد باشه اینجور دوره ای پیاده سازی کنیم.
      هر چند دوره نکست جی اس که فریمورک ری اکت هست و همچنین ساخت فروشگاه اینترنتی با نکست جی اس هم توی سایت هست.

  • سوالی که برای من پیش اومده اینه که الان توی یه سایتی که هوم پیجش قسمت های مختلف داره و هر قسمت از 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 رو مشاهده کردم .
    البته بنده این دوره رو تازه خریداری کردم .
    ایا به ویدیو جدید دسترسی دارم ؟
    این دوره تا چند وقت دیگه اپلود میشه ؟؟

    • سلام وقت بخیر.
      ممنون از شما دانیال عزیز
      درحال آماده سازی هستم و هنوز ضبط شروع نکردم و مشخص نیست زمان آپلود دوره
      کار تولید محتوا کار سخت و زمانبری هست🙏
      بله به محتوای جدید دسترسی دارید.

  • ضمن تشکر فراوان از جنابعالی،
    استاد میشه با دستور npx بصورت پیش فرض یک پروژه react نسخه 6 ایجاد کرد.
    وقتی دستور npx create-react-app projectname رو اجرا میکنیم نسخه 5 هست.

    • سلام وقت بخیر.
      ری اکت الان نسخه ۱۹ هست و ورژن ۶ که خیلی قدیمی هست. درست متوجه سوالتون نشدم

  • سلام وقت بخیر
    من لاراول کار میکنم و برای فول استک شدن میخوام vue یا react یاد بگیرم. ولی نمیدونم کدوم بیشتر به کارم میاد. دوست داشتم اگه ممکنه نظر شما رو بدونم.

    • سلام وقت بخیر.
      این موضوع بستگی به هدف شما داره یه زمانی هدف شما کار توی شرکتی هست پس بهتره برید و ببینید بیشتر با کدوم کار میکنن توی شرکت ها یا شرکت های که توی شهرتون هست.خیلی تفاوتی بین این دوتا نیست و با یکی آشنا بشید چون مفهوم و کانسپت شبیه هم هستند اون یکی را سریع یاد میگیرید.

    • سلام وقت بخیر
      توی ورژن 19 تغیراتی نبوده و صرفا چندتا هوک جدید معرفی شده و محتوا مشکلی نداره ولی چشم در موزشون صحبت میکنیم.

    • سلام وقت بخیر.
      مطالب دوره برای استفاده در ورژن ۱۹ بدون مشکل هست و صرفا توی ورژن ۱۹ چندین هوک جدید معرفی کرده

  • سلام وقت بخیر
    یه سوال راجب Redux داشتم این درسته که تعداد زیادی Slice توی App.js پروواید بشه؟ و توی هرکدوم هم عملیات Crud سرور باشه مشکلی پیش نمیاد برای پرفورمنس؟
    یا برا باز کردن مودال هم از redux استفاده بشه

    • سلام وقت بخیر.
      ببینید بصورت کلی شما برای موارد مهم و خاصی که نیاز دارید توی صفحات مختلف بهش دسترسی داشته باشید ازش استفاده میکنید. برای باز کردن مودال یا هر کاری که فقط توی همون صفحه هست اصلا نیازی نیست همچنین از لوکال استوریج هم میشه برای یکسری کار ها استفاده کرد.

  • سلام و خسته نباشید به استاد شیخ
    استاد من نزدیک 5 ماهه دوبار دوره ریکتتونو دیدم پروژه هاشو باهاتون کد زدم و تمرین کردم مفاهیم رو هم بلدم اما بازم نمیتونم 0 تا 100 یه سایت رو تنهایی بالا بیارمش میخواستم نظرتونو بدونم و کمکم کنین ک چیکار باید بکنم
    و در اخر اینکه الان بمونم روی ریکت و وسواس بیشتری بعد 5 ماه به خرج بدم یا نکست رو شروع کنم

    • سلام وقت بخیر.
      ببینید توی دنیای برنامه نویسی تحلیل خیلی مهم هست و شما زمانیکه تحلیل کنید که فلان کار را میخواهید انجام بدید با یه سرچ ساده تکه کد یا سینتکس اون زبان و فریمورک را پیدا میکنید و شما روی تحلیل کردن کل و جز باید کار کنید.
      اگه ری اکت را درک کردید و به خوبی آشنا هستید که فکر میکنم به همین شکل هست. برید سراغ دوره نکست و فروشگاهی نکست اونجا امکانات بیشتر هست و دید خیلی بهتری میده مخصوصا زمانیکه توی یک پروژه فروشگاهی تجربه کنید.

  • وظیفه خودم دونستم باز هم ازتون تشکر کنم با این آموزش هم غافلگیر شدم پارت 31 مگه میشه به این زیبایی usereducer رو کسی توضیح بده و صد البته همه ی آموزش های شما با همین کیفیت ممنونم استاد

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون کاربردی بوده

  • با عرض سلام و وقت بخیر.
    بنده میخواستم فایل های تمرین های 67 و 69 پروژه تودو رو اجرا کنم. طبق اموزشتون از دستور npm i استفاده کردم پس از گذشت چند دقیقه یک سری فایل نصب شد ولی فایل اجرا نمیشه.میخواستم اگر امکان داره یک دور این تمرین ها رو چک کنید و ببینید مشکلشون کجاست؟