React Tutorial and Projects Course

Introduction and Setup
1 What is React
2 Goals
3 Structure
4 Course Requirements
5 Dev Environment Setup
6 Text Editor Setup
7 Video Blur Fix
8 Course Review

Install create-react-app
9 Command Line Basics
10 NPM Basics
11 What is Create-react-app, Babel, Webpack
12 Install Create-react-app
13 Folder Structure
14 Remove Boilerplate
15 Update

React Basics Tutorial
16 First Component
17 Text Editor Setup
18 First Component in Detail
19 JSX Rules
20 Nested Components and Tools
21 Mini Book Project
22 CSS
23 JSX – CSS
24 JSX – Javascript
25 Props
26 Props – Destructuring
27 Props – Children
28 Simple List
29 Proper List
30 Key Prop and Spread Operator
31 Event Basics
32 Import and Export Statements
33 Free Hosting

React Hooks and Advanced Topics
34 Intro
35 Starter Project
36 Install Starter
37 Starter Overview
38 useState – Simple Use Case
39 useState – Basics
40 General Rules of Hooks
41 useState – Array Example
42 useState – Object Example
43 useState – Multiple State Values
44 Simple Counter
45 Functional Update Form
46 Matching Project
47 useEffect – Basics
48 useEffect – Conditional
49 useEffect – Dependency List
50 useEffect – Cleanup Function
51 useEffect – Fetch Data
52 Multiple Returns – Basics
53 Multiple Returns – Fetching Example
54 Short-Circuit Evaluation
55 Ternary Operator
56 Show Hide Component
57 Matching Projects
58 Form Basics
59 Controlled Inputs
60 Add Item to the List
61 Multiple Inputs
62 Matching Projects
63 useRef
64 Matching Project
65 useReducer – useState Setup
66 useReducer – Refactor
67 useReducer – Add Item
68 useReducer – Remove Item
69 Prop Drilling
70 Context API useContext
71 Matching Projects
72 Custom Hooks – useFetch
73 PropTypes – Setup
74 PropTypes – Images
75 PropTypes – Default Values
76 React Router Intro
77 React Router – Basic Setup
78 React Router – Error and Switch Component
79 React Router – Links
80 React Router – Url Params and Placeholder
81 React Optimization Warning
82 React.memo
83 useCallback
84 useMemo
85 useCallback – Fetch Example
86 Matching Project

Basic Projects
87 Intro
88 Starter Project – Install and Overview
89 Birthday Reminder – Intro
90 Birthday Reminder – Setup
91 Birthday Reminder – Complete
92 Tours – Intro
93 Tours – Fetch Data
94 Tours – Display Tours
95 Tours – Toggle Info
96 Tours – Remove Tour
97 Reviews – Intro
98 Reviews – Info and React-Icons
99 Reviews – Basic Setup
100 Reviews – Prev and Next
101 Reviews – Random
102 Accordion – Intro
103 Accordion – Complete
104 Menu – Intro
105 Menu – Display Items
106 Menu – Buttons (manual approach)
107 Menu – all Button
108 Menu – Categories Buttons (dynamic approach)
109 Tabs – Intro
110 Tabs – Fetch Jobs
111 Tabs – Display First Job
112 Tabs – Display Buttons
113 Slider – Intro
114 Slider – Setup
115 Slider – CSS Overview
116 Slider – Setup Classes
117 Slider – Prev and Next Buttons
118 Slider – Autoplay
119 Slider – Alternative
120 Lorem Ipsum – Intro
121 Lorem Ipsum – Structure
122 Lorem Ipsum – Complete
123 Color Generator – Intro
124 Color Generator – Structure
125 Color Generator – Color Values and Error
126 Color Generator – Single Color
127 Additional Info
128 Color Generator – Copy To Clipboard
129 Grocery Bud – Intro
130 Grocery Bud – Structure
131 Grocery Bud – Add Items
132 Grocery Bud – Alert
133 Grocery Bud – Clear Items
134 Grocery Bud – Remove Item
135 Grocery Bud – Edit Item
136 Grocery Bud – Local Storage
137 Navbar – Intro
138 Navbar – Basic Structure
139 Navbar – Data
140 Navbar – Simple Toggle
141 Navbar – Class Toggle
142 Additional Info
143 Navbar – useRef
144 Sidebar Modal – Intro
145 Sidebar Modal – Structure
146 Sidebar Modal – Context
147 Sidebar Modal – Complete
148 Stripe – Intro
149 Stripe – Context Boilerplate
150 Stripe – Navbar
151 Stripe – Hero
152 Stripe – Sidebar
153 Stripe – Submenu
154 Stripe – Location
155 Stripe – Links
156 Stripe – Hide Submenu
157 Cart – Intro
158 Cart – Setup Overview
159 Cart – useReducer Setup
160 Cart – Clear Cart
161 Cart – Remove Single Item
162 Cart – Increase
163 Cart – Decrease
164 Cart – Get Totals
165 Cart – Fetch Data
166 Cart – Toggle Amount
167 Cocktails – Intro
168 Cocktails – Additional Info
169 Cocktails – Setup Overview
170 Cocktails – React Router Setup
171 Cocktails – Navbar
172 Cocktails – About and Error
173 Cocktails – Context API Setup
174 Cocktails – API Overview
175 Cocktails – Fetch Drinks
176 Cocktails – Display List
177 Cocktails – Search Form
178 Cocktails – Single Cocktail Page
179 Hosting (Netlify) – Drag and Drop
180 Hosting (Netlify) – Continuous Deployment

