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

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

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'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!

Course content

Section 1Getting Started

Introduction
1:49
What is React?
2:55
Real-World SPAs & React Web Apps
1:44
Writing our First React Code
15:07
Join our Online Learning Community
1:00
Why Should we Choose React?
2:03
React Alternatives
1:11
Understanding Single Page Applications and Multi Page Applications
3:38
Course Outline
7:28
How to get the Most out of This Course
2:29
Useful Resources & Links
1:00

Section 2Refreshing Next Generation JavaScript (Optional)

Module IntroductionPremium
1:35
Understanding "let" and "const"Premium
3:05
Arrow FunctionsPremium
5:27
Exports and ImportsPremium
4:43
Understanding ClassesPremium
4:37
Classes, Properties and MethodsPremium
3:03
The Spread & Rest OperatorPremium
6:30
DestructuringPremium
3:13
Reference and Primitive Types RefresherPremium
4:26
Refreshing Array FunctionsPremium
2:45
Wrap UpPremium
0:52
Next-gen JavaScript SummaryPremium
1:00
JavaScript Array FunctionsPremium
1:00

Section 3Understanding the Base Features & Syntax

Module IntroductionPremium
0:38
The Build WorkflowPremium
8:00
Using Create React AppPremium
6:09
Understanding the Folder StructurePremium
8:11
Understanding Component BasicsPremium
5:32
Understanding JSXPremium
5:38
JSX RestrictionsPremium
3:09
Creating a Functional ComponentPremium
8:09
Working with Components & Re-Using ThemPremium
1:47
Outputting Dynamic ContentPremium
3:02
Working with PropsPremium
4:07
Understanding the "children" PropPremium
2:56
Understanding & Using StatePremium
7:17
Handling Events with MethodsPremium
3:45
Manipulating the StatePremium
5:03
Using the useState() Hook for State ManipulationPremium
13:51
Stateless vs Stateful ComponentsPremium
3:08
Passing Method References Between ComponentsPremium
7:05
Adding Two Way BindingPremium
6:51
Adding Styling with StylesheetsPremium
5:28
Working with Inline StylesPremium
4:15
Assignment: Basics (Problem)Premium
4:35
Assignment: Basics (Solution)Premium
22:28
Useful Resources & LinksPremium
1:00

Section 4Working with Lists and Conditionals

Module IntroductionPremium
1:03
Rendering Content ConditionallyPremium
10:09
Handling Dynamic Content "The JavaScript Way"Premium
4:49
Outputting Lists (Intro)Premium
1:31
Outputting ListsPremium
5:32
Lists & StatePremium
4:12
Updating State ImmutablyPremium
2:39
Lists & KeysPremium
4:14
Flexible ListsPremium
7:34
Wrap UpPremium
1:55
Assignment: Conditional Content & Lists (Problem)Premium
5:25
Assignment: Conditional Content & Lists (Solution)Premium
17:16
Useful Resources & LinksPremium
1:00

Section 5Styling React Components & Elements

Module IntroductionPremium
1:19
Outlining the Problem SetPremium
1:58
Setting Styles DynamicallyPremium
3:19
Setting Class Names DynamicallyPremium
7:09
Adding and Using RadiumPremium
7:00
Using Radium for Media QueriesPremium
5:02
Introducing Styled ComponentsPremium
8:16
More on Styled ComponentsPremium
5:51
Styled Components & Dynamic StylesPremium
5:27
Working with CSS ModulesPremium
15:21
CSS Modules & Media QueriesPremium
3:15
More on CSS ModulesPremium
1:00
Useful Resources & LinksPremium
1:00

Section 6Debugging React Apps

Module IntroductionPremium
0:55
Understanding Error MessagesPremium
2:37
Finding Logical Errors by using Dev Tools & SourcemapsPremium
4:17
Working with the React Developer ToolsPremium
3:06
Using Error Boundaries (React 16+)Premium
8:13
Wrap UpPremium
0:56
Useful Resources & LinksPremium
1:00

Section 7Diving Deeper into Components & React Internals

Module IntroductionPremium
0:42
A Better Project StructurePremium
7:24
Splitting an App Into ComponentsPremium
15:54
Comparing Stateless and Stateful ComponentsPremium
3:46
Class-based vs Functional ComponentsPremium
5:15
class Component Lifecycle OverviewPremium
5:04
Component Creation Lifecycle in ActionPremium
6:46
Component Update Lifecycle (for props Changes)Premium
15:34
Component Update Lifecycle (for state Changes)Premium
3:49
Using useEffect() in Functional ComponentsPremium
3:46
Controlling the useEffect() BehaviorPremium
3:40
Cleaning up with Lifecycle Hooks & useEffect()Premium
6:48
Cleanup Work with useEffect() - ExamplePremium
1:37
Using shouldComponentUpdate for OptimizationPremium
6:45
Optimizing Functional Components with React.memo()Premium
3:39
When should you optimize?Premium
2:18
PureComponents instead of shouldComponentUpdatePremium
3:35
How React Updates the DOMPremium
4:27
Rendering Adjacent JSX ElementsPremium
9:00
Must Read: Windows UsersPremium
1:00
Using React.FragmentPremium
1:29
Higher Order Components (HOC) - IntroductionPremium
4:20
Another Form of HOCsPremium
5:56
Passing Unknown PropsPremium
4:58
Setting State CorrectlyPremium
5:13
Using PropTypesPremium
6:53
Using RefsPremium
7:37
Refs with React HooksPremium
4:34
Understanding Prop Chain ProblemsPremium
4:56
Using the Context APIPremium
10:03
contextType & useContext()Premium
5:33
Wrap UpPremium
1:21
Useful Resources & LinksPremium
1:00

Section 8A Real App: The Burger Builder (Basic Version)

About React HooksPremium
1:00
Module IntroductionPremium
0:57
Planning an App in React - Core StepsPremium
2:32
Planning our App - Layout and Component TreePremium
10:57
Planning the StatePremium
4:13
Setting up the ProjectPremium
5:01
Creating a Layout ComponentPremium
10:01
Starting Implementation of The Burger Builder ContainerPremium
5:04
Adding a Dynamic Ingredient ComponentPremium
8:27
Adding Prop Type ValidationPremium
2:49
Starting the Burger ComponentPremium
6:49
Outputting Burger Ingredients DynamicallyPremium
9:44
Calculating the Ingredient Sum DynamicallyPremium
5:10
Adding the Build Control ComponentPremium
7:26
Outputting Multiple Build ControlsPremium
4:03
Connecting State to Build ControlsPremium
8:22
Removing Ingredients SafelyPremium
7:30
Displaying and Updating the Burger PricePremium
2:28
Adding the Order ButtonPremium
10:39
Creating the Order Summary ModalPremium
13:58
Showing & Hiding the Modal (with Animation!)Premium
6:59
Implementing the Backdrop ComponentPremium
8:22
Adding a Custom Button ComponentPremium
4:46
Implementing the Button ComponentPremium
4:54
Adding the Price to the Order SummaryPremium
2:05
Adding a ToolbarPremium
9:11
Using a Logo in our ApplicationPremium
6:39
Adding Reusable Navigation ItemsPremium
11:26
Creating a Responsive SidedrawerPremium
7:44
Working on Responsive AdjustmentsPremium
4:34
More about Responsive AdjustmentsPremium
7:18
Reusing the BackdropPremium
9:11
Adding a Sidedrawer Toggle ButtonPremium
6:27
Adding a Hamburger IconPremium
2:20
Improving the App - IntroductionPremium
1:11
Prop Type ValidationPremium
1:17
Improving PerformancePremium
8:48
Using Component Lifecycle MethodsPremium
2:00
Changing the Folder StructurePremium
4:57
Wrap UpPremium
1:49
Useful Resources & LinksPremium
1:00

Section 9Reaching out to the Web (Http / Ajax)

Module IntroductionPremium
1:03
Understanding Http Requests in ReactPremium
1:35
Understanding our Project and Introducing AxiosPremium
4:15
Creating a Http Request to GET DataPremium
5:29
Rendering Fetched Data to the ScreenPremium
3:46
Transforming DataPremium
2:40
Making a Post SelectablePremium
4:01
Fetching Data on Update (without Creating Infinite Loops)Premium
7:56
POSTing Data to the ServerPremium
3:52
Sending a DELETE RequestPremium
2:23
Fixing a BugPremium
0:33
Handling Errors LocallyPremium
3:23
Adding Interceptors to Execute Code GloballyPremium
6:18
Setting a Default Global Configuration for AxiosPremium
3:10
Creating and Using Axios InstancesPremium
5:03
Wrap UpPremium
0:47
Useful Resources & LinksPremium
1:00

Section 10Burger Builder Project: Accessing a Server

Module IntroductionPremium
1:52
Creating the Firebase ProjectPremium
3:26
Creating the Axios InstancePremium
2:42
Sending a POST RequestPremium
7:46
Displaying a Spinner while Sending a RequestPremium
9:20
Handling ErrorsPremium
12:04
Retrieving Data from the BackendPremium
11:22
Removing Old InterceptorsPremium
8:24
Useful Resources & LinksPremium
1:00

Section 11Multi-Page-Feeling in a Single-Page-App: Routing

Module IntroductionPremium
0:51
Routing and SPAsPremium
2:43
Setting Up LinksPremium
4:22
Setting Up the Router PackagePremium
4:46
Preparing the Project For RoutingPremium
5:13
Setting Up and Rendering RoutesPremium
5:18
Rendering Components for RoutesPremium
1:57
Switching Between PagesPremium
2:17
Using Links to Switch PagesPremium
4:03
Using Routing-Related PropsPremium
3:12
The "withRouter" HOC & Route PropsPremium
3:44
Absolute vs Relative PathsPremium
2:34
Styling the Active RoutePremium
5:55
Passing Route ParametersPremium
6:54
Extracting Route ParametersPremium
3:03
Parsing Query Parameters & the FragmentPremium
1:00
Using Switch to Load a Single RoutePremium
3:33
Navigating ProgrammaticallyPremium
3:25
Additional Information Regarding Active LinksPremium
2:22
Understanding Nested RoutesPremium
7:55
Creating Dynamic Nested RoutesPremium
4:38
Redirecting RequestsPremium
2:45
Conditional RedirectsPremium
2:47
Using the History Prop to Redirect (Replace)Premium
2:49
Working with GuardsPremium
3:46
Handling the 404 Case (Unknown Routes)Premium
3:02
Loading Routes LazilyPremium
11:49
Lazy Loading with React Suspense (16.6)Premium
9:47
Routing and Server DeploymentPremium
4:19
Assignment: Routing (Problem)Premium
4:53
Assignment: Routing (Solution)Premium
29:11
Wrap UpPremium
0:49
Useful Resources & LinksPremium
1:00

Section 12Adding Routing to our Burger Project

Module IntroductionPremium
1:35
Building the Checkout ContainerPremium
11:32
Setting Up Routing & RoutesvPremium
4:41
Navigating to the Checkout PagePremium
4:50
Navigating Back & To Next PagePremium
3:33
Passing Ingredients via Query ParamsPremium
5:27
Navigating to the Contact Data ComponentPremium
9:33
Order Submission & Passing Data Between PagesPremium
11:44
Adding an Orders PagePremium
5:34
Implementing Navigation LinksPremium
5:35
Fetching OrdersPremium
6:03
Outputting the OrdersPremium
7:34
Wrap UpPremium
1:07
Useful Resources & LinksPremium
1:00

Section 13Forms and Form Validation

Module IntroductionPremium
0:49
Analyzing the AppPremium
1:49
Creating a Custom Dynamic Input ComponentPremium
11:30
Setting Up a JS Config for the FormPremium
7:34
Dynamically Create Inputs based on JS ConfigPremium
5:23
Adding a Dropdown ComponentPremium
3:52
Handling User InputPremium
7:43
Handling Form SubmissionPremium
4:11
Adding Custom Form ValidationPremium
8:09
Fixing a Common Validation GotchaPremium
1:18
Adding Validation FeedbackPremium
5:12
Improving Visual FeedbackPremium
2:18
Handling Overall Form ValidityPremium
7:35
Working on an ErrorPremium
1:26
Fixing a BugPremium
2:09
Showing Error MessagesPremium
1:00
Useful Resources & LinksPremium
1:00

