React – The Complete Guide (incl Hooks, React Router, Redux)

React – The Complete Guide (incl Hooks, React Router, Redux)
React – The Complete Guide (incl Hooks, React Router, Redux)
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 40.5 Hours | 9.69 GB

Dive in and learn React 16.8 from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

This course is fully up-to-date with the latest version of React and includes React Hooks! Of course it will be kept up-to-date in the future

What’s this course about?

Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout the course: The Burger Builder!

More details please!

JavaScript is the major driver of modern web applications since it’s the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You’ll be able to achieve mobile-app like user experiences in the web.

But using JavaScript can be challenging – it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only.

React to the rescue!

React is all about components – basically custom HTML elements – with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed.

Need to display a list of users in your app? It’s as simple as creating a “User” component and outputting it as often as needed.

This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we’ll go all the way from basic to advanced. We’ll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.

By the end of the course, you can build amazing React (single page) applications!

A detailed list with the course content can be found below.

Who’s teaching you in this course?

My name is Maximilian Schwarzmüller, I’m a freelance web developer and worked with React in many projects. I’m also a 5-star rated instructor here on Udemy. I cover React’s most popular alternatives – Vue and Angular – as well as many other topics. I know what I’m talking about and I know where the pain points can be found.

It’s my goal to get you started with React as quick as possible and ensure your success. But I don’t just focus on students getting started. I want everyone to benefit from my courses, that’s why we’ll dive deeply into React and why I made sure to also share knowledge that’s helpful to advanced React developers.

Is this course for you?

This course is for you if …

  • …you’re just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)
  • …you’re experienced with Angular or Vue but want to dive into React
  • …know the React basics but want to refresh them and/ or dive deeper
  • …already worked quite a bit with React but want to dive deeper and see it all come together in a bigger app

What should you bring to succeed in that course?

  • HTML + CSS + JavaScript knowledge is required. You don’t need to be an expert but the basics need to be set
  • NO advanced JavaScript knowledge is required, though you’ll be able to move even quicker through the course if you know next-gen JavaScript features like ES6 Arrow functions. A short refresher about the most important next-gen features is provided in the course though.

What’s inside the course?

  • The “What”, “Why” and “How”
  • React Basics (Base features, syntax and concepts)
  • Managing state with class-based components and React Hooks
  • How to output lists and conditional content
  • Styling of React components
  • A deep dive into the internals of React and advanced component features
  • How to access Http content from within React apps (AJAX)
  • Redux, Redux, Redux … from basics to advanced!
  • Forms and form validation in React apps
  • Authentication
  • An introduction to unit testing
  • An introduction to Next.js
  • React app deployment instructions
  • …and much more!

What you’ll learn

  • Build powerful, fast, user-friendly and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with ease
  • Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now
  • Learn React Hooks & Class-based Components
Table of Contents

Getting Started
1 Introduction
2 Useful Resources & Links
3 What is React
4 Real-World SPAs & React Web Apps
5 Writing our First React Code
6 Why Should we Choose React
7 React Alternatives
8 Understanding Single Page Applications and Multi Page Applications
9 Course Outline
10 How to get the Most out of This Course

Refreshing Next Generation JavaScript (Optional)
11 Module Introduction
12 Refreshing Array Functions
13 Wrap Up
14 Next-Gen JavaScript – Summary
15 JS Array Functions
16 Understanding let and const
17 Arrow Functions
18 Exports and Imports
19 Understanding Classes
20 Classes, Properties and Methods
21 The Spread & Rest Operator
22 Destructuring
23 Reference and Primitive Types Refresher

Understanding the Base Features & Syntax
24 Module Introduction3
25 Working with Components & Re-Using Them
26 Outputting Dynamic Content
27 Working with Props
28 Understanding the Children Property
29 Understanding & Using State
30 Props & State
31 Handling Events with Methods
32 To Which Events Can You Listen
33 Manipulating the State
34 Function Components Naming
35 The Build Workflow
36 Using the useState() Hook for State Manipulation
37 Stateless vs Stateful Components
38 Passing Method References Between Components
39 Adding Two Way Binding
40 Adding Styling with Stylesheets
41 Working with Inline Styles
42 [OPTIONAL] Assignment Solution
43 Useful Resources & Links
44 Using Create React App
45 Understanding the Folder Structure
46 Understanding Component Basics
47 Understanding JSX
48 JSX Restrictions
49 Creating a Functional Component
50 Components & JSX Cheat Sheet

