React - The Complete Guide

47h 42m 41s
English
Paid
May 18, 2023

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

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!

Who this course is for:
  • Students who want to learn how to build reactive and fast web apps
  • Anyone who's interested in learning an extremely popular technology used by leading tech companies like Netflix
  • Students who want to take their web development skills to the next level and learn a future-proof technology

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 

Watch Online React - The Complete Guide

Join premium to watch
Go to premium
# Title Duration
1 Welcome To The Course! 01:05
2 What is React.js? 04:38
3 Why React Instead Of "Just JavaScript"? 07:26
4 Building Single-Page Applications (SPAs) with React 01:34
5 Exploring React.js Alternatives (Angular / Vue) 03:34
6 About This Course & Course Outline 08:28
7 The Two Ways (Paths) Of Taking This Course 04:23
8 Getting The Most Out Of This Course 04:17
9 Setting Up The Course Dev Environment (Code Editor) 04:56
10 Module Introduction 01:36
11 Understanding "let" and "const" 03:06
12 Arrow Functions 05:28
13 Exports and Imports 04:44
14 Understanding Classes 04:38
15 Classes, Properties and Methods 03:04
16 The Spread & Rest Operator 06:31
17 Destructuring 03:14
18 Reference and Primitive Types Refresher 04:27
19 Refreshing Array Functions 02:46
20 Wrap Up 00:53
21 Module Introduction 03:45
22 What Are Components? And Why Is React All About Them? 07:11
23 React Code Is Written In A "Declarative Way"! 03:43
24 Creating a new React Project 12:24
25 Analyzing a Standard React Project 11:52
26 Introducing JSX 03:59
27 How React Works 04:23
28 Building a First Custom Component 09:01
29 Writing More Complex JSX Code 05:06
30 Adding Basic CSS Styling 04:48
31 Outputting Dynamic Data & Working with Expressions in JSX 08:21
32 Passing Data via "props" 12:39
33 Adding "normal" JavaScript Logic to Components 05:58
34 Splitting Components Into Multiple Components 10:47
35 Time to Practice: React & Component Basics - Problem 02:32
36 Time to Practice: React & Component Basics - Solution 07:26
37 The Concept of "Composition" ("children props") 13:08
38 A First Summary 04:07
39 A Closer Look At JSX 09:10
40 Organizing Component Files 03:06
41 An Alternative Function Syntax 02:40
42 Module Introduction 02:28
43 Listening to Events & Working with Event Handlers 09:40
44 How Component Functions Are Executed 05:45
45 Working with "State" 10:54
46 A Closer Look at the "useState" Hook 07:37
47 Adding Form Inputs 09:59
48 Listening to User Input 05:18
49 Working with Multiple States 06:45
50 Using One State Instead (And What's Better) 04:52
51 Updating State That Depends On The Previous State 04:38
52 Handling Form Submission 04:55
53 Adding Two-Way Binding 02:58
54 Child-to-Parent Component Communication (Bottom-up) 13:57
55 Lifting The State Up 07:01
56 Time to Practice: Working with Events & State - Problem 02:33
57 Time to Practice: Working with Events & State - Solution 08:43
58 Controlled vs Uncontrolled Components & Stateless vs Stateful Components 05:23
59 Module Introduction 00:46
60 Rendering Lists of Data 07:08
61 Using Stateful Lists 04:31
62 Understanding "Keys" 07:00
63 Time to Practice: Working with Lists - Problem 01:16
64 Time to Practice: Working with Lists - Solution 04:45
65 Outputting Conditional Content 06:48
66 Adding Conditional Return Statements 05:22
67 Time to Practice: Conditional Content - Problem 01:02
68 Time to Practice: Conditional Content - Solution 05:48
69 Demo App: Adding a Chart 07:26
70 Adding Dynamic Styles 07:29
71 Wrap Up & Next Steps 11:05
72 Module Introduction 03:44
73 Setting Dynamic Inline Styles 09:00
74 Setting CSS Classes Dynamically 05:01
75 Introducing Styled Components 09:47
76 Styled Components & Dynamic Props 08:32
77 Styled Components & Media Queries 02:28
78 Using CSS Modules 06:59
79 Dynamic Styles with CSS Modules 05:32
80 Module Introduction 01:35
81 Understanding React Error Messages 06:20
82 Analyzing Code Flow & Warnings 05:54
83 Working with Breakpoints 06:04
84 Using the React DevTools 06:00
85 Module Introduction 02:57
86 Adding a "User" Component 07:07
87 Adding a re-usable "Card" Component 08:38
88 Adding a re-usable "Button" Component 03:51
89 Managing the User Input State 04:58
90 Adding Validation & Resetting Logic 04:35
91 Adding a Users List Component 10:46
92 Managing a List Of Users via State 09:28
93 Adding The "ErrorModal" Component 08:05
94 Managing the Error State 08:58
95 Module Introduction 00:50
96 JSX Limitations & Workarounds 08:47
97 Creating a Wrapper Component 04:15
98 React Fragments 02:43
99 Introducing React Portals 04:21
100 Working with Portals 12:25
101 Working with "ref"s 11:48
102 Controlled vs Uncontrolled Components 03:05
103 Module Introduction 01:36
104 What are "Side Effects" & Introducing useEffect 06:53
105 Using the useEffect() Hook 10:59
106 useEffect & Dependencies 09:02
107 Using the useEffect Cleanup Function 08:56
108 useEffect Summary 03:39
109 Introducing useReducer & Reducers In General 09:18
110 Using the useReducer() Hook 14:13
111 useReducer & useEffect 09:53
112 useReducer vs useState for State Management 03:36
113 Introducing React Context (Context API) 07:23
114 Using the React Context API 10:45
115 Tapping Into Context with the useContext Hook 01:43
116 Making Context Dynamic 04:36
117 Building & Using a Custom Context Provider Component 09:08
118 React Context Limitations 02:46
119 Learning the "Rules of Hooks" 07:11
120 Refactoring an Input Component 06:07
121 Diving into "Forward Refs" 13:40
122 Module Introduction 02:50
123 Starting Setup 04:11
124 Adding a "Header" Component 09:08
125 Adding the "Cart" Button Component 05:27
126 Adding a "Meals" Component 09:09
127 Adding Individual Meal Items & Displaying Them 09:31
128 Adding a Form 10:10
129 Working on the "Shopping Cart" Component 05:11
130 Adding a Modal via a React Portal 07:43
131 Managing Cart & Modal State 10:49
132 Adding a Cart Context 07:44
133 Using the Context 04:53
134 Adding a Cart Reducer 10:46
135 Working with Refs & Forward Refs 10:50
136 Outputting Cart Items 07:24
137 Working on a More Complex Reducer Logic 05:30
138 Making Items Removable 08:19
139 Using the useEffect Hook 07:45
140 Module Introduction 02:17
141 How React Really Works 07:23
142 Component Updates In Action 06:52
143 A Closer Look At Child Component Re-Evaluation 10:42
144 Preventing Unnecessary Re-Evaluations with React.memo() 11:37
145 Preventing Function Re-Creation with useCallback() 04:14
146 useCallback() and its Dependencies 07:11
147 A First Summary 04:02
148 A Closer Look At State & Components 03:31
149 Understanding State Scheduling & Batching 09:06
150 Optimizing with useMemo() 09:02
151 Module Introduction 02:11
152 What & Why 04:54
153 Adding a First Class-based Component 06:55
154 Working with State & Events 11:39
155 The Component Lifecycle (Class-based Components Only!) 05:21
156 Lifecycle Methods In Action 11:47
157 Class-based Components & Context 04:54
158 Class-based vs Functional Components: A Summary 02:43
159 Introducing Error Boundaries 09:53
160 Module Introduction 01:47
161 How To (Not) Connect To A Database 03:33
162 Our Starting App & Backend 03:53
163 Sending a GET Request 10:36
164 Using async / await 02:02
165 Handling Loading & Data States 04:46
166 Handling Http Errors 11:14
167 Using useEffect() For Requests 06:28
168 Preparing The Project For The Next Steps 06:17
169 Sending a POST Request 09:17
170 Wrap Up 01:17
171 Module Introduction 01:26
172 What are "Custom Hooks"? 01:45
173 Creating a Custom React Hook Function 06:40
174 Using Custom Hooks 04:46
175 Configuring Custom Hooks 05:52
176 Onwards To A More Realistic Example 06:46
177 Building a Custom Http Hook 09:17
178 Using the Custom Http Hook 07:46
179 Adjusting the Custom Hook Logic 08:46
180 Using The Custom Hook In More Components 08:54
181 Module Introduction 01:37
182 Our Starting Setup 01:42
183 What's So Complex About Forms? 05:09
184 Dealing With Form Submission & Getting User Input Values 10:05
185 Adding Basic Validation 03:58
186 Providing Validation Feedback 03:55
187 Handling the "was touched" State 05:41
188 React To Lost Focus 04:16
189 Refactoring & Deriving States 09:08
190 Managing The Overall Form Validity 07:31
191 Time to Practice: Forms - Problem 01:23
192 Time to Practice: Forms - Solution 05:46
193 Adding A Custom Input Hook 12:45
194 Re-Using The Custom Hook 02:55
195 A Challenge For You! 01:42
196 Applying Our Hook & Knowledge To A New Form 11:06
197 Summary 03:18
198 Bonus: Using useReducer() 08:23
199 Module Introduction 03:22
200 Moving "Meals" Data To The Backend 04:06
201 Fetching Meals via Http 09:28
202 Handling the Loading State 04:01
203 Handling Errors 07:45
204 Adding A Checkout Form 10:48
205 Reading Form Values (4:51) 04:52
206 Adding Form Validation 12:05
207 Submitting & Sending Cart Data 06:49
208 Adding Better User Feedback 09:29
209 Summary 01:32
210 Module Introduction 01:06
211 Another Look At State In React Apps 05:15
212 Redux vs React Context 06:20
213 How Redux Works 05:49
214 Exploring The Core Redux Concepts 15:15
215 More Redux Basics 03:05
216 Preparing a new Project 02:00
217 Creating a Redux Store for React 04:55
218 Providing the Store 03:14
219 Using Redux Data in React Components 05:09
220 Dispatching Actions From Inside Components 03:34
221 Redux with Class-based Components 10:21
222 Attaching Payloads to Actions 04:16
223 Working with Multiple State Properties 06:20
224 How To Work With Redux State Correctly 05:08
225 Redux Challenges & Introducing Redux Toolkit 05:28
226 Adding State Slices 08:12
227 Connecting Redux Toolkit State 04:48
228 Migrating Everything To Redux Toolkit 06:20
229 Working with Multiple Slices 11:51
230 Reading & Dispatching From A New Slice 06:57
231 Splitting Our Code 05:04
232 Summary 03:54
233 Module Introduction 00:40
234 Redux & Side Effects (and Asynchronous Code) 03:28
235 Refresher / Practice: Part 1/2 20:13
236 Refresher / Practice: Part 2/2 18:01
237 Redux & Async Code 04:29
238 Frontend Code vs Backend Code 05:41
239 Where To Put Our Logic 09:00
240 Using useEffect with Redux 06:01
241 Handling Http States & Feedback with Redux 12:50
242 Using an Action Creator Thunk 12:08
243 Getting Started with Fetching Data 08:40
244 Finalizing the Fetching Logic 05:17
245 Exploring the Redux DevTools 05:38
246 Summary 01:54
247 Module Introduction 03:22
248 Routing: Multiple Pages in Single-Page Applications 03:16
249 Project Setup & Installing React Router 03:07
250 Defining Routes 07:43
251 Adding a Second Route 02:08
252 Exploring an Alternative Way of Defining Routes 03:02
253 Navigating between Pages with Links 04:37
254 Layouts & Nested Routes 08:25
255 Showing Error Pages with errorElement 03:59
256 Working with Navigation Links (NavLink) 06:38
257 Navigating Programmatically 02:42
258 Defining & Using Dynamic Routes 07:45
259 Adding Links for Dynamic Routes 03:23
260 Understanding Relative & Absolute Paths 10:39
261 Working with Index Routes 01:57
262 Onwards to a new Project Setup 03:17
263 Time to Practice: Problem 01:26
264 Time to Practice: Solution 23:17
265 Data Fetching with a loader() 07:36
266 Using Data From A Loader In The Route Component 02:52
267 More loader() Data Usage 03:18
268 Where Should loader() Code Be Stored? 02:19
269 When Are loader() Functions Executed? 02:49
270 Reflecting The Current Navigation State in the UI 02:54
271 Returning Responses in loader()s 04:02
272 Which Kind Of Code Goes Into loader()s? 01:15
273 Error Handling with Custom Errors 04:57
274 Extracting Error Data & Throwing Responses 06:25
275 The json() Utility Function 02:08
276 Dynamic Routes & loader()s 07:33
277 The useRouteLoaderData() Hook & Accessing Data From Other Routes 07:41
278 Planning Data Submission 02:23
279 Working with action() Functions 09:09
280 Submitting Data Programmatically 09:07
281 Updating the UI State Based on the Submission Status 04:03
282 Validating User Input & Outputting Validation Errors 06:58
283 Reusing Actions via Request Methods 07:56
284 Behind-the-Scenes Work with useFetcher() 09:12
285 Deferring Data Fetching with defer() 09:08
286 Controlling Which Data Should Be Deferred 07:23
287 Module Summary 02:58
288 Module Introduction 01:11
289 How Authentication Works 09:09
290 Project Setup & Route Setup 03:47
291 Working with Query Parameters 07:36
292 Implementing the Auth Action 11:41
293 Validating User Input & Outputting Validation Errors 04:19
294 Adding User Login 01:56
295 Attaching Auth Tokens to Outgoing Requests 06:33
296 Adding User Logout 04:22
297 Updating the UI Based on Auth Status 06:06
298 Adding Route Protection 02:47
299 Adding Automatic Logout 05:11
300 Managing the Token Expiratoin 07:29
301 Module Introduction 01:41
302 Deployment Steps 03:36
303 Understanding Lazy Loading 04:48
304 Adding Lazy Loading 09:12
305 Building the Code For Production 02:23
306 Deployment Example 06:45
307 Server-side Routing & Required Configuration 04:07
308 Module Introduction 02:09
309 What is NextJS? 04:46
310 Key Feature 1: Built-in Server-side Rendering (Improved SEO!) 06:38
311 Key Feature 2: Simplified Routing with File-based Routing 03:14
312 Key Feature 3: Build Fullstack Apps 01:51
313 Creating a New Next.js Project & App 05:40
314 Analyzing the Created Project 02:53
315 Adding First Pages 06:06
316 Adding Nested Paths & Pages (Nested Routes) 03:48
317 Creating Dynamic Pages (with Parameters) 03:37
318 Extracting Dynamic Parameter Values 04:08
319 Linking Between Pages 07:14
320 Onwards to a bigger Project! 03:33
321 Preparing the Project Pages 03:43
322 Outputting a List of Meetups 05:04
323 Adding the New Meetup Form 03:55
324 The "_app.js" File & Layout Wrapper 06:18
325 Using Programmatic (Imperative) Navigation 03:48
326 Adding Custom Components & CSS Modules 10:01
327 How Pre-rendering Works & Which Problem We Face 05:53
328 Data Fetching for Static Pages 08:57
329 More on Static Site Generation (SSG) 05:45
330 Exploring Server-side Rendering (SSR) with "getServerSideProps" 06:28
331 Working with Params for SSG Data Fetching 05:15
332 Preparing Paths with "getStaticPaths" & Working With Fallback Pages 07:17
333 Introducing API Routes 06:21
334 Working with MongoDB 09:33
335 Sending Http Requests To Our API Routes 06:50
336 Getting Data From The Database 07:10
337 Getting Meetup Details Data & Preparing Pages 09:42
338 Adding "head" Metadata 09:20
339 Deploying Next.js Projects 12:27
340 Using Fallback Pages & Re-deploying 04:14
341 Summary 02:16
342 Module Introduction 02:59
343 Preparing the Demo Project 04:57
344 Using CSS Transitions 04:35
345 Using CSS Animations 05:33
346 CSS Transition & Animations Limitations 04:05
347 Using ReactTransitionGroup 12:20
348 Using the Transition Component 03:25
349 Wrapping the Transition Component 03:17
350 Animation Timings 03:15
351 Transition Events 02:34
352 The CSSTransition Component 05:24
353 Customizing CSS Classnames 02:31
354 Animating Lists 06:54
355 Alternative Animation Packages 04:30
356 Wrap Up 01:58
357 Module Introduction 01:02
358 Starting Project & Why You Would Replace Redux 04:20
359 Alternative: Using the Context API 07:14
360 Toggling Favorites with the Context API 05:44
361 Context API Summary (and why NOT to use it instead of Redux) 02:31
362 Getting Started with a Custom Hook as a Store 08:12
363 Finishing the Store Hook 05:54
364 Creating a Concrete Store 04:12
365 Using the Custom Store 05:41
366 Custom Hook Store Summary 03:14
367 Optimizing the Custom Hook Store 04:05
368 Wrap Up 02:01
369 Module Introduction 01:24
370 What & Why? 03:24
371 Understanding Different Kinds Of Tests 04:05
372 What To Test & How To Test 01:30
373 Understanding the Technical Setup & Involved Tools 02:40
374 Running a First Test 07:17
375 Writing Our First Test 10:15
376 Grouping Tests Together With Test Suites 02:15
377 Testing User Interaction & State 14:01
378 Testing Connected Components 03:20
379 Testing Asynchronous Code 09:12
380 Working With Mocks 08:31
381 Summary & Further Resources 03:48
382 Module Introduction 01:27
383 What & Why? 06:35
384 Installing & Using TypeScript 06:39
385 Exploring the Base Types 03:56
386 Working with Array & Object Types 05:34
387 Understanding Type Inference 02:48
388 Using Union Types 02:49
389 Understanding Type Aliases 02:43
390 Functions & Function Types 05:20
391 Diving Into Generics 08:02
392 Creating a React + TypeScript Project 08:35
393 Working with Components & TypeScript 05:42
394 Working with Props & TypeScript 14:21
395 Adding a Data Model 09:10
396 Time to Practice: Exercise Time! 07:03
397 Form Submissions In TypeScript Projects 05:22
398 Working with refs & useRef 10:57
399 Working with "Function Props" 07:27
400 Managing State & TypeScript 05:14
401 Adding Styling 02:20
402 Time to Practice: Removing a Todo 09:28
403 The Context API & TypeScript 13:56
404 Summary 02:19
405 Bonus: Exploring tsconfig.json 05:47
406 Module Introduction 02:11
407 What Are React Hooks? 04:57
408 The Starting Project 04:52
409 Getting Started with useState() 09:21
410 More on useState() & State Updating 11:55
411 Array Destructuring 02:35
412 Multiple States 03:48
413 Rules of Hooks 02:21
414 Passing State Data Across Components 07:57
415 Time to Practice: Hooks Basics - Problem 01:04
416 Time to Practice: Hooks Basics - Solution 02:56
417 Sending Http Requests 07:17
418 useEffect() & Loading Data 08:07
419 Understanding useEffect() Dependencies 02:22
420 More on useEffect() 09:38
421 What's useCallback()? 05:29
422 Working with Refs & useRef() 05:22
423 Cleaning Up with useEffect() 03:22
424 Deleting Ingredients 02:29
425 Loading Errors & State Batching 08:49
426 Understanding useReducer() 09:44
427 Using useReducer() for the Http State 10:41
428 Working with useContext() 08:28
429 Performance Optimizations with useMemo() 10:31
430 Getting Started with Custom Hooks 13:46
431 Sharing Data Between Custom Hooks & Components 14:59
432 Using the Custom Hook 08:12
433 Wrap Up 03:06
434 Module Introduction 01:09
435 What Is React & Why Would You Use It? 05:38
436 React Projects - Requirements 02:10
437 Creating React Projects 03:28
438 Out Starting Project 03:29
439 Understanding How React Works 07:47
440 Building A First Custom Component 11:16
441 Outputting Dynamic Values 05:04
442 Reusing Components 06:01
443 Passing Data to Components with Props 06:16
444 CSS Styling & CSS Modules 10:08
445 Exercise & Another Component 06:32
446 Preparing the App For State Management 03:47
447 Adding Event Listeners 07:53
448 Working with State 10:01
449 Lifting State Up 09:09
450 The Special "children" Prop 07:22
451 State & Conditional Content 09:00
452 Adding a Shared Header & More State Management 07:52
453 Adding Form Buttons 03:35
454 Handling Form Submission 06:19
455 Updating State Based On Previous State 05:31
456 Outputting List Data 06:40
457 Adding a Backend to the React SPA 06:11
458 Sending a POST HTTP Request 04:13
459 Handling Side Effects with useEffect() 09:07
460 Handle Loading State 04:24
461 Understanding & Adding Routing 03:56
462 Adding Routes 05:37
463 Working with Layout Routes 04:09
464 Refactoring Route Components & More Nesting 05:36
465 Linking & Navigating 08:10
466 Data Fetching via loader()s 09:08
467 Submitting Data with action()s 11:09
468 Dynamic Routes 08:42
469 Module Summary 01:26
470 What Now? Next Steps You Could Take! 01:11
471 Explore The React Ecosystem! 03:20
472 Finishing Thoughts 04:28

Similar courses to React - The Complete Guide

Server side rendering with Next + React

Server side rendering with Next + Reactudemy

Duration 29 hours 43 minutes 19 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advancedudemy

Duration 8 hours 40 minutes 51 seconds
My first Remix app

My first Remix appBuild UI

Duration 5 hours 44 seconds
The Software Architect Mindset (COMPLETE)

The Software Architect Mindset (COMPLETE)ArjanCodes

Duration 12 hours 6 minutes 39 seconds
Full Stack Advanced React + GraphQL

Full Stack Advanced React + GraphQLwesbos

Duration 15 hours 43 minutes 10 seconds