Additional Projects (API and External Libraries)
181 Intro
182 Markdown – Intro
183 Markdown – Setup
184 Markdown – Complete
185 Random Person – Intro
186 Random User – Setup
187 Random User – Fetch User
188 Random User – Buttons
189 Pagination- Intro
190 Pagination – Setup
191 Pagination – Fetch Display List
192 Pagination – Paginate Logic
193 Pagination – Display Single Page
194 Pagination – Display Buttons
195 Pagination – Prev and Next Buttons
196 Stock Photos – Intro
197 Stock Photos – Setup
198 Stock Photos – Initial Fetch
199 Stock Photos – ENV VAR
200 Stock Photos – Display Photos
201 Stock Photos – Scroll Event
202 Stock Photos – Infinite Scroll
203 Stock Photos – Search Query
204 Stock Photos – Complete
205 Stock Photos – useEffect Warning Alternative
206 Stock Photos – Bug Fix 1
207 Stock Photos – Bug Fix 2
208 Dark Mode – Intro
209 Dark Mode – Setup
210 Dark Mode – moment.js
211 Dark Mode – Toggle Theme
212 Dark Mode – Local Storage
213 Movie DB – Intro
214 Movie DB – Setup
215 Movie DB – API KEY
216 Movie DB – React Router
217 Movie DB – Initial Fetch
218 Movie DB – Movies Component
219 Movie DB – Search Form
220 Movie DB – Single Movie
221 Movie DB – Refactor to useFetch
222 Hacker News – Intro
223 Hacker News – Setup
224 Hacker News – API Overview
225 Hacker News – Basic Structure
226 Hacker News – Fetch Stories
227 Hacker News – Display Stories
228 Hacker News – Remove Story
229 Hacker News – Search Form
230 Hacker News – Prev and Next Buttons
231 Quiz – Intro
232 Quiz – Setup
233 Quiz – API
234 Quiz – Context Setup
235 Quiz – Fetch Questions
236 Quiz – Display Question
237 Quiz – Next Question
238 Quiz – checkAnswer
239 Quiz – Show Modal
240 Quiz – Setup Form Structure
241 Quiz – HandleChange
242 Quiz – HandleSubmit
243 Quiz – Randomize Correct Answer

Search Github Users
244 Intro
245 Starter Project Link
246 Starter Project
247 Setup Info
248 React Router Setup
249 React Router Error
250 Error Page
251 Login Page
252 Context API
253 Mock Data
254 Info Component
255 Card Component
256 Followers Component
257 Repos Setup
258 Fusion Charts Info
259 First Chart
260 Fusion Charts API
261 Fusion Charts – Configuration Options
262 Fusion Charts – Pie Chart
263 Calculate Most Used Language
264 Fusion Charts – Responsive
265 Fusion Charts – Doughnut Chart
266 Calculate Most Popular Language
267 Fusion Charts – Column and Bar Charts
268 Stars and Forks – Functionality
269 Search Component
270 Requests
271 Error
272 Search User
273 Loading Spinner
274 Repos and Followers
275 Promise.allSettled()
276 Auth0 Info
277 Auth0 Setup
278 Login – Logout
279 Private Route
280 Wrapper
281 Local Storage
282 Deploy Gotchas
283 Deploy Project
284 Finished Project