Section 14Redux

Module IntroductionPremium
1:00
Understanding StatePremium
1:50
The Complexity of Managing StatePremium
2:42
Understanding the Redux FlowPremium
5:17
Setting Up Reducer and StorePremium
7:09
Dispatching ActionsPremium
6:44
Adding SubscriptionsPremium
2:47
Connecting React to ReduxPremium
3:39
Connecting the Store to ReactPremium
8:19
Dispatching Actions from within the ComponentPremium
5:53
Assignment: Dispatching Actions (Problem)Premium
1:41
Assignment: Dispatching Actions (Solution)Premium
4:15
Passing and Retrieving Data with ActionPremium
4:06
Switch-Case in the ReducerPremium
3:00
Updating State ImmutablyPremium
13:20
Updating Arrays ImmutablyPremium
8:39
Immutable Update PatternsPremium
1:00
Outsourcing Action TypesPremium
5:19
Combining Multiple ReducersPremium
10:18
Understanding State TypesPremium
4:50
Assignment: Redux Basics (Problem)Premium
1:45
Assignment: Redux Basics (Solution)Premium
14:23
Combining Local UI State and ReduxPremium
7:39
Wrap UpPremium
1:42
Useful Resources & LinksPremium
1:00

Section 15Adding Redux to our Project

Module IntroductionPremium
5:26
Installing Redux and React ReduxPremium
4:08
Basic Redux SetupPremium
2:10
Finishing the Reducer for IngredientsPremium
6:35
Connecting the Burger Builder Container to our StorePremium
9:33
Working on the Total Price CalculationPremium
6:05
Redux & UI StatePremium
4:08
Adjusting Checkout and Contact DataPremium
9:10
Wrap UpPremium
2:38
Useful Resources & LinksPremium
1:00

Section 16Redux Advanced

Module IntroductionPremium
0:28
Adding MiddlewarePremium
7:47
Using the Redux DevtoolsPremium
7:32
Executing Asynchronous Code - IntroductionPremium
1:52
Introducing Action CreatorsPremium
4:11
Action Creators & Async CodePremium
6:20
Handling Asynchronous CodePremium
8:13
Restructuring ActionsPremium
6:55
Where to Put Data Transforming Logic?Premium
5:42
Using Action Creators and Get StatePremium
3:27
Using Utility FunctionsPremium
7:20
A Leaner Switch Case StatementPremium
3:14
An Alternative Folder StructurePremium
2:22
Diving Much DeeperPremium
2:07
Wrap UpPremium
1:00
Useful Resources & LinksPremium
1:00

Section 17Redux Advanced: Burger Project

Module IntroductionPremium
1:12
Installing the Redux DevtoolsPremium
2:56
Preparing the Folder StructurePremium
3:06
Creating Action CreatorsPremium
6:15
Executing Asynchronous CodePremium
4:05
Fetching Ingredients AsynchronouslyPremium
7:50
Initializing Ingredients in the BurgerBuilderPremium
5:18
Changing the Order of our Ingredients ManuallyPremium
2:12
Adding Order ActionsPremium
6:40
Connecting Contact Data Container & ActionsPremium
4:18
The Order ReducerPremium
5:30
Working on Order ActionsPremium
4:28
Redirect to Improve UXPremium
3:08
Combining ReducersPremium
4:53
Handling Purchases & Updating the UIPremium
8:34
Resetting the Price after PurchasesPremium
1:44
Fetching Orders (via Redux)Premium
13:45
Checking our Implemented FunctionalitiesPremium
1:23
Refactoring ReducersPremium
8:11
Refactoring Reducers ContinuedPremium
7:55
Wrap UpPremium
0:57
Useful Resources & LinksPremium
1:00

Section 18Adding Authentication to our Burger Project

