آنچه که در فصل اول دوره پروژه محور React گفته شد…

در فصل قبلی با کتابخانه React آشنا شدیم و پس از بررسی مزیت ها و بازار کار React در ایران و جهان، شروع به یادگیری مباحث پایه ای نظیر JSX، Props، States، Events کردیم و در ادامه یاد گرفتیم چگونه فرم ها را در React مدیریت کنیم و در مثال جستجو ی عکس، با ریکوئست دادن و API های برنامه نویسی آشنا شدیم و نحوه استفاده از Redux برای مدیریت state ها را یاد گرفتیم و در نهایت با پروژه ی انتهای فصل، سعی کردیم مباحث تدریس شده را مرور کنیم.

در فصل دوم آموزش React js به چه مباحثی میپردازیم…

  • در بخش اول و دوم این فصل، مباحث Hook و Context آموزش داده می شود که بعد از معرفی در React 16.8، بشدت مورد استفاده توسعه دهندگان قرار گرفت.
  • React Router یکی از کتابخانه هایی مورد نیاز اکثر پروژه های React هستند و در بخش سوم با این کتابخانه آشنا می شویم و درون پروژه از آن استفاده می کنیم
  • از بخش چهارم پروژه نماوا شروع می شود که بشدت در یادگیری شما تاثیر دارد و بعد از پروژه یه سری مباحث دیگر نیز آموزش داده شده است که می تواند مورد نیاز شما یا شرکتی که قصد استخدام شدن آن را دارید باشد مباحثی مثل:
    • Webpack
    • React Testing
    • React DevTools
    • احراز هویت در React

پروژه ی دوره (وبسایت نماوا)

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

  • سایت نماوا یکی از بهترین سایت های ایرانی نوشته شده با React هست و در این دوره، سعی کردیم بخش های مهم این سایت که مباحث آموزش دارند پیاده سازی کنیم.
  • می توانید دمو پروژه را در انتها ویدیو معرفی دوره مشاهده کنید.
    • Slider، MovieList، Movie Preview و TopMenu که تقریبا صفحه اصلی سایت را پیاده سازی می کنند.
    • صفحه Single Page نماوا هم در یک بخش، آموزش داده می شود.
    • در آخر نیز Lists و Search را پیاده سازی می کنیم.

مخاطبین دوره آموزش React js:

  • دانشجویان و فارغ التحصیلان رشته های کامپیوتر
  • علاقه مندان به یادگیری react
  • کسانی که قصد کسب درآمد از این حوزه را دارند
  • و…

پیش نیازهای آموزش React js:

  • آشنایی مقدماتی با javascript
  • گذراندن فصل اول آموزش react

سرفصل های آموزش React js:

  • معرفی و دمو

بخش اول: هوک در React

  • هوک و نگاه عمیق به ان
  • هوک – قسمت ۱ – معرفی و نگاهی دوباره
  • هوک – قسمت ۲ – useState
  • هوک – قسمت ۳ – useEffect
  • هوک – قسمت ۴ – Rules of Hooks
  • هوک – قسمت ۵ – useReducer
  • هوک – قسمت ۶ – Custom Hook
  • هوک – قسمت ۷ – useRef
  • هوک – قسمت ۸ – useCallback
  • هوک – قسمت ۹ – useMemo

بخش دوم:‌React Context

  • Context – قسمت ۱ – معرفی
  • هوک – قسمت ۲ – useContext
  • مدیریت state با استفاده از Context

بخش سوم: React Route

  • آموزش React Router – 1 – معرفی
  • آموزش React Router – 2 – Url Parameters
  • آموزش React Router – 3 –  Nesting Link Not Found
  • آموزش React Router – 4 – Redirect

بخش چهارم: ساخت سایت نماوا: Slider

  • معرفی پروژه سایت نماوا
  • Slider نماوا – قسمت اول – کامپوننت Slider
  • Slider نماوا – قسمت دوم – حل مشکل CORS
  • Slider نماوا – قسمت سوم – Slider Context
  • Slider نماوا – قسمت چهارم – Slider داینامیک
  • Slider نماوا – قسمت ۵ – Animation
  • Slider نماوا – قسمت ۶ – Slider Button and Info
  • Slider نماوا – قسمت ۷ – action button

بخش پنجم: ساخت سایت نماوا: Movie List

  • نماوا Movie List – قسمت ۱ – Movie Item
  • نماوا Movie List – قسمت ۲ – Row List
  • ماوا Movie List – قسمت ۳ – Flickity
  • نماوا Movie List – قسمت ۴ – Dynamic RowList
  • نماوا Movie List – قسمت ۵ – Dynamic Home Page
  • نماوا Movie List – قسمت ۶ – Dynamic Home Page
  • نماوا Movie List – قسمت ۷ – Item Component in RowList
  • نماوا Movie List – قسمت ۸ – Lazy Loading
  • نماوا Movie List – قسمت ۹ – Placeholder for Lazy Loading
  • نماوا Movie List – قسمت ۱۰ – Lazy Loading
  • نماوا Movie List – قسمت ۱۱ – RowList Refactor
  • نماوا Movie List – قسمت ۱۲ –  Refactor
  • نماوا Movie List – قسمت ۱۳ –  Exclusive Dubs
  • ماوا Movie List – قسمت ۱۴ –  Advertisement Item
  • نماوا Movie List – قسمت ۱۵ –  Hover on Movie Item

بخش ششم: ساخت سایت نماوا: Movie Preview

  • نماوا Movie Preview – قسمت ۱ –  Movie Detail
  • نماوا Movie Preview – قسمت ۲ –  Action Buttons
  • نماوا Movie Preview – قسمت ۳ –  Animation
  • نماوا Movie Preview – قسمت ۴ –  Dynamic Preview
  • نماوا Movie Preview – قسمت ۵ –  Dynamic Preview
  • نماوا Movie Preview – قسمت ۶ –  Fix some Bugs

بخش هفتم:‌ساخت سایت نماوا: Single Page

  • نماوا Single Page – قسمت ۱ –  Singe Page Route
  • نماوا Single Page – قسمت ۲ –  Dynamic
  • نماوا Single Page – قسمت ۳ –  getItemUrl
  • ماوا Single Page – قسمت ۴ –  Top Media
  • نماوا Single Page – قسمت ۵ –  Trailer
  • نماوا Single Page – قسمت ۶ –  Movie Info
  • نماوا Single Page – قسمت ۷ –  Person Item
  • نماوا Single Page – قسمت ۸ –  Multi Line List
  • ماوا Single Page – قسمت ۹ –  Multi Line List
  • نماوا Single Page – قسمت ۱۰ – Comment
  • نماوا Single Page – قسمت ۱۱ – Seasons
  • نماوا Single Page – قسمت ۱۲ – Seasons
  • نماوا Single Page – قسمت ۱۳ – Seasons

بخش هشتم: ساخت سایت نماوا: List

  • نماوا List – قسمت ۱ – List
  • نماوا List – قسمت ۲ – Show More
  • نماوا List – قسمت ۳ – Show More
  • نماوا List – قسمت ۴ – Show More
  • نماوا List – قسمت ۵ – Collections
  • نماوا List – قسمت ۶ – Collections
  • نماوا List – قسمت ۷ – Persons
  • نماوا List – قسمت ۸ – Fix Some bugs

بخش نهم: ساخت سایت نماوا: Top Menu

  • نماوا Top Menu – قسمت ۱ – Top Menu Animation
  • ماوا Top Menu – قسمت ۲ – Menu Items
  • نماوا Top Menu – قسمت ۳ – Dynamic Page
  • نماوا Top Menu – قسمت ۴ – Dynamic Page

بخش دهم: ساخت سایت نماوا: Search

  • نماوا Search – قسمت ۱ – Search Box
  • نماوا Search – قسمت ۲ – Filter Provider
  • نماوا Search – قسمت ۳ – Filter
  • نماوا Search – قسمت ۴ – Filter
  • ماوا Search – قسمت ۵ – Filter Box
  • نماوا Search – قسمت ۶ – Filter Options
  • نماوا Search – قسمت ۷ – Range Slider
  • نماوا Search – قسمت ۸ – Select Filter Options
  • نماوا Search – قسمت ۹ – Filtered Buttons
  • نماوا Search – قسمت ۱۰ – Range Slider Select
  • نماوا Search – قسمت ۱۱ – Query String
  • نماوا Search – قسمت ۱۲ – Query String
  • نماوا Search – قسمت ۱۳ – Search Input
  • نماوا Search – قسمت ۱۴ – Fetch Search Item
  • نماوا Search – قسمت ۱۵ – Fetch Search Item
  • نماوا Search – قسمت ۱۶ – Fetch Search Item
  • نماوا Search – قسمت ۱۷ – Fetch Search Item
  • نماوا Search – قسمت ۱۸ – Show Search Result
  • نماوا Search – قسمت ۱۹ – Filter Box Active
  • نماوا Search – قسمت ۲۰ – Build Project

بخش یازدهم: آموزش Webpack

  • آموزش Webpack – قسمت ۱ – Webpack CLI
  • آموزش Webpack – قسمت ۲ – Webpack Config
  • آموزش Webpack – قسمت ۳ – Webpack Loaders
  • آموزش Webpack – قسمت ۴ – Webpack Plugins
  • آموزش Webpack – قسمت ۵ – Webpack React

بخش دوازدهم: آشنایی با React Testing

  • آموزش React Testing – قسمت ۱
  • آموزش React Testing – قسمت ۲
  • آموزش React Testing – قسمت ۳
  • آموزش React Testing – قسمت ۴
  • آموزش React Testing – قسمت ۵
  • آموزش React Testing – قسمت ۶

بخش سینزدهم: آموزش ابزار React DevTools

  • آموزش ابزار React DevTools

بخش چهاردهم: احراز هویت در React

  • احراز هویت در React