React - The Complete Guide (incl Hooks, React Router, Redux)
4.7 (35,919 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
116,527 students enrolled

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

Dive in and learn React 16.8 from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!
Bestseller
4.7 (35,919 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
116,527 students enrolled
Last updated 4/2019
English
English
Current price: $14.00 Original price: $189.99 Discount: 93% off
30-Day Money-Back Guarantee
This course includes
  • 40 hours on-demand video
  • 50 articles
  • 226 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 499 lectures 40:14:36
+ Getting Started
10 lectures 39:17

Let's dive into the most important question first: What is React? In this lecture, we'll take a closer look.

Preview 02:56

We learned what React is but it's always more useful to see real-world examples. So let's dive into some web pages that use React or a similar framework/ approach in this lecture.

Preview 02:28

Why React? Why not vanilla JavaScript? What's the advantage of picking a library like React? These answers will get answered in this lecture.

Preview 02:03

React's not the only library you can dive into. Let's take a closer look at some alternatives you have.

Preview 01:11

With React, you frequently create Single Page Applications. Now what does that mean? What is a Single Page Application? This lecture will answer these questions.

Preview 03:38

You now know what React is but what does the course actually offer you? This lecture will answer that question.

Preview 07:28

There's more than one way of taking a course. Let's find out how you can get the most out of this course in this lecture.

Preview 02:29

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Preview 00:08
+ Refreshing Next Generation JavaScript (Optional)
13 lectures 45:16

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
01:35

One important next-gen feature you're going to see a lot is the usage of "const" and "let" instead of "var". What's up with these keywords? This lecture answers the question.

Understanding "let" and "const"
03:05

Arrow functions are another key next-gen feature we'll heavily use in this course. Let's dive into how to write them and how to use them in this lecture.

Arrow Functions
05:27

We'll write modular code in this course. That means, that the code will be split up across multiple files. In order to connect these files correctly, we'll need imports and exports. So let's dive into that feature in this lecture.

Exports and Imports
04:43

The "class" keyword is another new feature you'll see quite a bit in this course. Learn what it's about in this lecture.

Understanding Classes
04:37

Classes may have properties and methods. There actually are different ways of defining these. Let's dive into the details in this lecture.

Classes, Properties and Methods
03:03

React also makes heavy usage of the "Spread" operator. Or React projects do, to be precise. Learn more about that new operator in this lecture.

The Spread & Rest Operator
06:30

Time to destructure! It's a new JavaScript feature and it allows you to ... do what? Let's explore the feature in this lecture.

Destructuring
03:13

Not next-gen but super important: Knowing the difference between reference and primitive types. This lecture will explore both.

Reference and Primitive Types Refresher
04:26

We'll use a lot of array functions in this course. They're not next-gen but you need to feel confident working with them. So let's explore them in this lecture.

Refreshing Array Functions
02:45

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
00:52

Have a look at this lecture to get a good overview over the various next-gen JS features you'll encounter in this course.

Next-Gen JavaScript - Summary
04:37

Here's something we'll also use quite a bit in this course: Some JavaScript array functions.

JS Array Functions
00:23
+ Understanding the Base Features & Syntax
26 lectures 02:22:40

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:38

When creating React apps, we typically use a lot of modern development features. To use all these features, a modern build workflow is needed, too. Learn more about that in this module.

The Build Workflow
08:00

Fortunately, we don't have to set up a build workflow manually - there's a tool for that! Let me introduce you to create-react-app.

Using create-react-app
07:34

create-react-app allows us to easily create React projects. Let me now walk you through the structure of such a project.

Understanding the Folder Structure
08:11

Components are THE core building block of React apps. Time to dive into them and learn more about them.

Understanding Component Basics
05:32

JSX is the meat of a component - every component needs to return some JSX (or the alternative shown in this lecture). Let's explore it!

Understanding JSX
05:38

When using JSX, we face some restrictions. Let's find out which these are.

JSX Restrictions
03:09

We had a look at components already but now it's time to also create our own component. And for that, we'll use a different way of creating it. Learn more about it (and the WHY) in this lecture.

Creating a Functional Component
08:09

Time to quickly summarize what components and JSX are about.

Components & JSX Cheat Sheet
00:52

Since we compose our app from components, it's of course also crucial to understand how we work with them and how we make sure that they are re-usable.

Working with Components & Re-Using Them
01:47

Rarely, you only want to output static content. Learn how to easily output dynamic content in this lecture.

Outputting Dynamic Content
03:02

When working with components, you typically also need to pass data around. Props are used for that - learn more about this core concept in this lecture.

Working with Props
04:07

There's a special property we can access on our props - the children property. Learn what's up with it in this lecture.

Understanding the Children Property
02:56
Understanding & Using State
07:17

Props and state are crucial elements of React - time for a quick comparison and summary.

Props & State
01:41

Obviously, your app is probably also going to involve the user. Handling events is therefore crucial. Learn how to handle events the React way, in this lecture.

Handling Events with Methods
03:45

We saw onClick in the last lecture - but to which other events can you actually listen in React apps?

To Which Events Can You Listen?
02:09
Manipulating the State
05:03
Using the useState() Hook for State Manipulation
13:51
Stateless vs Stateful Components
03:08

What if you want to listen to an event in a child component? Can you still trigger a method in the parent component? Yes, you can - learn more about it in this lecture.

Passing Method References Between Components
07:05

When handling user input, two-way-binding is very useful and actually required to both listen to the user input and also reflect the latest state. Learn how to implement it in this lecture.

Adding Two Way Binding
06:51

Unstyled components don't look that exciting. Time to learn how to add styling!

Adding Styling with Stylesheets
05:28

Using CSS stylesheets is one way of adding styling - a static one though. Learn about a different, more flexible way in this lecture.

Working with Inline Styles
04:15
You learned a lot about the base syntax and features of React, now it's time to practice all the things you learned!
Time to Practice - The Base Syntax
1 question
[OPTIONAL] Assignment Solution
22:28

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:03
+ Working with Lists and Conditionals
11 lectures 43:39

Let me introduce you to this module and outline what we're going to cover.

Module Introduction
01:03

Not all content should be visible all the time - let me introduce you to conditional rendering in React apps in this lecture.

Rendering Content Conditionally
10:09

In React, everything is JavaScript, that's extremely important to understand. Let's now dive into how that helps you when handling dynamic content.

Handling Dynamic Content "The JavaScript Way"
04:49

Outputting lists (arrays) is a core task you'll probably face in any web app you build. Let's have a look at how React supports you in this lecture.

Outputting Lists (Intro)
01:31

Time to get our hands dirty and actually output a list in React.

Outputting Lists
05:32

Often, you want to connect lists to your app state and also be able to react to events. Learn more about these things in this lecture.

Lists & State
04:12

When updating state, you should make sure to not overwrite the original state. Learn more about that in this lecture.

Updating State Immutably
02:39

React updates the UI for you and it does so very efficiently. To be able to do that, you need to support it when working with arrays of JSX (=> Lists). Learn how to do that in this lecture.

Lists & Keys
04:14

Let's dive deeper into lists and see how we can really create flexible lists in this lecture.

Flexible Lists
07:34

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
01:55
Lists and conditional content are key features of any web app and it's therefore crucial that you understand how to work with both concepts. Time to practice it!
Time to Practice - Lists & Conditionals
1 question

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:01
+ Styling React Components & Elements
12 lectures 48:55

Let me introduce you to this module and explain what you're going to learn.

Module Introduction
01:19

What's so interesting about styling? Let me outline some potential pain points and where we'd like some help from React

Outlining the Problem Set
01:58

Since everything's JavaScript, it would of course be nice to also get some dynamic styling. Let's explore some options in this lecture.

Setting Styles Dynamically
03:19

Not only the styles themselves can be dynamic - the classes we assign could also be. Let's dive into that in this lecture.

Setting Class Names Dynamically
07:09

We saw that inline styles have some limitations. Let's find out how we can work around them.

Adding and Using Radium
07:00

Radium is an interesting package as we saw. Let's explore how we use it together with Media Queries.

Using Radium for Media Queries
05:02
MUST READ: Enabling CSS Modules
01:02

Radium is a nice package for enabling standard CSS features. But why not use standard CSS and scope it to components? Learn more about that in this lecture.

Enabling & Using CSS Modules
13:50

Want to dive deeper into CSS Modules? This lecture should be very helpful and provide additional insights into that technique.

More on CSS Modules
01:07

CSS modules were added, time to use them for pseudo selectors and media queries! Let's start with the pseudo selectors here.

Adding Pseudo Selectors
05:08

After adding pseudo selectors, let's next have a look at media queries.

Working with Media Queries
01:58

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:03
+ Debugging React Apps
7 lectures 19:19

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:55

Errors can be frustrating but React actually provides some useful error messages. Let's learn how to interpret them.

Understanding Error Messages
02:37

Error messages can be annoying but logical errors are way worse. Learn how to use useful browser tools to find such logical errors.

Finding Logical Errors by using Dev Tools & Sourcemaps
04:17

React also has its own dev tools which you may use. Learn how to use them in this lecture.

Working with the React Developer Tools
02:18

With React 16, a new feature was added: Error Boundaries. Learn more about it in this lecture.

Using Error Boundaries (React 16+)
08:13

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
00:57

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:02
+ Diving Deeper into Components & React Internals
63 lectures 05:30:36

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:43

Thus far, we haven't spent that much time on the project structure. Let's change that now and optimize it.

A Better Project Structure
07:24
Splitting an App Into Components
15:54
Comparing Stateless and Stateful Components
03:46
Class-based vs Functional Components
05:15
class Component Lifecycle Overview
05:04
Component Creation Lifecycle in Action
06:46
Component Update Lifecycle (for props Changes)
15:36
Component Update Lifecycle (for state Changes)
03:49
Using useEffect() in Functional Components
03:46
Controlling the useEffect() Behavior
03:40
Cleaning up with Lifecycle Hooks & useEffect()
06:48
Cleanup Work with useEffect() - Ex
01:37
Using shouldComponentUpdate for Optimization
06:45
Optimizing Functional Components with React.memo()
03:39
When should you optimize?
02:18
PureComponents instead of shouldComponentUpdate
03:35
How React Updates the DOM
04:27
Rendering Adjacent JSX Elements
09:00
Windows Users Must Read
00:46
Using React.Fragment
01:29
Higher Order Components (HOC) - Introduction
04:20
Another Form of HOCs
05:56
Passing Unknown Props
04:58
Setting State Correctly
05:13
Using PropTypes
06:53
Using Refs
07:37
Refs with React Hooks
04:34
Understanding Prop Chain Problems
04:56
Using the Context API
10:03
contextType & useContext()
05:33
Wrap Up
01:21
Useful Resources & Links
00:08
MUST READ: Legacy Lectures
00:21

Splitting an app into components is what React is all about. Learn how to split it up in this lecture.

[LEGACY] Splitting an App Into Components
15:33

As you learned, you have two different options for creating React components. Time for another closer look.

[LEGACY] Comparing Stateless and Stateful Components
07:20

React components follow a certain lifecycle - and you can hook into that lifecycle at clearly defined points. Let's explore our options and how that all works.

[LEGACY] Understanding the Component Lifecycle
07:00

Sometimes, you need to convert stateless components to stateful components. Learn how easy that is in this lecture.

[LEGACY] Converting Stateless to Stateful Components
02:54

Let's start with the Lifecycle that applies when a component is created and let's see all the hooks in action.

[LEGACY] Component Creation Lifecycle in Action
08:34

There's one more lifecycle method you should be aware of - we'll also use it later in our course project.

[LEGACY] componentWillUnmount()
00:37

We had a look at the lifecycle for component creation, let's now also explore the counterpart for component updates.

[LEGACY] Component Updating Lifecycle Hooks
03:54

Time to also see the component-updating lifecycle hooks in action.

[LEGACY] Component Updating Lifecycle in Action
08:06

Finally, we have two ways of updating components - the lifecycles also vary slightly. Time to find out what differs.

[LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)
03:04

shouldComponentUpdate is an important lifecycle method - we can have an easier time optimizing the component performance though. Let's explore the options.

[LEGACY] Performance Gains with PureComponents
10:23

We're already taking a closer look under the React hood. Let's continue this road and find out how it actually updates the component tree.

[LEGACY] How React Updates the App & Component Tree
02:27

React updates the component tree, we learned that. What does that mean for the real (browser) DOM though?

[LEGACY] Understanding React's DOM Updating Strategy
04:27

On Windows, the Aux.js filename isn't liked in ZIP archives, hence you should follow the steps outlined in this article.

[LEGACY] Windows Users Must Read - File Downloads
00:48

Until React 16, we couldn't really return adjacent elements in our components. It's still not entirely possible, but we can return arrays as this lecture shows.

[LEGACY] Returning Adjacent Elements (React 16+)
09:08

If you're using React 16.2, there's an alternative to using <Aux> :)

[LEGACY] React 16.2 Feature: Fragments
00:16

An important concept of modern React apps are "Higher Order Components". Learn more about them, in this lecture.

[LEGACY] Understanding Higher Order Components (HOCs)
04:16

We actually have two different ways of using (and creating) HOCs. Let's explore option two, in this lecture.

[LEGACY] A Different Approach to HOCs
05:41

Especially, but not limited to, when working with HOCs, we sometimes need to pass on props we don't know. Learn how that works, in this lecture.

[LEGACY] Passing Unknown Props
04:06

You already learned about setState. You can use it incorrectly though. Time to explore the correct usage in this lecture.

[LEGACY] Using setState Correctly
04:21

Especially when creating components that are used by other people, you probably want to ensure that your props are passed correctly. This lecture shows how you can ensure it.

[LEGACY] Validating Props
06:07

There are quite a few prop types you can use for validating props. A detailed list can be found in this article.

[LEGACY] Available PropTypes
02:07

Here's a concept you should rarely use - "refs". Learn more about it in this lecture.

[LEGACY] Using References ("ref")
04:57
[LEGACY] More on the React ref API (16.3)
13:59

React 16.3 added a new Context API. Let's take a closer look.

[LEGACY] The Context API (React 16.3)
08:17
[LEGACY] More on the Context API (16.6)
08:13

React 16.3 added new lifecycle hooks. Let's take a closer look.

[LEGACY] Updated Lifecycle Hooks (React 16.3)
05:12
[LEGACY] The "memo" Method (16.4)
03:12

Let me wrap this module up and summarize what we learned thus far.

[LEGACY] Wrap Up
01:32

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

[LEGACY] Useful Resources & Links
00:03
+ A Real App: The Burger Builder (Basic Version)
41 lectures 03:58:04
About React Hooks
00:14

Let me introduce you to this module and its content.

Module Introduction
00:57
Planning an App in React - Core Steps
02:32

Let's start with the layout and the component tree, a crucial part of a React app design process.

Planning our App - Layout and Component Tree
10:57

Knowing the required components, is an important first step. But of course, you need a bit more information before you start working on the app. Learn how to plan the app state in this lecture.

Planning the State
04:13

The app's planned, time to set the project up! Let's do that together, in this lecture.

Setting up the Project
04:50
Creating a Layout Component
10:01
Starting Implementation of The Burger Builder Container
05:04

A burger is of course all about ingredients, so let's make sure we have a fitting component which we can easily re-use.

Adding a Dynamic Ingredient Component
08:27
Adding Prop Type Validation
02:49

Having ingredients is nice, but of course not enough for a burger. Let's continue our work on the burger component itself therefore.

Starting the Burger Component
06:49

We got ingredients, we got a burger component - time to combine both!

Outputting Burger Ingredients Dynamically
09:44

For our app to work correctly, we also need to know how many ingredients our burger has. Let me show you how to get that information.

Calculating the Ingredient Sum Dynamically
05:10

Right now, the burger exists but can't be edited. Time to change this by adding some Build Controls.

Adding the Build Control Component
07:26

We have multiple ingredients, so we should also have multiple controls!

Outputting Multiple Build Controls
04:03

Clicking buttons alone doesn't do much - let's connect the controls to the state in this lecture.

Connecting State to Build Controls
08:22

Adding ingredients is an important first step, removing them (without breaking the app!) is another one.

Removing Ingredients Safely
07:30

As the burger grows, so should the price. Let's find out how to adjust the price dynamically in this lecture.

Displaying and Updating the Burger Price
02:28

People should be able to buy the burger! Let's add a "Buy" button.

Adding the Order Button
10:39

Before people really make the purchase, we probably should show them a summary. And why not do that in a modal? Let's add it!

Creating the Order Summary Modal
13:58

Having a modal is great, let's now make sure it only shows up (with an animation) when needed.

Showing & Hiding the Modal (with Animation!)
06:59
Implementing the Backdrop Component
08:22

Inside the modal, we need buttons. To make sure that we don't have to repeat the code for styling them over and over again, let's create a custom <Button /> component.

Adding a Custom Button Component
04:46

We got a custom <Button /> component, time to add it to the app, in this lecture.

Implementing the Button Component
04:54

One thing's missing in our summary - the price! Let's add it in this lecture.

Adding the Price to the Order Summary
02:05

Enough about the BurgerBuilder (for now), let's turn towards navigation and let's start by implementing a toolbar in this lecture.

Adding a Toolbar
09:11

A toolbar is nice, a logo would be even nicer. Time to add one!

Using a Logo in our Application
06:40

Our application also needs navigation items - re-usable ones if possible. In this lecture, we'll implement them.

Adding Reusable Navigation Items
11:26

Not everyone is visiting our app on a desktop - we might have visitors from mobile devices, too. Let's add a responsive side drawer to also help them to navigate around.

Creating a Responsive Sidedrawer
07:44

With responsiveness in mind, some adjustments are needed to make the app look good on as many devices as possible.

Working on Responsive Adjustments
04:34

Let's continue with the responsive adjustments in this lecture.

More about Responsive Adjustments
07:18

The side-drawer should stand out from the background, that's why we'll add a backdrop in this lecture.

Reusing the Backdrop
09:11

In order to open the side drawer, a button is needed. Let's add it in this lecture.

Adding a Sidedrawer Toggle Button
06:27

We got a side-drawer toggle button, let's now turn it into a more pretty hamburger icon.

Adding a Hamburger Icon
02:20

The app is taking shape - let's now have a look at potential fields for improvement.

Improving the App - Introduction
01:11
Prop Type Validation
01:17
Improving Performance
08:48

What about all the component lifecycle methods we learned about, why are we not using more of them? Let me answer this question in this lecture.

Using Component Lifecycle Methods
01:48

What about our folder structure? Does it offer room for improvement? Let's explore that question in this lecture.

Changing the Folder Structure
04:57

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
01:49

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:04
+ Reaching out to the Web (Http / Ajax)
18 lectures 56:27

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
01:03

What does "Accessing Http" mean in React apps, how does it work? This lecture answers these question.

Understanding Http Requests in React
01:35
Understanding our Project and Introducing Axios
04:15

With the Http library added, it's time to finally make a Http request and reach out to the web!

Creating a Http Request to GET Data
05:29

We got data, now it's time to also output it. Learn how to render data to the screen, in this lecture.

Rendering Fetched Data to the Screen
03:46

Often, data doesn't have the format you need it to have. Besides server-side transformations (which of course happen outside of the React-world), you may use JavaScript to adjust the data. Let's take a closer look.

Transforming Data
02:40

Time for a short Http pause: Let's make a single post selectable, so that we can load detailed data for it.

Making a Post Selectable
04:01

When selecting a single post, we also want to fetch data. That should happen without creating an infinite loop though. Learn how that works in this lecture.

Fetching Data on Update (without Creating Infinite Loops)
07:56

We fetched a lot of data - it's now time to also send some. Learn how that works in this lecture.

POSTing Data to the Server
03:52

Besides POSTing and GETting data, there also are other Http methods you can use with axios. Learn about the DELETE request in this lecture.

Sending a DELETE Request
02:23

A little bug was introduced - time to fix it!

Fixing a Bug
00:33

What about errors? Http requests don't always succeed, so error handling is important. Let's explore this topic in this lecture.

Handling Errors Locally
03:23

Axios offers a neat feature: Interceptors. Learn what's up with them and what you can do with them in this lecture.

Adding Interceptors to Execute Code Globally
06:18

We learned how to add interceptors - this lecture now also covers how to get rid of them.

Removing Interceptors
00:12

Repeating the same configuration for multiple requests can be pretty annoying. Thankfully, axios makes it easy to define some global defaults as this lecture shows.

Setting a Default Global Configuration for Axios
03:10

Another cool feature offered by axios are its "instances". Learn how to create and use them in this lecture.

Creating and Using Axios Instances
05:03

Let me wrap this module up and summarize what we covered thus far.

Wrap Up
00:47

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:01
+ Burger Builder Project: Accessing a Server
10 lectures 57:05

Let me introduce you to this module and what you're going to learn in it.

Module Introduction
01:52
Firebase & The Right Database
00:06

We'll use Firebase as a demo backend - simply because it's an easy-to-use backend solution (we don't have to write server-side code with it). Let's set it up in this lecture.

Creating the Firebase Project
03:26

Axios instances are very useful as you learned, therefore the goal is to use them in this project. Let's create one!

Creating the Axios Instance
02:42

With all the setup finished, the goal now is to store an order on the server. Time to send a POST request with the necessary data.

Sending a POST Request
07:46

When working with Http requests, it's a good practice to give the user feedback about the current state. Let's show a spinner whilst the request is on its way!

Displaying a Spinner while Sending a Request
09:20
Handling Errors
12:04
Retrieving Data from the Backend
11:22
Removing Old Interceptors
08:24

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
00:02
Requirements
  • JavaScript + HTML + CSS fundamentals are absolutely required
  • You DON'T need to be a JavaScript expert to succeed in this course!
  • ES6+ JavaScript knowledge is beneficial but not a must-have
  • NO prior React or any other JS framework experience is required!
Description

This course is fully up-to-date with the latest version of React (16.8) and includes the newly introduced React Hooks feature!

---

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!

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