Module IntroductionPremium
1:14
Understanding Authentication in Single Page ApplicationsPremium
3:01
Required App AdjustmentsPremium
0:53
Adding an Auth FormPremium
13:11
Adding ActionsPremium
6:28
Getting a Token from the BackendPremium
6:59
Adding Sign-InPremium
5:30
Storing the TokenPremium
9:00
Adding a SpinnerPremium
6:03
Logging Users OutPremium
6:50
Accessing Protected ResourcesPremium
11:17
Updating the UI Depending on Auth StatePremium
7:32
Adding a Logout LinkPremium
6:52
Forwarding Unauthenticated UsersPremium
8:18
Redirecting the User to the Checkout PagePremium
13:12
Persistent Auth State with localStoragePremium
14:36
Fixing Connect + Routing ErrorsPremium
6:58
Ensuring App SecurityPremium
2:50
Guarding RoutesPremium
5:34
Displaying User Specific OrdersPremium
8:16
Wrap UpPremium
0:43
Useful Resources & LinksPremium
1:00

Section 19Improving our Burger Project

Module IntroductionPremium
0:39
Fixing the Redirect to the FrontpagePremium
5:48
Using updateObject in the Entire AppPremium
6:45
Sharing the Validation MethodPremium
2:16
Using Environment VariablesPremium
2:35
Removing console.log()sPremium
3:47
Adding Lazy LoadingPremium
4:58
Wrap UpPremium
0:50
Useful Resources & LinksPremium
1:00

Section 20Testing

Module IntroductionPremium
1:12
What is Testing?Premium
3:08
Required Testing ToolsPremium
2:26
What To Test?Premium
2:50
Writing our First TestPremium
12:34
Testing Components ContinuedPremium
4:05
Jest and Enzyme DocumentationsPremium
6:28
Testing Components CorrectlyPremium
2:28
Testing ContainersPremium
6:50
How to Test ReduxPremium
5:09
Wrap UpPremium
1:27
Useful Resources & LinksPremium
1:00

Section 21Deploying the App to the Web

Module IntroductionPremium
0:33
Deployment StepsPremium
2:58
Building the ProjectPremium
2:20
Example: Deploying on FirebasePremium
4:06
Wrap UpPremium
0:42
Useful Resources & LinksPremium
1:00

Section 22Bonus: Working with Webpack

Module IntroductionPremium
1:24
Introducing WebpackPremium
1:14
How Webpack worksPremium
2:39
Basic Workflow RequirementsPremium
1:35
Project & npm SetupPremium
3:47
Creating a Basic Folder & File StructurePremium
3:12
Creating the Basic React ApplicationPremium
10:55
Installing Production DependenciesPremium
1:10
Setting Up the Basic Webpack ConfigPremium
6:41
Adding File Rules & BabelPremium
7:07
Loading CSS FilesPremium
5:01
Loading Images & Injecting into HTML PagePremium
5:36
Production Workflow & Wrap UpPremium
2:43
Adding babel-polyfillPremium
1:00
Useful Resources & LinksPremium
1:00

Section 23Bonus: A Brief Introduction to Redux Saga

Module IntroductionPremium
1:29
Installing Redux SagaPremium
2:40
Creating our First SagaPremium
6:06
Hooking the Saga Up (to the Store and Actions)Premium
4:42
Moving Logic from the Action Creator to a SagaPremium
5:57
Moving More Logic Into SagasPremium
10:02
Handling Authentication with a SagaPremium
11:07
Handling Auto-Sign-In with a SagaPremium
5:52
Moving the BurgerBuilder Side Effects into a SagaPremium
7:01
Moving the Orders Side Effects into SagasPremium
12:34
Why Sagas can be HelpfulPremium
1:17
Diving Deeper into SagasPremium
6:55
Useful Resources & LinksPremium
1:00

Section 24React Hooks

