telegram

توضیحات

ری اکت (React.js) یک کتابخانه جاوااسکریپتی برای ساخت رابط کاربری(user interfaces) برای اپلیکیشن های تک صفحه ای (single page applications) هست که در سال ۲۰۱۳ توسط تیم توسعه فیسبوک ساخته شده است. بخش اصلی در React کامپوننت‌ها هستند. یک کامپوننت ترکیبی از HTML و javascript است و تمام منطق مورد نیاز برای نمایش قسمت کوچکی از یک رابط کاربری بزرگ‌ تر را در خود دارد. هر کدام از این کامپوننت‌ها می‌توانند به بخش‌های پیچیده‌تر یک اپلیکیشن اضافه شوند. همچنین React این امکان رو در اختیار ما قرار میدهد که کامپوننت‌های قابل استفاده مجدد (reusable UI components) رابط کاربری ایجاد کنیم. توی این دوره به آموزش پروژه محور react ورژن 17 و 18 (در ورژن 18 چیزی تغییر نکرده و شما این دوره را میتوانید با ورژن 18 ری اکت مشاهده کنید همچنین در بخش انتهای دوره درمورد ورژن 18 صحبت کردیم) به همراه hook ها، react router و redux میپردازیم.که 3 پروژه توی این دوره ایجاد میشه شامل پروژه spa(single page application) ، پروژه مدیریت Todo با useRducer و useContext و همچنین پروژه سبد خرید با redux

برای آشنایی بیشتر با react.js و همچنین مشاهده پروژه ای که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.

همچنین دوره ای نکست جی اس (next.js) هم توی وبسایت قرار گرفت که پیشنهاد میکنم حتما بعد از این دوره مشاهده کنید.

مباحثی که در این دوره گفته میشود شامل :
آشنایی با react.js

  • react چیست
  • ایجاد پروژه react
  • توضیح ساختار پروژه react
  • توضیح و ایجاد کامپوننت 

آشنایی با JSX

  • معرفی jsx
  • قوانین jsx
  • جاوااسکریپت در jsx

style در react

  • افزودن فایل css
  • افزودن فایل sass
  • inline style
  • افزودن فریمورک bootstrap
  • افزودن react-bootstrap

Event & Prop

  • توضیح event در react
  • توضیح prop در react

کار با form

  • input & textarea
  • selectbox
  • checkbox & radio

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

  • آشنایی با useState
  • object و array در useState

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

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

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

  • context چیست
  • آشنایی با useContext

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

  • آشنایی با useReducer
  • useReducer + useContext

آشنایی با useCallback & useMemo & React.memo و custom hook

آشنایی با react-router

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

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

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

آشنایی با redux

  • action & reducer & store
  • combineReducer
  • redux thunk

آشنایی با react-redux

  • action & reducer & storer
  • connect
  • useSelector & useDispatch
  • redux devtools
  • redux thunk

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

ری اکت ورژن 18

  • آشنایی با ویژگی های ورژن 18
  • suspense در ری اکت
  • concurrent در ری اکت

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

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

javascript جاوااسکریپت react ری اکت

مدرس دوره علی شیخ
مدت دوره 16:08:35
تعداد ویدیو 106
وضعیت دوره : کامل شده
قیمت دوره : 399,000 379,000 تومان
% 5 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

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

دوره های آموزشی
آموزش رایگان گیت و گیت هاب (git & github)
کامل شده

آموزش رایگان گیت و گیت هاب (git & github)

گیت (Git) یک سیستم کنترل ورژن است که با آن می‌توانید تغییرات اعمال شده در فایل‌ها را ساده‌تر پیگیری کنید. مثلاً، اگر فای...

رایگان
07:58:20
آموزش آلپاین (alpine.js) پروژه محور
کامل شده
% 5 تخفیف

آموزش آلپاین (alpine.js) پروژه محور

alpine.js یک فریمورک جاوااسکریپت است که میتواند جایگزین بسیار مناسب برای جی کوئری باشد. alpine.js به صورت رسمی برای فریم...

349,000 331,000 تومان
06:52:21
آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور
کامل شده

آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور

برای اینکه وارد دنیای طراحی وب شوید اولین چیزی که باید با آن آشنا شوید HTML است، HTML یک زبانه نشانگذاری برای ایجاد وبسا...

رایگان
13:47:11
آموزش نکست جی اس (next.js)
کامل شده
% 10 تخفیف

آموزش نکست جی اس (next.js)

نکست جی اس ورژن 14، فریمورک Next.js یکی از فریمورک های کتابخانه React برای production است به این معنی که، برای تمام آنچه...

599,000 539,000 تومان
24:41:33

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

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

  • mahdi haghighati

    سلام وقت بخیر
    دو سوال داشتم:
    1- دیتاهایی مثل لیست شهر و استان که ثابت هستند ولی تعداد آیتم ها مقداری زیاد هست را بهتره از سرور بخونیم یا داخل یک آرایه ریکت قراربدیم؟
    2-پردازش استیت ها و محاسبات داخل ریکت ، داخل مرورگر کاربر انجام میشه یا سروری که ریکت رو داخلش قرار دادیم؟

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      سوال اول، شما میتونید برای مواردی که ثابت هستند توی پروژه بصورت یک متغیر داشته باشید اما اگه تغیر میکند از سرور دریافت کنید.
      سوال دوم، ببینید react یک کتابخانه جاوااسکریپتی در سمت فرانت هست، کدهای جاوااسکریپت در سمت فرانت ارسال میشه به مرورگر و اونجا مرورگر اجرا میکنه، بخاطر همین میگیم سمت کلاینت هست.سرور فقط توی درخواستی که بهش ارسال میشه میاد و فایل index.html که توش فایل css و js هم اضافه شده را ارسال میکنه به مرورگر و مرورگر میاد اون فایل ها را میخونه و اجرا میکنه، ری اکت همون جاوااسکریپت هست نه چیزی فراتر

  • mahnaz94

    سلام ممنون از آموزش خوبتون
    استاد اگه خواسته باشیم با ری اکت وبلاگ و واسه فروشگاه درگاه ایجاد کنیم چه طور انجام میشه؟

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر‌.
      برای درگاه شما درخواست به سرور ارسال میکنید و سرور درخواست به درگاه و لینک درگاه برگشت داده میشه و سرور برای شما یا کلاینت ارسال نیکنه و شما کاربر را میفرستید به لینک درگاه برای پرداخت، بیشتر سمت سرور هست. انشاا... توی دوره فروشگاهی next.js در موردش صحبت میکنیم.

  • marcel

    اموزش بسیار با کیفیت و کامل و جذاب بود سپاس برای ادامه ری اکت نیتیو هم می تواند جالب باشد یا اگر پیشنهادی دارید ممنون می شیم بگید استاد

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ممنون از شما، برای ری اکت نیتیو باید درخواست زیاد باشه تا توی برنامه قرار بدیم. دوره بعدی درمورد ری اکت، دوره next.js هست.

    • مهدی سعدونی

      2 سال پیش

      عالیه مرسی از آموزشاتون، منتظر دوره فروشگاهی next js هستم. ریکت نیتیو هم اگه دوره اش رو بذارید عالی میشه!

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ورژن 5 و 6
      در ابتدا با ورژن 5 دوره ضبط شده و بعد از آمدن ورژن 6، قسمت های که توی ورژن 6 تغییر کرده را ضبط و در انتهای اون قسمت قرار داده شده

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ممنون از شما?
      دوره بعدی typescript هست.اگه تقاضا زیاد باشه دوره next.js هم قرار میدهیم.

    • علی شیخ

      2 سال پیش

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

  • mahnaz94

    سلام علی آقا.خوبی؟
    به نظرتون چه هاستی تهیه کنیم که به درد سایت اصلی که بعدا بالا می خواهیم بیاریم هم خوب باشه؟
    و آیا میشه چند تا دامنه رو روی یه هاست داشت؟

    • علی شیخ

      2 سال پیش

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

  • mahnaz94

    سلام علی آقا.خوبی؟
    اول ممنون به خاطر آموزش خوبتون

    امکان داره با اتمام ری اکت دوره next و بقیه ری اکت پیشرفته رو آموزش بدین؟

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ممنون از شما?
      اگه درخواست زیاد باشه، چشم حتما قرار میدیم

    • mahnaz94

      2 سال پیش

      ممنون
      واقعا عالی
      دوره های مکتب خونتون هم مثل ری اکت مقدماتی عالی بودن

    • علی شیخ

      2 سال پیش

      ممنون از شما❤
      تمام دوره های ما توی مکتب خانه، توی وسایتنون هست.

  • leo

    سلام خسته نباشید.
    فرض کنید من یه وب سایت با ریکت ساختم که میاد و از api یسری کتاب رو دریافت میکنه و تو صفحه Home نشون میده. صفحه اصلی به این صورته که شامل چند بخشه مثلا تو قسمت اول پرفروش ترین کتاب ها رو از API دریافت میکنه. تو قسمت دوم جدیدترین کتاب ها و ... وحالا وقتی صفحه home لود میشه بطور همزمان مثلا 6 تا fetch هم زمان اتفاق میوفته و اگه سرعت اینترنت کاربر کم باشه کلی طول میکشه که اطلاعات تو صفحه بیاد. حالا سوال من اینه چجوری میتونیم کاری کنیم که fetch ها یکی یکی انجام بشه. مثلا اول قسمت جدیدترین کتاب ها دریافت بشه و بعد fetch دیگه ران بشه. ممنون

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      یه زمانی شما کل دیتای اون صفحه را با یک درخواست دریافت میکنید و تصاویر را بصورت lazy load قرار میدید.اگه تعداد درخواست ها زیاد باشه میتونید زمانی که اسکرول میشه و اون بخش موردنظر توی viewport قرار گرفت درخواست ارسال بشه و یا کامپوننت run بشه

  • mahnaz94

    سلام استاد .خوبین؟
    یه سوال:
    قبلا وقتی ما سایت رو ایجاد می کردیم فرانت اند داخل بک اند بود و در نهایت اون رو دیپلوی می کردیم

    الان تو دوره ری اکت بالا یک اپ ری اکت رو ایجاد می کنیم

    حالا این موقع دیپلوی چطوری میشه یه اپ بک اند و یه اپ ری اکت

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      پروژه سرور را جدا و پروژه ری اکت را هم جدا دپلوی میکنید،شما از طریق api به سرور وصل میشید و اطلاعات را دریافت میکنید.برای درک بهتر نیازه با api آشنا باشید.

  • leo

    سلام خسته نباشید.
    آیا این درسته که نباید برای پروژه های متوسط و بزرگ از create-react-app استفاده کنیم و بهتره که پکیج های ریکتو با npm هر کدومو که خواستیم به پروژه اضافه کنیم و وب پک رو هم خودمون کانفیگ کنیم؟
    من یه جا خوندم create-react-app فقط واسه تست و یادگیریه و حتی پروژه های کوچیکم با create-react-app ران نکنید.

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      ببینید create-react-app یک پکیج هست که پکیج ها و کانفیگ های موردنیاز برای پروژه react را براتون آماده میکنه و شما میتونید پکیج کم و زیاد کنید و یا کانفیگ را تغییر بدید یا اینکه خودتون از صفر نصب و کانفیگ کنید اون دیگه بستگی به مهارت شما داره و از هر دو روش میتونید استفاده کنید، پس استفاده از create-react-app بنظر من مشکلی نداره

  • armindev

    ممنونم از پاسختون
    اما منظورم اینه که الان 3 سال هست ری اکت به صورت فانکشنال کامپوننت معرفی شده و ما اگر فقط همین شیوه فانکشنال رو یادبگیریم چقدر ممکنه در کد دیگران و پکیج ها به ری اکتی بر بخوریم که به صورت کلاس کامپوننت نوشته شده باشه؟
    آیا دانستن کلاس کامپوننت الزامی هست یا خیر؟
    تشکر

    • علی شیخ

      2 سال پیش

      ببینید شما از هر دو توی ورژن ۱۶.۸ به بالا میتونید استفاده کنید و کلاس کامپوننت چیز خیلی سخت و مشکلی نیست، ممکنه توی یک پروژه کلاس کامپوننت استفاده شده باشه

  • armindev

    سلام
    در مستندات react قسمت هاي مثل فرم ها به صورت كلاس نوشته و توضيح داده شده و توضيحي به صورت فانكشنال در اين قسمت و برخي قسمت هاي ديگر مستندات داده نشده.
    كتابخانه هاي ري اكت هم با كلاس نوشته شده يا فانكشنال؟
    براي من كه بيشتر به صورت فانكشنال كار ميكنم react و مستنداتش و كتابخونه هاش مناسب تره يا vuejs ؟
    تشكر

    • علی شیخ

      2 سال پیش

      سلام وقت بخیر.
      در ری اکت همچنان میتونید از کلاس استفاده کنید و کامپوننت ایجاد کنید،ولی با آمدن hook ها ری اکت به سمت فانکشن امده و کتابخانه ها هم به این سمت، توی این دوره هم ما از فانکشن کامپوننت ها استفاده میکنیم.اما این موضوع ربطی با نوشتن توابع نداره و ایجاد کامپوننت که میتونه داخلش توابع نوشته بشه توی ری اکت میتونه بصورت کلاس و یا توابع باشه