4.67 out of 5
4.67
23583 reviews on Udemy

React 16 – The Complete Guide (incl. React Router 4 & Redux)

Dive in and learn React from scratch! Learn Reactjs, Redux, React Routing, Animations, Next.js basics and way more!
Instructor:
Academind by Maximilian Schwarzmüller
79.445 students enrolled
English More
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

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)
  • 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!

Getting Started

1
Introduction

Let me introduce you to this module and to the course in general - welcome on board! :)

2
What is React?

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

3
Real-World SPAs & React Web Apps

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.

4
Adding the Right React Version to Codepen

There might be an error when adding React-DOM to Codepen. Use the solution shown in this lecture to fix it.

5
Writing our First React Code

With the theory out of the way: Let's dive into React and let's actually write our first React code.

6
Why Should we Choose React?

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

7
React Alternatives

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

8
Understanding Single Page Applications and Multi Page Applications

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.

9
Course Outline

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

10
How to get the Most out of This Course

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.

11
Useful Resources & Links

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

Refreshing Next Generation JavaScript (Optional)

1
Module Introduction

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

2
Understanding "let" and "const"

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.

3
Arrow Functions

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.

4
Exports and Imports

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.

5
Understanding Classes

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

6
Classes, Properties and Methods

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

7
The Spread & Rest Operator

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.

8
Destructuring

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

9
Reference and Primitive Types Refresher

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

10
Refreshing Array Functions

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.

11
Wrap Up

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

12
Next-Gen JavaScript - Summary

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

13
JS Array Functions

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

Understanding the Base Features & Syntax

1
Module Introduction

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

2
The Build Workflow

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.

3
Using Create React App

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.

4
Understanding the Folder Structure

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

5
Understanding Component Basics

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

6
Understanding JSX

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!

7
JSX Restrictions

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

8
Creating a Functional Component

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.

9
Components & JSX Cheat Sheet

Time to quickly summarize what components and JSX are about.

10
Working with Components & Re-Using Them

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.

11
Outputting Dynamic Content

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

12
Working with Props

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.

13
Understanding the Children Property

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

14
Understanding & Using State

Props are used to pass data from a parent to a child component but what should you do if you want to change the data you display from within a component? "state" is there to save you! Learn more about it, in this lecture!

15
Props & State

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

16
Handling Events with Methods

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.

17
To Which Events Can You Listen?

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

18
Manipulating the State

You learned about state and how to handle events - time to bring both concepts together and manipulate the state to force an UI update.

19
Functional (Stateless) vs class (Stateful) Components

We learned about two different ways of creating components - which should you use when?

20
Passing Method References Between Components

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.

21
Adding Two Way Binding

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.

22
Adding Styling with Stylesheets

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

23
Working with Inline Styles

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

24
Time to Practice - The Base Syntax
25
Useful Resources & Links

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

Working with Lists and Conditionals

1
Module Introduction

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

2
Rendering Content Conditionally

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

3
Handling Dynamic Content "The JavaScript Way"

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

4
Outputting Lists (Intro)

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.

5
Outputting Lists

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

6
Lists & State

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.

7
Updating State Immutably

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

8
Lists & Keys

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.

9
Flexible Lists

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

10
Wrap Up

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

11
Time to Practice - Lists & Conditionals
12
Useful Resources & Links

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

Styling React Components & Elements

1
Module Introduction

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

2
Outlining the Problem Set

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

3
Setting Styles Dynamically

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

4
Setting Class Names Dynamically

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

5
Adding and Using Radium

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

6
Using Radium for Media Queries

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

7
MUST READ: Enabling CSS Modules
8
Enabling & Using CSS Modules

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.

9
More on CSS Modules

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

10
Adding Pseudo Selectors

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

11
Working with Media Queries

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

12
Useful Resources & Links

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

Debugging React Apps

1
Module Introduction

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

2
Understanding Error Messages

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

3
Finding Logical Errors by using Dev Tools & Sourcemaps

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

4
Working with the React Developer Tools

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

5
Using Error Boundaries (React 16+)

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

6
Wrap Up

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

7
Useful Resources & Links

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

Diving Deeper into Components & React Internals

1
Module Introduction

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

2
A Better Project Structure

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

3
Splitting an App Into Components

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

4
Comparing Stateless and Stateful Components

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

5
Understanding the Component Lifecycle

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.

6
Converting Stateless to Stateful Components

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

7
Component Creation Lifecycle in Action

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

8
componentWillUnmount()

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

9
Component Updating Lifecycle Hooks

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

10
Component Updating Lifecycle in Action

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

11
Updating Lifecycle Hooks (Triggered by State Changes)

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

12
Performance Gains with PureComponents

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

13
How React Updates the App & Component Tree

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.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 out of 5
23583 Ratings

Detailed Rating

Stars 5
16363
Stars 4
6033
Stars 3
986
Stars 2
137
Stars 1
64
30-Day Money-Back Guarantee

Includes

34 hours on-demand video
45 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion