English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 14 Hours | 5.80 GB
Lean Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects
In this course you will learn to master React 16.8+ concepts including how to create a Flux pattern using the Context API with the useContext and useReducer hooks. We will also build a full stack MERN application with a custom Express backend API that uses JWT (JSON Web Token) for authentication. In addition, we will also create a project that uses Redux.
Here are some of the things you will learn in this course:
- React Fundamentals (Components, props, state, etc)
- React Hooks (useState, useEffect, useContext, useReducer, useRef) in real projects
- Context API & App Level State
- MERN – MongoDB, Express React, Node
- Build a Custom API With JWT Authentication
- Redux – Reducers, Actions, etc
- Basic Animation
- Much More…
What you’ll learn
- Learn Modern React 16.8 By Building 3 Projects
- Flux Pattern Using Context & useContext/useReducer Hooks
- Learn Redux From Scratch
- Full Stack Development with MERN (MongoDB, Express, React, Node)
- Suitable For Both Beginners & Intermediate React Developers
Course Introduction
1 Welcome To The Course
2 What Is React?
3 Setting Up Our Environment
Project 1 Start [Github Finder] & React Setup
4 Project Introduction
5 Code & Resources
6 Create React App & File Structure
7 CRA Cleanup & Prepare
8 Intro To JSX & Fragments
9 Expressions & Conditionals In JSX
Components, State & Props
10 Components, Props & PropTypes
11 Getting Started With Component State
12 Lists & Passing State With Props
13 Stateless Functional Components
14 HTTP Requests & Updating State
15 Spinner Component & Refactoring
16 Environment Variables
Events, Passing Props, React Router & More
17 Events & Search Component
18 Passing Props Up & Search
19 Clear Users From State
20 Alert State & Component
21 React Router Setup
22 Single User Component & Data
23 User Component UI & Layout
24 Repos & RepoItem Component & Data
Refactoring To Hooks & Context
25 Overview of Hooks & Context
26 Search Class to Function With useState Hook
27 User Class to Function With useEffect Hook
28 App Class to Function Component
29 Implementing Context
30 Create Reducer & Actions
31 Moving User State To Context
32 Moving Repos State To Context
33 Alert Context Workflow
34 Home & NotFound Components
35 Prepare & Deploy To Netlify
Project 2 Start [Contact Keeper – MERN] & Express Server Setup
36 Project Introduction
37 Code & Resources
38 MongoDB Atlas Setup
39 Dependencies & Basic Express Server
40 Backend Routes
41 Connect MongoDB To Our App
Backend Users, Contacts & JWT Authentication
42 User Model & Validation
43 Hash Passwords & Register Route
44 Create & Respond With JSON Web Token
45 Authenticate Route
46 Auth Middleware & Protecting Routes
47 Contact Model & Get Contacts Route
48 Add Contact Route
49 Contact Update & Delete Routes
Client Side Setup & Contacts UI
50 Setup React & Concurrently
51 Cleanup, Navbar & Router Setup
52 Contacts Context & Global State
53 Contacts & ContactItem Components
54 ContactForm Component
55 Delete Contact From UI
56 Set & Clear Current Contact
57 Edit & Update Contact Action
58 Contact Filter Form & State
59 Basic Add & Delete Animation
React/Express Authentication
60 Auth Context & Initial State
61 Register & Login Forms
62 Alert Context, State & Component
63 User Registration
64 Load User & Set Token
65 User Login
66 Logout & Navbar
67 PrivateRoute Component
Contacts API Integration & Deploy
68 Add Contact
69 Get & Clear Contacts
70 Delete Contacts
71 Update Contacts
72 Prepare & Deploy To Heroku
Project 3 Start [ITLogger – Redux] – Components & UI
73 Project Introduction
74 Code & Resources
75 React & JSON-Server Setup
76 Materialize Setup
77 SearchBar & Logs Component
78 LogItem & Preloader Components
79 AddBtn & AddLogModal Components
80 Edit & Tech Modal Components
Redux For State Management
81 Redux Store & Provider Setup
82 Logs Reducer, Actions & Types
83 Connecting Redux To a Component
84 Add Logs
85 Delete Logs
86 Update Logs
87 Search Logs
Technicians State & Components
88 Techs Reducer, Action & Component
89 Tech Options Select Component
90 Add Technicians
91 Delete Technicians
Resolve the captcha to access the links!