دوره React js. از ابتدا به همراه با Redux و React Router
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- نحوه استفاده از React برای ساخت UIهای فرانتاند فوقالعاده
- نحوه راه اندازی، ناوبری و استفاده از create-react-app برای ساخت اپلیکیشنهای React به آسانی
- نحوه استفاده از React بدون webpack یا ES6
- سیستم چرخه عمر (lifecycle) کامپوننت React
- داشتن ایده خوب در مورد نحوه ساخت یک پروژه بزرگ (ما یک کلون کوچک از AirBnB انجام میدهیم).
پیشنیازهای دوره
- آشنایی با JavaScript. انتظار ندارم یک جدایِ JS باشید، اما نباید تازهکار باشید.
توضیحات دوره
نکته مهم: این دوره در سال 2017 ساخته شد، زمانی که classها مدل اصلی برای React بودند و ES6 جدید بود. از آن زمان، مدل به طور قابل توجهی تغییر کرده تا بر برنامهنویسی تابعی (hooks) تمرکز کند. تغییرات کوچکتر اما مهمی مانند استفاده از next.js ،redux-tool-kit و غیره نیز مورد توجه قرار گرفتهاند. hooks را هم در React و هم در Redux (ماژول react-redux) پوشش میدهیم، اما تمرکز دوره بر مدل قدیمیتر است. اگر تازهکار هستید، لطفاً به این نکته توجه داشته باشید و اگر مدل مبتنی بر کلاس را ترجیح میدهید، این ممکن است دقیقاً همان چیزی باشد که به دنبال آن هستید.
این دوره:
با شروع Angular 1 در سال 2010، فریمورکهای JavaScript در صحنه منفجر شدند و توسط تقریباً هر وبسایت بزرگی در اینترنت مورد نیاز هستند. React که چند سال بعد در 2013 ظاهر شد، به ابزار غالب در آن گروه تبدیل شده است. این برای شما چه معنایی دارد؟ میتوانید یاد بگیرید از همان فریمورک فرانتاند استفاده کنید که توسط Facebook ،Amazon ،Netflix ،BBC، Airbnb و Ebay استفاده میشود. و شما فقط نحوه استفاده از آن را یاد نمیگیرید، بلکه اصول پیرامون آن را خواهید آموخت.
خلاصه: React فوقالعاده است. من 8 سال است که آن را به صورت حرفهای تدریس میکنم و عاشق آن هستم. آن را اینجا یاد بگیرید!
آنچه از شما نیاز دارم:
- نیاز داریم که JavaScript ،CSS و HTML را بدانید.
- استفاده از React الزامی نیست، اما React استفاده بسیار سنگینی از ES6 (آپدیت 2015 برای JavaScript) میکند، بنابراین دوره پس از بخش اصلی اول از ES6 استفاده خواهد کرد. در صورت نیاز به طور مختصر نحوه کار آن را توضیح خواهیم داد و یک بخش تکمیلی اضافه میکنیم که آن بخشها را پوشش میدهد.
- نیاز داریم بدانید چگونه در کامپیوتر خود ناوبری کنید، از ترمینال نترسید و هر زمان سوالی داشتید بپرسید!
بخشهای برجسته (bold) حداکثر تا 15 آگوست تکمیل خواهند شد. پس از تکمیل، پیامی ارسال خواهیم کرد.
بخشها:
راه اندازی محیط (اگر node را نصب دارید رد کنید)
React 101
State و رویدادها (Events)
چرخه حیات کامپوننت و HTTP
پروژه 1 - اپلیکیشن فلش کارت (سرویسهای AWS)
React Router
Redux
Redux Middleware (redux-promise و redux-thunk)
کلون AirBnB با Redux
مروری بر احراز هویت (Auth) از دیدگاه فرانتاند
ساخت/آمادهسازی React برای استقرار
Hooks - روش «2020» برای انجام React
Context
تکمیلی - ES6 برای React
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگانی که میدانند چگونه از JavaScript استفاده کنند و میخواهند استفاده از React را شروع کنند تا مدیریت UIهای خود را آسانتر کنند.
دوره React js. از ابتدا به همراه با Redux و React Router
-
نصب Nodejs و VSCode - MAC (اگر دارید رد کنید) 08:38
-
نصب Nodejs روی PC (اگر دارید رد کنید) 04:46
-
استفاده از Visual Studio Code روی PC (اگر دارید رد کنید) 02:21
-
مقدمه - طرح اولیه دوره - و ریپازیتوری github 02:36
-
اختیاری - تاریخچه مختصر JS و اینکه چرا به React نیاز داریم؟ 11:51
-
چگونه از Express در این بخش استفاده خواهیم کرد؟ 04:51
-
الزامی - ساخت یک سرور Express پایه برای توسعه 03:11
-
اولین برنامه React شما 05:46
-
اوه، چه اتفاقی افتاد؟ 07:25
-
JSX و Babel 17:41
-
()ReactDom.render و virtual DOM 05:38
-
کامپوننتها 08:11
-
Props 10:40
-
تمرین! - استفاده از کامپوننتها و Props 06:52
-
چندین کامپوننت در یک آرایه 06:10
-
کامپوننتها به عنوان کلاسها 09:29
-
تمرین! - کلاس، آرایه و کامپوننتها 13:20
-
شکستن کامپوننتها - بخش 1 08:05
-
شکستن کامپوننتها - بخش 2 12:07
-
مرور بخش 12:14
-
Vite - روش مدرن برای انجام React 15:34
-
Create React App - آسانتر کردن توسعه 03:35
-
state چیست؟ (بدون کدنویسی) 12:01
-
State در عمل 10:26
-
بایدها و نبایدهای State 07:29
-
رویدادها (Events) در React 11:00
-
رویدادهای موجود 01:38
-
تغییر state با یک رویداد 10:30
-
تمرین با state 02:21
-
تمرین با state - راهنما 09:31
-
State و props با هم 19:14
-
کامپوننتهای Stateless در برابر کامپوننتهای Stateful 08:27
-
مثال Stateless در برابر Stateful 04:36
-
مقدمه بخش 04:16
-
شروع کار با axios و HTTP 04:11
-
استفاده از Axios و یک api رایگان (openweathermap.org) 03:31
-
چرخه عمر کامپوننت 13:28
-
داکیومنتها (Docs) 04:37
-
چرخه عمر - ()componentDidMount 07:32
-
چرخه عمر - ()render 02:32
-
تمرین بیشتر با render ،state و http 07:53
-
افزودن یک input box 06:07
-
چرخه عمر - ()componentDidUpdate 12:58
-
تمرین - ریفکتور کردن ویجت آبوهوا 10:46
-
چرخه عمر - ()componentWillUnmount 05:37
-
برنامه برای چند ویدئو بعدی 01:13
-
مدیریت فرمها با State 12:32
-
دادهها به پایین جریان مییابند، پس state را به بالا پاس دهید! بخش 1 08:27
-
دادهها به پایین جریان مییابند، پس state را به بالا پاس دهید! بخش 2 15:26
-
استایلدهی کامپوننتها 06:28
-
دمو پروژه 02:23
-
راه اندازی ساختار اپلیکیشن ما 04:55
-
QuizBar و FontAwesome glyphicons 08:27
-
QuizType - یک کامپوننت داخل QuizBar 10:36
-
پاکسازی QuizBar 03:31
-
کامپوننت فلش کارت 09:40
-
گرفتن دادههای ما با Axios 09:54
-
افزودن یک spinner 04:25
-
افزودن منطق کامپوننت فلش کارت 07:32
-
انتقال State به بالا برای آخرین بار 08:23
-
مقدمهای بر React Router 06:10
-
Router ،Route و Link 10:49
-
NavLink و ساخت یک NavBar 10:08
-
Routes با Component در برابر Render 03:54
-
Routeهای تودرتو (Nested) 06:52
-
Router Component Props - شامل history، location و match 12:33
-
URLهای داینامیک و پارامترهای URL و مرور کوتاه 08:50
-
مینی پروژه - اپلیکیشن طرفدار فیلم 14:04
-
مینی پروژه - ادامه 08:33
-
مینی پروژه - پایان 07:44
-
Redux چیست؟ 08:40
-
Redux و React 12:03
-
Redux چگونه کار میکند؟ 08:10
-
سیمکشی Redux 15:43
-
اتصال (CONNECT) Redux و React 17:44
-
افزودن reducerهای بیشتر به store ما 08:43
-
افزودن یک action creator و action 13:29
-
افزودن dispatcher 18:47
-
افزودن گوشت و محصولات (مثال پروژه) 12:17
-
توقف: مرور 09:03
-
افزودن Router 07:23
-
بهرهبرداری کمی بیشتر از redux 09:09
-
بهرهبرداری کمی بیشتر از redux - یک action 08:39
-
مقدمه بخش 01:35
-
مرور سریع reducerها، actionها و action creatorها 09:24
-
امتحان axios/http بدون middleware (مرور کدبیس) 12:27
-
Redux-promise 05:24
-
Redux-thunk 13:27
-
مقدمه و دمو پروژه 03:33
-
تفکر درباره ساختار اپلیکیشن ما 07:11
-
Create React App و راه اندازی پوشه 02:41
-
Index.js و Redux 05:31
-
App.js و React Router 02:51
-
مروری بر api 05:16
-
کامپوننت NavBar 10:31
-
Home - SearchBox (بیشتر نشانهگذاری و css) 18:06
-
کامپوننتهای City ،Slider و Spinner 12:47
-
ساخت کامپوننت Spinner 03:46
-
افزودن شهرها به صفحه اصلی (با مقداری ریفکتور) 11:00
-
افزودن Slider و قرار دادن شهرها داخل آن 12:58
-
ریفکتور Home - بخش 1 06:56
-
ریفکتور Home - بخش 2 - ()Promise.all 07:06
-
ساخت فعالیتها (Activties) 08:23
-
پایان کامپوننت Activity 11:45
-
تمرین خانهها (Houses) 01:33
-
کامپوننت تک شهر (Single City) 12:09
-
کامپوننت تک شهر - بخش 2 11:00
-
کامپوننت تک شهر - بخش 3 07:15
-
ورود، ثبتنام و Modal 01:41
-
بازگشت REDUX!! ساخت Modal 17:35
-
Fill کردن محتوای Modal 09:35
-
احراز هویت (Auth) - مقدمه 02:01
-
HTTP چیست و چه ربطی به auth دارد؟ 08:30
-
یک پیام HTTP واقعی 05:17
-
مشکل HTTP و Auth 08:45
-
یک JWT چگونه کار میکند؟ 06:09
-
ریفکتور کامپوننت SignUp 13:31
-
ریفکتور کامپوننت Login 07:28
-
اندپوینتهای ورود و ثبتنام 02:54
-
دریافت JWT (JSON Web Token) ما 08:30
-
دادن بازخورد به کاربر 07:16
-
Auth و redux 10:20
-
بهروزرسانی کامپوننتها هنگام ثبتنام/ورود 07:47
-
خروج (Logout) 04:25
-
چالش ورود 04:17
-
Redux Persist (middleware) - جلوگیری از ریست شدن redux (و ورود)! 09:26
-
Redux Persist - بخش 2 07:36
-
اهداف باقیمانده پروژه 02:52
-
SingleCity، کامپوننت مکانهای (Venues) زیاد 12:46
-
نمایش رزرو یک اتاق 10:35
-
Momentjs و اعتبارسنجی تاریخهای رزرو 10:06
-
افزودن یک فایل Script خارجی به یک کامپوننت 13:08
-
رفع یک باگ آزاردهنده 00:42
-
یکپارچهسازی با Stripe 13:46
-
راه اندازی صفحه و کامپوننت موفقیت پرداخت 03:33
-
ساختار موفقیت پرداخت (markup) 04:40
-
دادههای موفقیت پرداخت 07:29
-
گزینههای پایانی موفقیت پرداخت 01:52
-
آمادهسازی صفحه حساب کاربری 04:32
-
مرور صفحه حساب کاربری 02:50
-
AccountSideBar و Routeهای صفحه 06:03
-
واکشی و مرتبسازی دادهها، و انتقال به Bookings 11:20
-
نشانهگذاری (Markup) رزرو 09:19
-
لغو یک رزرو 10:33
-
جعبه جستجو (Search Box) 07:56
-
صفحه جستجو 07:42
-
بیلد کردن اپلیکیشن ما (یا هر اپلیکیشن React) 05:41
-
مقدمه و npm run build 06:43
-
گشتی در پوشه build 03:28
-
بیلد کردن در دامین ریشه (root domain) 04:33
-
بارگذاری Production... به صورت محلی 03:36
-
ویژگی صفحه اصلی 10:11
-
React.lazy 09:03
-
React.Suspense 08:45
-
مقدمه بخش 01:49
-
مقدمهای بر hooks و آیا باید از آنها استفاده کنید؟ 11:39
-
استفاده از React برای توضیح OOP و برنامهنویسی تابعی - پسزمینه 12:35
-
نمودار پارادایم 04:47
-
پارادایم 1 - دستوری و رویهای 08:53
-
پارادایم 2 - دستوری و OOP 03:51
-
پارادایم 3 - رویهای و تابعی 16:26
-
پارادایم 4 - OOP و تابعی 07:20
-
بازگشت به Hooks 08:23
-
بازگشت ویجت آبوهوا! 13:41
-
useEffect 09:16
-
توضیح useEffect 08:32
-
داکیومنتها - componentWillUnmount و چندین useEffect 09:40
-
ریفکتور کردن یک کلاس - weatherAppHooks 04:20
-
کلون پروژه جدید 04:33
-
ریفکتور کامپوننت Search 07:04
-
قوانین Hooks 06:19
-
هوکهای سفارشی (Custom Hooks) 08:47
-
ساختار یک هوک سفارشی 10:38
-
Redux با Hooks 04:53
-
آماده شدن برای redux - ریفکتور Account 05:25
-
استفاده از redux با hooks - useSelector 07:04
-
استفاده از redux با hooks - useDispatch 02:20
-
useDispatch در عمل - Login 09:27
-
هوک useStore 01:38
-
همه 4 هوک! NavBar 06:47
-
context چیست؟ 04:59
-
ساخت یک context 09:53
-
Context Provider 09:11
-
Context Consumer 04:21
-
تغییر Context در پایین دست 05:07
-
مرور کوتاه بر اینکه Context چیست؟ 01:09
-
Context با کلاسها 06:18
-
شنیدهام جایگزین Redux میشود. آیا میشود؟ 03:21
-
مقدمه بخش 01:01
-
Let و Const 05:35
-
Template Literals 04:06
-
Object Literals 03:23
-
Destructuring و Spread 08:01
-
توابع Rocket 06:57
-
کلاسها - مرور constructor/prototype (روش اصلی) 04:57
-
کلاسها و زیرکلاسها - نسخه 2015 یک constructor 06:21
-
بازنویسی (Overriding) متدها در کلاسهای فرزند 03:55
-
چگونه از کلاسها در این دوره استفاده خواهیم کرد؟ 03:22
مشخصات آموزش
دوره React js. از ابتدا به همراه با Redux و React Router
- تاریخ به روز رسانی: 1404/10/04
- سطح دوره:مقدماتی
- تعداد درس:198
- مدت زمان :25:50:30
- حجم :15.53GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy