Section 1 : Course Introduction
|
Lecture 1 | Welcome To The Course | 00:03:10 Duration |
|
Lecture 2 | What Is React | 00:03:55 Duration |
|
Lecture 3 | Setting Up Our Environment | 00:06:07 Duration |
Section 2 : Project 1 Start [Github Finder] & React Setup
|
Lecture 1 | Project Introduction | 00:03:22 Duration |
|
Lecture 2 | Code & Resources | |
|
Lecture 3 | Create React App & File Structure | 00:10:32 Duration |
|
Lecture 4 | CRA Cleanup & Prepare | 00:06:37 Duration |
|
Lecture 5 | Intro To JSX & Fragments | |
|
Lecture 6 | Expressions & Conditionals In JSX | 00:05:56 Duration |
Section 3 : Components, State & Props
|
Lecture 1 | Components, Props & PropTypes | 00:10:48 Duration |
|
Lecture 2 | Getting Started With Component State | 00:09:08 Duration |
|
Lecture 3 | Lists & Passing State With Props | |
|
Lecture 4 | Stateless Functional Components | 00:07:18 Duration |
|
Lecture 5 | HTTP Requests & Updating State | 00:09:06 Duration |
|
Lecture 6 | Spinner Component & Refactoring | 00:07:20 Duration |
|
Lecture 7 | Environment Variables | 00:05:13 Duration |
Section 4 : Events, Passing Props, React Router & More
|
Lecture 1 | Events & Search Component | 00:07:59 Duration |
|
Lecture 2 | Passing Props Up & Search | 00:08:29 Duration |
|
Lecture 3 | Clear Users From State | 00:07:26 Duration |
|
Lecture 4 | Alert State & Component | 00:09:45 Duration |
|
Lecture 5 | React Router Setup | 00:08:44 Duration |
|
Lecture 6 | Single User Component & Data | 00:11:38 Duration |
|
Lecture 7 | User Component UI & Layout | 00:13:10 Duration |
|
Lecture 8 | Repos & RepoItem Component & Data | 00:10:53 Duration |
Section 5 : Refactoring To Hooks & Context
|
Lecture 1 | Overview of Hooks & Context | 00:07:08 Duration |
|
Lecture 2 | Search Class to Function With useState Hook | 00:07:28 Duration |
|
Lecture 3 | User Class to Function With useEffect Hook | 00:08:31 Duration |
|
Lecture 4 | App Class to Function Component | 00:08:16 Duration |
|
Lecture 5 | Implementing Context | 00:12:39 Duration |
|
Lecture 6 | Create Reducer & Actions | 00:12:28 Duration |
|
Lecture 7 | Moving User State To Context | 00:15:37 Duration |
|
Lecture 8 | Moving Repos State To Context | 00:04:25 Duration |
|
Lecture 9 | Alert Context Workflow | 00:12:56 Duration |
|
Lecture 10 | Home & NotFound Components | 00:04:41 Duration |
|
Lecture 11 | Prepare & Deploy To Netlify | 00:10:39 Duration |
Section 6 : Project 2 Start [Contact Keeper - MERN] & Express Server Setup
|
Lecture 1 | Project Introduction | 00:03:36 Duration |
|
Lecture 2 | Code & Resources | |
|
Lecture 3 | MongoDB Atlas Setup | 00:05:17 Duration |
|
Lecture 4 | Dependencies & Basic Express Server | 00:09:20 Duration |
|
Lecture 5 | Backend Routes | |
|
Lecture 6 | Connect MongoDB To Our App | 00:08:52 Duration |
Section 7 : Backend Users, Contacts & JWT Authentication
|
Lecture 1 | User Model & Validation | 00:11:31 Duration |
|
Lecture 2 | Hash Passwords & Register Route | 00:08:03 Duration |
|
Lecture 3 | Create & Respond With JSON Web Token | 00:06:35 Duration |
|
Lecture 4 | Authenticate Route | 00:09:01 Duration |
|
Lecture 5 | Auth Middleware & Protecting Routes | 00:10:26 Duration |
|
Lecture 6 | Contact Model & Get Contacts Route | 00:06:54 Duration |
|
Lecture 7 | Add Contact Route | 00:08:05 Duration |
|
Lecture 8 | Contact Update & Delete Routes | 00:12:05 Duration |
Section 8 : Client Side Setup & Contacts UI
|
Lecture 1 | Setup React & Concurrently | |
|
Lecture 2 | Cleanup, Navbar & Router Setup | 00:15:33 Duration |
|
Lecture 3 | Contacts Context & Global State | 00:09:54 Duration |
|
Lecture 4 | Contacts & ContactItem Components | 00:14:22 Duration |
|
Lecture 5 | ContactForm Component | 00:17:14 Duration |
|
Lecture 6 | Delete Contact From UI | 00:05:51 Duration |
|
Lecture 7 | Set & Clear Current Contact | 00:06:50 Duration |
|
Lecture 8 | Edit & Update Contact Action | 00:12:09 Duration |
|
Lecture 9 | Contact Filter Form & State | 00:16:24 Duration |
|
Lecture 10 | Basic Add & Delete Animation | 00:07:13 Duration |
Section 9 : ReactExpress Authentication
|
Lecture 1 | Auth Context & Initial State | 00:08:30 Duration |
|
Lecture 2 | Register & Login Forms | 00:10:42 Duration |
|
Lecture 3 | Alert Context, State & Component | 00:17:00 Duration |
|
Lecture 4 | User Registration | 00:17:21 Duration |
|
Lecture 5 | Load User & Set Token | 00:15:21 Duration |
|
Lecture 6 | User Login | 00:07:39 Duration |
|
Lecture 7 | Logout & Navbar | 00:08:11 Duration |
|
Lecture 8 | PrivateRoute Component | 00:05:57 Duration |
Section 10 : Contacts API Integration & Deploy
|
Lecture 1 | Add Contact | 00:10:45 Duration |
|
Lecture 2 | Get & Clear Contacts | 00:14:52 Duration |
|
Lecture 3 | Delete Contacts | 00:04:49 Duration |
|
Lecture 4 | Update Contacts | 00:03:16 Duration |
|
Lecture 5 | Prepare & Deploy To Heroku |
Section 11 : Project 3 Start [ITLogger - Redux] - Components & UI
|
Lecture 1 | Project Introduction | 00:05:31 Duration |
|
Lecture 2 | Code & Resources | |
|
Lecture 3 | React & JSON-Server Setup | 00:08:48 Duration |
|
Lecture 4 | Materialize Setup | 00:08:39 Duration |
|
Lecture 5 | SearchBar & Logs Component | 00:11:33 Duration |
|
Lecture 6 | LogItem & Preloader Components | 00:10:51 Duration |
|
Lecture 7 | AddBtn & AddLogModal Components | 00:20:35 Duration |
|
Lecture 8 | Edit & Tech Modal Components | 00:17:05 Duration |
Section 12 : Redux For State Management
|
Lecture 1 | Redux Store & Provider Setup | 00:11:33 Duration |
|
Lecture 2 | Logs Reducer, Actions & Types | 00:13:52 Duration |
|
Lecture 3 | Connecting Redux To a Component | 00:10:10 Duration |
|
Lecture 4 | Add Logs | 00:09:30 Duration |
|
Lecture 5 | Delete Logs | 00:07:49 Duration |
|
Lecture 6 | Update Logs | 00:14:41 Duration |
|
Lecture 7 | Search Logs | 00:07:47 Duration |
Section 13 : Technicians State & Components
|
Lecture 1 | Techs Reducer, Action & Component | 00:10:35 Duration |
|
Lecture 2 | Tech Options Select Component | 00:07:03 Duration |
|
Lecture 3 | Add Technicians | 00:07:12 Duration |
|
Lecture 4 | Delete Technicians | 00:08:12 Duration |