آنچه که در فصل اول دوره پروژه محور 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

  • هوک و نگاه عمیق به ان
  • هوک – قسمت 1 – معرفی و نگاهی دوباره
  • هوک – قسمت 2 – useState
  • هوک – قسمت 3 – useEffect
  • هوک – قسمت 4 – Rules of Hooks
  • هوک – قسمت 5 – useReducer
  • هوک – قسمت 6 – Custom Hook
  • هوک – قسمت 7 – useRef
  • هوک – قسمت 8 – useCallback
  • هوک – قسمت 9 – useMemo

بخش دوم:‌React Context

  • Context – قسمت 1 – معرفی
  • هوک – قسمت 2 – 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 نماوا – قسمت 5 – Animation
  • Slider نماوا – قسمت 6 – Slider Button and Info
  • Slider نماوا – قسمت 7 – action button

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

  • نماوا Movie List – قسمت 1 – Movie Item
  • نماوا Movie List – قسمت 2 – Row List
  • ماوا Movie List – قسمت 3 – Flickity
  • نماوا Movie List – قسمت 4 – Dynamic RowList
  • نماوا Movie List – قسمت 5 – Dynamic Home Page
  • نماوا Movie List – قسمت 6 – Dynamic Home Page
  • نماوا Movie List – قسمت 7 – Item Component in RowList
  • نماوا Movie List – قسمت 8 – Lazy Loading
  • نماوا Movie List – قسمت 9 – Placeholder for Lazy Loading
  • نماوا Movie List – قسمت 10 – Lazy Loading
  • نماوا Movie List – قسمت 11 – RowList Refactor
  • نماوا Movie List – قسمت 12 –  Refactor
  • نماوا Movie List – قسمت 13 –  Exclusive Dubs
  • ماوا Movie List – قسمت 14 –  Advertisement Item
  • نماوا Movie List – قسمت 15 –  Hover on Movie Item

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

  • نماوا Movie Preview – قسمت 1 –  Movie Detail
  • نماوا Movie Preview – قسمت 2 –  Action Buttons
  • نماوا Movie Preview – قسمت 3 –  Animation
  • نماوا Movie Preview – قسمت 4 –  Dynamic Preview
  • نماوا Movie Preview – قسمت 5 –  Dynamic Preview
  • نماوا Movie Preview – قسمت 6 –  Fix some Bugs

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

  • نماوا Single Page – قسمت 1 –  Singe Page Route
  • نماوا Single Page – قسمت 2 –  Dynamic
  • نماوا Single Page – قسمت 3 –  getItemUrl
  • ماوا Single Page – قسمت 4 –  Top Media
  • نماوا Single Page – قسمت 5 –  Trailer
  • نماوا Single Page – قسمت 6 –  Movie Info
  • نماوا Single Page – قسمت 7 –  Person Item
  • نماوا Single Page – قسمت 8 –  Multi Line List
  • ماوا Single Page – قسمت 9 –  Multi Line List
  • نماوا Single Page – قسمت 10 – Comment
  • نماوا Single Page – قسمت 11 – Seasons
  • نماوا Single Page – قسمت 12 – Seasons
  • نماوا Single Page – قسمت 13 – Seasons

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

  • نماوا List – قسمت 1 – List
  • نماوا List – قسمت 2 – Show More
  • نماوا List – قسمت 3 – Show More
  • نماوا List – قسمت 4 – Show More
  • نماوا List – قسمت 5 – Collections
  • نماوا List – قسمت 6 – Collections
  • نماوا List – قسمت 7 – Persons
  • نماوا List – قسمت 8 – Fix Some bugs

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

  • نماوا Top Menu – قسمت 1 – Top Menu Animation
  • ماوا Top Menu – قسمت 2 – Menu Items
  • نماوا Top Menu – قسمت 3 – Dynamic Page
  • نماوا Top Menu – قسمت 4 – Dynamic Page

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

  • نماوا Search – قسمت 1 – Search Box
  • نماوا Search – قسمت 2 – Filter Provider
  • نماوا Search – قسمت 3 – Filter
  • نماوا Search – قسمت 4 – Filter
  • ماوا Search – قسمت 5 – Filter Box
  • نماوا Search – قسمت 6 – Filter Options
  • نماوا Search – قسمت 7 – Range Slider
  • نماوا Search – قسمت 8 – Select Filter Options
  • نماوا Search – قسمت 9 – Filtered Buttons
  • نماوا Search – قسمت 10 – Range Slider Select
  • نماوا Search – قسمت 11 – Query String
  • نماوا Search – قسمت 12 – Query String
  • نماوا Search – قسمت 13 – Search Input
  • نماوا Search – قسمت 14 – Fetch Search Item
  • نماوا Search – قسمت 15 – Fetch Search Item
  • نماوا Search – قسمت 16 – Fetch Search Item
  • نماوا Search – قسمت 17 – Fetch Search Item
  • نماوا Search – قسمت 18 – Show Search Result
  • نماوا Search – قسمت 19 – Filter Box Active
  • نماوا Search – قسمت 20 – Build Project

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

  • آموزش Webpack – قسمت 1 – Webpack CLI
  • آموزش Webpack – قسمت 2 – Webpack Config
  • آموزش Webpack – قسمت 3 – Webpack Loaders
  • آموزش Webpack – قسمت 4 – Webpack Plugins
  • آموزش Webpack – قسمت 5 – Webpack React

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

  • آموزش React Testing – قسمت 1
  • آموزش React Testing – قسمت 2
  • آموزش React Testing – قسمت 3
  • آموزش React Testing – قسمت 4
  • آموزش React Testing – قسمت 5
  • آموزش React Testing – قسمت 6

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

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

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

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