آنچه که در فصل اول دوره پروژه محور 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
درود بر شما
خسته نباشید
در قسمت اول از فصل نهم،اونجایی که دارید منو رو ایجاد میکنید و استایل رو بصورت آماده قرار میدید این استایل هارو سورسش کجاست؟
الان میخوام این کار رو انجام بدم نمیشه