React Front To Back 2022

19:57:45 Inglés Premium 14/02/2024 150 videos

Descripción del curso

This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills. The first project (Feedback App) is structured in a way so I can explain the fundamentals such as components, hooks, props, state, etc in a way that beginners can understand. The second project (Github Finder) will show you how to work with 3rd party APIs and the third project (House Marketplace) is a larger app that uses Firebase 9 and includes authentication, Firestore queries, file storage and more.

Here are some of the things you will learn in this course:

React fundamentals including components, props, hooks, state, etc
React hooks such as useState, useEffect, useContext, useReducer, useRef, etc
Creating custom hooks
React Router v6 (latest version)
How to handle global state with context, reducers and hooks
Firebase 9 authentication, queries, storage
Deploying React apps to Vercel & Netlify
Basic Animation with Framer Motion
Implement Leaflet maps and Swiper sliders
Much More...

This course has been completely re-done with new projects and concepts from the old course. I have a few React courses and this is the one that I always suggest people start with before moving on to the MERN courses I am also working on a 4th project for the course, which will be a full-stack MERN ticketing system that uses Redux for state management.

Curriculum

Section 1: Module 1

02 - Welcome To The Course! 01:55
03 - What Is React? 08:32
04 - Environment Setup 05:51
05 - Code Repos 02:00
06 - Feedback Project Intro 02:50
07 - Create React App 07:02
08 - Initializing React 07:13
09 - Intro To JSX 07:06
10 - Dynamic Values & LIsts in JSX 05:24
11 - Conditionals in JSX 05:09
12 - Creating Your First Component & Props 08:01
13 - Adding Styles To A Component 05:35
14 - State & useState Hook 08:22
15 - Managing Global State 08:29
16 - Card Component & Conditional Styles 10:16
17 - Events & Prop Drilling 10:19
18 - FeedbackStats Component & Reactivity 07:32
19 - Form Input & State 06:03
20 - Custom Button Component 05:28
21 - Real-Time Validation 04:32
22 - Rating Select Component 07:08
23 - Add Feedback 07:21
24 - Fade Animation With Framer Motion 03:52
25 - Creating Routes (React Router 5) 08:22
26 - Upgrading To React Router 6 02:33
27 - Creating Links (v5 & v6) 05:13
28 - NavLink & useParams 06:40
29 - Navigate & Nested Routes 06:52
30 - Create a Context & Provider 06:35
31 - Get Global State With The useContext Hook 04:42
32 - Moving Functions To Context 07:25
33 - Edit Feedback Event 05:47
34 - Side Effects With useEffect 07:33
35 - Update Feedback Item 05:14
36 - Deploy To Netlify 05:23
37 - APIs & Requests Explained 06:26
38 - Setting Up JSON-Server Mock Backend 07:47
39 - Run Client & Server With Concurrently 02:37
40 - Fetch Data From JSON-Server Backend 04:56
41 - Spinner Component 05:34
42 - Add Feedback & Setting a Proxy 05:26
43 - Update & Delete From JSON-Server 04:17
44 - GitHub Finder Project Intro 02:35
45 - Setup Tailwind & Daisy UI 08:26
46 - Navbar Component 09:06
47 - Footer Component 03:33
48 - Pages & Routes 07:39
49 - Github API & Getting Token 07:07
50 - UserList Component 10:16
51 - Loading Spinner 03:08
52 - Display Users 06:49
53 - Setup Github Context 09:18
54 - Reducers & useReducer Hook 09:17
55 - Clean Up Fetch Users 03:43
56 - User Search Component 10:27
57 - Search Users 04:32
58 - Clear Users 03:27
59 - Alert Context & Reducer 08:09
60 - Alert Component 07:43
61 - Get Single User 09:39
62 - User Profile Top 11:32
63 - User Profile Stats 08:44
64 - Get User Repos 10:06
65 - Repo Items 08:25
66 - Move SearchUsers To Actions File 06:20
67 - Move getUser To Actions File 07:48
68 - Cleaning Up Our Actions & Axios 07:52
69 - Deploy To Vercel 02:30
70 - Section Intro 00:46
71 - useRef Example 1 - Create DOM Reference 08:20
72 - useRef Example 2 - Get Previous State 05:16
73 - useRef Example 3 - Memory Leak Error Fix 09:44
74 - useMemo Example 10:44
75 - useCallback Example 07:12
76 - Custom Hook 1 - useFetch 09:12
77 - Custom Hook 2 - useLocalStorage 15:10
78 - House Marketplace Project Intro 04:41
79 - App & FIrebase Setup 06:57
80 - Enable Authentication & Create Rules 07:55
81 - Dummy Data & Indexes 11:49
82 - Pages & Routes 06:48
83 - Navbar Component 10:03
84 - Sign In & Sign Up Forms 14:56
85 - Register User 05:29
86 - Save User To Firestore 04:52
87 - User Sign In 08:26
88 - Alerts With React Toastify 04:55
89 - User Logout 05:38
90 - Display & Update User Details 13:25
91 - PrivateRoute Component & useAuthStatus Hook 14:51
92 - Forgot Password Page 09:16
93 - Google OAuth 14:00
94 - Explore Page 05:00
95 - Fetch Listings From Firebase 15:07
96 - Listing Item Component 11:44
97 - Offers Page 03:30
98 - Start Create Listing Page 12:48
99 - Create Listing Form 17:38
100 - Get Coords With Geocoding API 16:34
101 - Uploading Images To FIrebase 11:52
102 - Save Listings To Firestore 08:03
103 - Quick Note & Change 02:06
104 - Fetch Single Listing 08:04
105 - Listing Details 10:57
106 - Contact Landlord Page 12:30
107 - Leaflet Map 07:30
108 - Listings Page Slider 07:02
109 - Explore Slider 13:29
110 - Profile Listings & Delete 12:43
111 - Load More Pagination 08:28
112 - Edit Listing Icon 05:21
113 - Edit Listing 12:42
114 - Clear Up Console Warnings 03:37
115 - Deploy To Vercel 03:18
116 - Project Intro 02:00
117 - What Is The MERN Stack? 04:30
118 - MongoDB Setup 05:08
119 - Server File Stucture 05:51
120 - Basic Express Server Setup 06:25
121 - Add Routes & Controller 05:58
122 - Error & Exception Handling 11:43
123 - Connect To The Database 06:01
124 - Register User 10:05
125 - Login & Create JWT 09:14
126 - Protect Routes & Authentication 13:24
127 - Frontend Folder Setup 09:02
128 - Header & Initial Pages 08:03
129 - Home, Login & Register UI 15:06
130 - Redux Setup & Auth Slice 08:42
131 - Hook Register Form To Redux 09:40
132 - Register User 21:01
133 - Logout User 08:13
134 - User Login 07:54
135 - Ticket Model & Routes 11:08
136 - Get & Create Tickets (Backend) 06:22
137 - Single Ticket, Update & Delete (Backend) 09:21
138 - Route Guard 10:00
139 - New Ticket Form 08:35
140 - Add Tickets To Redux 05:08
141 - Create Ticket Functionality 16:11
142 - Fetch Tickets From Backend 08:52
143 - Listing Tickets In UI 06:42
144 - Single Ticket Display 15:22
145 - Close Ticket Functionality 09:44
146 - Notes Backend 13:31
147 - Fetch Notes Through Redux 08:58
148 - Display Notes 07:54
149 - Note Form Modal 10:19
150 - Submit a Note 05:31
151 - Deploy To Heroku 12:06

About the Instructor

Brad Traversy

$0.00

$8.00

Que esta incluido?

Streaming Multiplataforma
Acceso de por vida
Soporte al cliente
Actualizaciones gratuitas