Working with Lists and Conditionals
51 Module Introduction4
52 Wrap Up
53 [OPTIONAL] Assignment Solution
54 Useful Resources & Links
55 Rendering Content Conditionally
56 Handling Dynamic Content The JavaScript Way
57 Outputting Lists (Intro)
58 Outputting Lists
59 Lists & State
60 Updating State Immutably
61 Lists & Keys
62 Flexible Lists

Styling React Components & Elements
63 Module Introduction5
64 Adding Pseudo Selectors
65 Working with Media Queries
66 Useful Resources & Links
67 Outlining the Problem Set
68 Setting Styles Dynamically
69 Setting Class Names Dynamically
70 Adding and Using Radium
71 Using Radium for Media Queries
72 MUST READ Enabling CSS Modules
73 Enabling & Using CSS Modules
74 More on CSS Modules

Debugging React Apps
75 Module Introduction
76 Understanding Error Messages
77 Finding Logical Errors by using Dev Tools & Sourcemaps
78 Working with the React Developer Tools
79 Using Error Boundaries (React 16+)
80 Wrap Up
81 Useful Resources & Links

Diving Deeper into Components & React Internals
82 Module Introduction
83 Using useEffect() in Functional Components
84 Controlling the useEffect() Behavior
85 Cleaning up with Lifecycle Hooks & useEffect()
86 Cleanup Work with useEffect() – Ex
87 Using shouldComponentUpdate for Optimization
88 Optimizing Functional Components with React.memo()
89 When should you optimize
90 PureComponents instead of shouldComponentUpdate
91 How React Updates the DOM
92 Rendering Adjacent JSX Elements
93 A Better Project Structure
94 Windows Users Must Read
95 Using React.Fragment
96 Higher Order Components (HOC) – Introduction
97 Another Form of HOCs
98 Passing Unknown Props
99 Setting State Correctly
100 Using PropTypes
101 Using Refs
102 Refs with React Hooks
103 Understanding Prop Chain Problems
104 Splitting an App Into Components
105 Using the Context API
106 contextType & useContext()
107 Wrap Up
108 Useful Resources & Links
109 MUST READ Legacy Lectures
110 [LEGACY] Splitting an App Into Components
111 [LEGACY] Comparing Stateless and Stateful Components
112 [LEGACY] Understanding the Component Lifecycle
113 [LEGACY] Converting Stateless to Stateful Components
114 [LEGACY] Component Creation Lifecycle in Action
115 Comparing Stateless and Stateful Components
116 [LEGACY] componentWillUnmount()
117 [LEGACY] Component Updating Lifecycle Hooks
118 [LEGACY] Component Updating Lifecycle in Action
119 [LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)
120 [LEGACY] Performance Gains with PureComponents
121 [LEGACY] How React Updates the App & Component Tree
122 [LEGACY] Understanding React’s DOM Updating Strategy
123 [LEGACY] Windows Users Must Read – File Downloads
124 [LEGACY] Returning Adjacent Elements (React 16+)
125 [LEGACY] React 16.2 Feature Fragments
126 Class-based vs Functional Components
127 [LEGACY] Understanding Higher Order Components (HOCs)
128 [LEGACY] A Different Approach to HOCs
129 [LEGACY] Passing Unknown Props
130 [LEGACY] Using setState Correctly
131 [LEGACY] Validating Props
132 [LEGACY] Available PropTypes
133 [LEGACY] Using References (ref)
134 [LEGACY] More on the React ref API (16.3)
135 [LEGACY] The Context API (React 16.3)
136 [LEGACY] More on the Context API (16.6)
137 class Component Lifecycle Overview
138 [LEGACY] Updated Lifecycle Hooks (React 16.3)
139 [LEGACY] The memo Method (16.4)
140 [LEGACY] Wrap Up
141 [LEGACY] Useful Resources & Links
142 Component Creation Lifecycle in Action
143 Component Update Lifecycle (for props Changes)
144 Component Update Lifecycle (for state Changes)