IntroductionPremium
0:40
What are "React Hooks"?Premium
7:08
The Starting ProjectPremium
4:57
Getting Started with useState()Premium
9:20
More on useState() & State UpdatingPremium
11:54
Array DestructuringPremium
2:34
Multiple StatesPremium
3:47
Rules of HooksPremium
2:20
Passing State Data Across ComponentsPremium
7:56
Assignment: Hooks Basics (Problem)Premium
1:03
Assignment: Hooks Basics (Solution)Premium
2:55
Sending Http RequestsPremium
7:16
useEffect() & Loading DataPremium
8:06
Understanding useEffect() DependenciesPremium
2:21
More on useEffect()Premium
9:37
What's useCallback()?Premium
5:28
Working with Refs & useRef()Premium
5:21
Cleaning Up with useEffect()Premium
3:20
Deleting IngredientsPremium
2:28
Loading Errors & State BatchingPremium
8:48
Understanding useReducer()Premium
9:43
Using useReducer() for the Http StatePremium
10:40
Working with useContext()Premium
8:27
Performance Optimizations with useMemo()Premium
10:30
Getting Started with Custom HooksPremium
13:45
Sharing Data Between Custom Hooks & ComponentsPremium
14:58
Using the Custom HookPremium
8:11
Wrap UpPremium
3:05
Useful Resources & LinksPremium
1:00

Section 25Using Hooks in the Burger Builder

IntroductionPremium
1:08
Converting the "App" ComponentPremium
3:28
Routing with React.lazy()Premium
3:35
Converting the Layout ComponentPremium
2:39
Converting withErrorHandler HOCPremium
5:26
Adjusting the Order & Checkout ContainersPremium
4:28
Add Hooks to ContactDataPremium
5:38
Converting the BurgerBuilder ContainerPremium
4:25
Adjusting Auth & Logout ComponentsPremium
6:01
Using React.memo() & More!Premium
4:30
Adding a Custom Error Handling HookPremium
5:40
Setting the right useEffect() DependenciesPremium
4:58
Working with useSelector() and useDispatch()Premium
11:33
Wrap UpPremium
1:03
Useful Resources & LinksPremium
1:00

Section 26Bonus: Replacing Redux with React Hooks

Module IntroductionPremium
0:48
Starting Project & Why You Would Replace ReduxPremium
4:19
Alternative: Using the Context APIPremium
7:13
Toggling Favorites with the Context APIPremium
5:43
Context API Summary (and why NOT to use it instead of Redux)Premium
2:30
Getting Started with a Custom Hook as a StorePremium
8:11
Finishing the Store HookPremium
5:53
Creating a Concrete StorePremium
4:11
Using the Custom StorePremium
5:40
Custom Hook Store SummaryPremium
3:13
Optimizing the Custom Hook StorePremium
4:04
Bonus: Managing Multiple State Slices with the Custom Store HookPremium
1:00
Wrap UpPremium
2:00
Useful Resources & LinksPremium
1:00

Section 27Bonus: Next.js

Module IntroductionPremium
1:12
Understanding Server Side RenderingPremium
3:18
Setting Up a ProjectPremium
6:02
Understanding the BasicsPremium
3:53
Next.js & Components & PagesPremium
2:48
Styling our App in Next.jsPremium
2:47
Handling (404) ErrorsPremium
2:01
A Special Lifecycle HookPremium
9:33
Deploying our AppPremium
2:59
Useful Resources & LinksPremium
1:00

Section 28Bonus: Animations in React Apps

Module IntroductionPremium
1:07
Preparing the Demo ProjectPremium
6:12
Using CSS TransitionsPremium
4:34
Using CSS AnimationsPremium
5:32
CSS Transition & Animations LimitationsPremium
4:04
Using ReactTransitionGroupPremium
12:19
Using the Transition ComponentPremium
3:24
Wrapping the Transition ComponentPremium
3:16
Animation TimingsPremium
3:14
Transition EventsPremium
2:33
The CSSTransition ComponentPremium
5:23
Customizing CSS ClassnamesPremium
2:30
Animating ListsPremium
6:53
Alternative Animation PackagesPremium
4:28
Wrap UpPremium
1:57
Useful Resources & LinksPremium
1:00

Section 29Bonus: Building the Burger CSS

Building the Burger CSS CodePremium
24:55

Section 30Next Steps and Course Roundup

Module IntroductionPremium
1:00
React Rocks! Where to find more ExamplesPremium
1:24
More Inspiration: Real-World Projects Built with ReactPremium
1:23
Static React Apps with Gatsby.jsPremium
2:31
Introducing React NativePremium
2:17
Component Libraries (Example: Material UI)Premium
2:36
Smaller Apps with PreactPremium
3:08
Comparing React with PreactPremium
5:50
CongratulationsPremium
1:16

Course instructor

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.