E-Commerce Project
285 Intro
286 Info
287 Starter Install
288 Stater Overview
289 Styled Components – Basics
290 React Router – Setup
291 Navbar
292 Cart Buttons
293 Footer
294 Sidebar
295 Products Context Setup
296 Sidebar Toggle
297 Hot Reloading Fix
298 Error Page
299 About, Checkout Page
300 Home Page – Hero
301 Home Page – Services
302 Home Page – Contact
303 Formspree
304 API Info
305 Fetch Products Overview
306 Fetch Products Complete
307 Featured Products
308 Format Price
309 Fetch Single Product
310 Single Product – Loading, Error
311 Single Product – Base Return
312 Single Product – Product Images
313 Single Product – Stars (manual approach)
314 Single Product – Stars (array approach)
315 Single Product – Add To Cart – Colors
316 Single Product – Add To Cart – Amount Buttons
317 Filter Context Setup
318 Products Page – Grid View
319 Products Page – List View
320 Sort Component – Basic Setup
321 Sort Component – View Buttons
322 Sort Component – Controlled Input
323 Sort Functionality
324 Filters – Default Values
325 Filters – Text
326 Filters – Unique Values
327 Filters – Categories
328 Filters – Companies
329 Filters – Colors
330 Filters – Price
331 Filters – Shipping and Clear Filters
332 Filter Functionality – Setup and Text Input
333 Filter Functionality – Rest of the Filters
334 Cart Context Setup
335 AddToCart – Setup
336 AddToCart Reducer – New Item
337 AddToCart Reducer – Existing Item
338 Cart Page Setup
339 localStorage
340 Cart Content
341 Cart Columns
342 Cart Totals
343 Cart Item
344 Cart – Remove Item and Clear Cart
345 Cart – Toggle Amount
346 Cart – Calculate Totals
347 Switch React Version
348 Additional Auth0 Info
349 Auth0 – Setup
350 Auth0 – Provider
351 useContext Setup
352 Auth0 – Login Logout Buttons
353 Auth0 – Toggle Values
354 Auth0 – Hide Checkout
355 Auth0 – Private Route
356 Extra Content
357 Install Extra Packages
358 AuthWrapper
359 Fix Warnings
360 Stripe and Netlify Accounts
361 Additional NETLIFY-CLI Info
362 Install and Setup netlify-cli
363 First Netlify Function
364 Stripe Checkout – Setup
365 Stripe Checkout – Imports
366 Stripe Checkout – State Variables
367 Stripe Checkout – Basic Return
368 Netlify Function – create-payment-setup
369 Stripe Checkout – Get Client Secret
370 Stripe Checkout – Complete
371 Deploy To Netlify

Redux
372 Redux Intro
373 Starter Files
374 Setup Project
375 Quick Redux Info
376 Store
377 Reducer
378 getState
379 First Action
380 Return and Action Bugs
381 More Actions
382 More Complicated State
383 Actions as Variables
384 Separate Reducer
385 Refactor
386 Provider Setup
387 connect Navbar
388 connect CartContainer
389 dispatch – Clear Cart
390 Switch Statement Syntax
391 Reducer Setup
392 REMOVE action setup
393 REMOVE action complete
394 INCREASE and DECREASE action setup
395 INCREASE complete
396 DECREASE complete
397 GET TOTALS action
398 Refactor DECREASE
399 TOGGLE AMOUNT action
400 Reducer Default State
401 Action Creators
402 Redux Devtools

Old Content – Class Based Components
403 Import and Export (ES6 Modules)
404 Class Based Components in React
405 Functional VS Class Based Components
406 State
407 Alternative State Syntax
408 Book Mini Project
409 Events
410 this.setState
411 Passing Methods and Prop Drilling
412 Passing Methods to Children Components to Work with State
413 Conditionals in JSX

Bonus
414 Bonus