A Real App The Burger Builder (Basic Version)
145 About React Hooks
146 Adding Prop Type Validation
147 Starting the Burger Component
148 Outputting Burger Ingredients Dynamically
149 Calculating the Ingredient Sum Dynamically
150 Adding the Build Control Component
151 Outputting Multiple Build Controls
152 Connecting State to Build Controls
153 Removing Ingredients Safely
154 Displaying and Updating the Burger Price
155 Adding the Order Button
156 Module Introduction
157 Creating the Order Summary Modal
158 Showing & Hiding the Modal (with Animation!)
159 Implementing the Backdrop Component
160 Adding a Custom Button Component
161 Implementing the Button Component
162 Adding the Price to the Order Summary
163 Adding a Toolbar
164 Using a Logo in our Application
165 Adding Reusable Navigation Items
166 Creating a Responsive Sidedrawer
167 Planning an App in React – Core Steps
168 Working on Responsive Adjustments
169 More about Responsive Adjustments
170 Reusing the Backdrop
171 Adding a Sidedrawer Toggle Button
172 Adding a Hamburger Icon
173 Improving the App – Introduction
174 Prop Type Validation
175 Improving Performance
176 Using Component Lifecycle Methods
177 Changing the Folder Structure
178 Planning our App – Layout and Component Tree
179 Wrap Up
180 Useful Resources & Links
181 Planning the State
182 Setting up the Project
183 Creating a Layout Component
184 Starting Implementation of The Burger Builder Container
185 Adding a Dynamic Ingredient Component

Reaching out to the Web (Http Ajax)
186 Module Introduction
187 Sending a DELETE Request
188 Fixing a Bug
189 Handling Errors Locally
190 Adding Interceptors to Execute Code Globally
191 Removing Interceptors
192 Setting a Default Global Configuration for Axios
193 Creating and Using Axios Instances
194 Wrap Up
195 Useful Resources & Links
196 Understanding Http Requests in React
197 Understanding our Project and Introducing Axios
198 Creating a Http Request to GET Data
199 Rendering Fetched Data to the Screen
200 Transforming Data
201 Making a Post Selectable
202 Fetching Data on Update (without Creating Infinite Loops)
203 POSTing Data to the Server

Burger Builder Project Accessing a Server
204 Module Introduction
205 Useful Resources & Links
206 Firebase & The Right Database
207 Creating the Firebase Project
208 Creating the Axios Instance
209 Sending a POST Request
210 Displaying a Spinner while Sending a Request
211 Handling Errors
212 Retrieving Data from the Backend
213 Removing Old Interceptors

Multi-Page-Feeling in a Single-Page-App Routing
214 Module Introduction
215 Using Links to Switch Pages
216 Using Routing-Related Props
217 The withRouter HOC & Route Props
218 Absolute vs Relative Paths
219 Absolute vs Relative Paths (Article)
220 Styling the Active Route
221 Passing Route Parameters
222 Extracting Route Parameters
223 Parsing Query Parameters & the Fragment
224 Using Switch to Load a Single Route
225 Routing and SPAs
226 Navigating Programmatically
227 Additional Information Regarding Active Links
228 Understanding Nested Routes
229 Creating Dynamic Nested Routes
230 Redirecting Requests
231 Conditional Redirects
232 Using the History Prop to Redirect (Replace)
233 Working with Guards
234 Handling the 404 Case (Unknown Routes)
235 Loading Routes Lazily
236 Setting Up Links
237 Lazy Loading with React Suspense (16.6)
238 Routing and Server Deployment
239 Wrap Up
240 Useful Resources & Links
241 Setting Up the Router Package
242 react-router vs react-router-dom
243 Preparing the Project For Routing
244 Setting Up and Rendering Routes
245 Rendering Components for Routes
246 Switching Between Pages

Adding Routing to our Burger Project
247 Module Introduction
248 Implementing Navigation Links
249 Fetching Orders
250 Outputting the Orders
251 Wrap Up
252 Useful Resources & Links
253 Building the Checkout Container
254 Setting Up Routing & Routes
255 Navigating to the Checkout Page
256 Navigating Back & To Next Page
257 Passing Ingredients via Query Params
258 Navigating to the Contact Data Component
259 Order Submission & Passing Data Between Pages
260 Adding an Orders Page

Forms and Form Validation
261 Module Introduction
262 Fixing a Common Validation Gotcha
263 Adding Validation Feedback
264 Improving Visual Feedback
265 Showing Error Messages
266 Handling Overall Form Validity
267 Working on an Error
268 Fixing a Bug
269 Useful Resources & Links
270 Analyzing the App
271 Creating a Custom Dynamic Input Component
272 Setting Up a JS Config for the Form
273 Dynamically Create Inputs based on JS Config
274 Adding a Dropdown Component
275 Handling User Input
276 Handling Form Submission
277 Adding Custom Form Validation

Redux
278 Module Introduction
279 Dispatching Actions from within the Component
280 Passing and Retrieving Data with Action
281 Switch-Case in the Reducer
282 Updating State Immutably
283 Updating Arrays Immutably
284 Immutable Update Patterns
285 Outsourcing Action Types
286 Combining Multiple Reducers
287 Understanding State Types
288 Understanding State
289 [OPTIONAL] Assignment Solution
290 Combining Local UI State and Redux
291 Wrap Up
292 Useful Resources & Links
293 The Complexity of Managing State
294 Understanding the Redux Flow
295 Setting Up Reducer and Store
296 Dispatching Actions
297 Adding Subscriptions
298 Connecting React to Redux
299 Connecting the Store to React

Adding Redux to our Project
300 Module Introduction
301 Useful Resources & Links
302 Installing Redux and React Redux
303 Basic Redux Setup
304 Finishing the Reducer for Ingredients
305 Connecting the Burger Builder Container to our Store
306 Working on the Total Price Calculation
307 Redux & UI State
308 Adjusting Checkout and Contact Data
309 Wrap Up

Redux Advanced
310 Module Introduction
311 Using Action Creators and Get State
312 Using Utility Functions
313 A Leaner Switch Case Statement
314 An Alternative Folder Structure
315 Diving Much Deeper
316 Wrap Up
317 Useful Resources & Links
318 Adding Middleware
319 Using the Redux Devtools
320 Executing Asynchronous Code – Introduction
321 Introducing Action Creators
322 Action Creators & Async Code
323 Handling Asynchronous Code
324 Restructuring Actions
325 Where to Put Data Transforming Logic

Redux Advanced Burger Project
326 Module Introduction
327 Connecting Contact Data Container & Actions
328 The Order Reducer
329 Working on Order Actions
330 Redirect to Improve UX
331 Combining Reducers
332 Handling Purchases & Updating the UI
333 Resetting the Price after Purchases
334 Fetching Orders (via Redux)
335 Checking our Implemented Functionalities
336 Refactoring Reducers
337 Installing the Redux Devtools
338 Refactoring Reducers Continued
339 Wrap Up
340 Useful Resources & Links
341 Preparing the Folder Structure
342 Creating Action Creators
343 Executing Asynchronous Code
344 Fetching Ingredients Asynchronously
345 Initializing Ingredients in the BurgerBuilder
346 Changing the Order of our Ingredients Manually
347 Adding Order Actions

Adding Authentication to our Burger Project
348 Module Introduction
349 Logging Users Out
350 Accessing Protected Resources
351 Updating the UI Depending on Auth State
352 Adding a Logout Link
353 Forwarding Unauthenticated Users
354 Redirecting the User to the Checkout Page
355 Persistent Auth State with localStorage
356 Fixing Connect + Routing Errors
357 Ensuring App Security
358 Guarding Routes
359 Understanding Authentication in Single Page Applications
360 Displaying User Specific Orders
361 Wrap Up
362 Useful Resources & Links
363 Required App Adjustments
364 Adding an Auth Form
365 Adding Actions
366 Getting a Token from the Backend
367 Adding Sign-In
368 Storing the Token
369 Adding a Spinner

Improving our Burger Project
370 Module Introduction
371 Fixing the Redirect to the Frontpage
372 Using updateObject in the Entire App
373 Sharing the Validation Method
374 Using Environment Variables
375 Removing console.log()s
376 Adding Lazy Loading
377 Wrap Up
378 Useful Resources & Links

Testing
379 Module Introduction
380 How to Test Redux
381 Wrap Up
382 Useful Resources & Links
383 What is Testing
384 Required Testing Tools
385 What To Test
386 Writing our First Test
387 Testing Components Continued
388 Jest and Enzyme Documentations
389 Testing Components Correctly
390 Testing Containers

Deploying the App to the Web
391 Module Introduction
392 Deployment Steps
393 Building the Project
394 Example Deploying on Firebase
395 Wrap Up
396 Useful Resources & Links

Bonus Working with Webpack
397 Module Introduction
398 Setting Up the Basic Webpack Config
399 Adding File Rules
400 Introducing Babel
401 Adding CSS File Support
402 Creating Rules for Images
403 Lazy Loading
404 Injecting the Script into the index.html File
405 Creating the Production Workflow
406 Wrap Up
407 Adding babel-polyfill
408 Important Use Webpack 3
409 Useful Resources & Links
410 Introducing Webpack
411 How Webpack works
412 Basic Workflow Requirements
413 Project & npm Setup
414 Creating a Basic Folder & File Structure
415 Creating the Basic React Application
416 Installing Production Dependencies

Bonus Next.js
417 Module Introduction
418 Useful Resources & Links
419 Understanding Server Side Rendering
420 Setting Up a Project
421 Understanding the Basics
422 Next.js & Components & Pages
423 Styling our App in Next.js
424 Handling (404) Errors
425 A Special Lifecycle Hook
426 Deploying our App

Bonus Animations in React Apps
427 Module Introduction
428 Transition Events
429 The CSSTransition Component
430 Customizing CSS Classnames
431 Animating Lists
432 Alternative Animation Packages
433 Wrap Up
434 Useful Resources & Links
435 Preparing the Demo Project
436 Using CSS Transitions
437 Using CSS Animations
438 CSS Transition & Animations Limitations
439 Using ReactTransitionGroup
440 Using the Transition Component
441 Wrapping the Transition Component
442 Animation Timings

Bonus A Brief Introduction to Redux Saga
443 Module Introduction
444 Moving the Orders Side Effects into Sagas
445 Why Sagas can be Helpful
446 Diving Deeper into Sagas
447 Useful Resources & Links
448 Installing Redux Saga
449 Creating our First Saga
450 Hooking the Saga Up (to the Store and Actions)
451 Moving Logic from the Action Creator to a Saga
452 Moving More Logic Into Sagas
453 Handling Authentication with a Saga
454 Handling Auto-Sign-In with a Saga
455 Moving the BurgerBuilder Side Effects into a Saga

React Hooks
456 Introduction
457 The useEffect() Hook
458 Controlling Effect Execution
459 Effect Cleanup
460 Converting the App Component
461 The useContext() Hook
462 State and Effects Gotchas
463 The useReducer() Hook
464 useReducer() vs useState()
465 Working with References and useRef()
466 Preparing & Optimizing
467 What are Hooks
468 Avoiding Unnecessary Re-Rendering
469 How to think about Functional Components with Hooks
470 Creating a Custom Hook
471 Wrap Up
472 Enabling Hooks
473 The useState() Hook
474 Adding Array Destructuring
475 Using Multiple State
476 Using One State Instead
477 The Rules of Hooks
478 Sending Data via Http

Using Hooks in the Burger Builder
479 Introduction
480 Using React.memo() & More!
481 Adding a Custom Error Handling Hook
482 Wrap Up
483 Useful Resources & Links
484 Converting App
485 Routing with React.lazy()
486 Converting the Layout Component
487 Converting withErrorHandler HOC
488 Adjusting the Order & Checkout Containers
489 Add Hooks to ContactData
490 Converting the BurgerBuilder Container
491 Adjusting Auth & Logout Components

Bonus Building the Burger CSS
492 Building the Burger CSS Code

Next Steps and Course Roundup
493 Module Introduction29
494 Bonus More Content!
495 React Rocks! Where to find more Examples
496 More Inspiration Real-World Projects Built with React
497 Static React Apps with Gatsby.js
498 Introducing React Native
499 Component Libraries (Example Material UI)
500 Smaller Apps with Preact
501 Comparing React with Preact
502 Congratulations