This course is the most up-to-date, comprehensive and bestselling React course on Udemy!
It was completely updated and re-recorded from the ground up – it teaches the very latest version of React with all the core, modern features you need to know!
—
This course also comes with two paths which you can take: The “complete” path (full >40h course) and the “summary” path (~4h summary module) – you can choose the path that best fits your time requirements! 🙂
—
React.js is THE most popular JavaScript library you can use and learn these days to build modern, reactive user interfaces for the web.
This course teaches you React in-depth, from the ground up, step by step by diving into all the core basics, exploring tons of examples and also introducing you to advanced concepts as well.
You’ll get all the theory, tons of examples and demos, assignments and exercises and tons of important knowledge that is skipped by most other resources – after all, there is a reason why this course is that huge! 🙂
And in case you don’t even know why you would want to learn React and you’re just here because of some ad or “the algorithm” – no worries: ReactJS is a key technology as a web developer and in this course I will also explain WHY it’s that important!
Welcome to “React – The Complete Guide”!
This course will teach you React.js in a practice-oriented way, using all the latest patterns and best practices you need. You will learn all the key fundamentals as well as advanced concepts and related topics to turn you into a React.js developer.
This is a huge course because it really covers EVERYTHING you need to know and learn to become a React.js developer!
No matter if you know nothing about React or if you already got some basic React knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course!
My goal with this course is to ensure that you feel confident working with React, so that you can apply for React jobs, use it in your own projects or simply enhance your portfolio as a developer – whatever your goal is: This course gets you there!
I originally created this course in 2017 and I have kept it updated since that – redoing it from the ground up in 2021. And of course I’m dedicated to keeping this course up-to-date – so that you can rely on this course to learn React in the best possible way!
What’s in this course?
-
A thorough introduction to React.js (What is it and why would you use it?)
-
All the core basics: How React works, building components with React & building UIs with React
-
Components, props & dynamic data binding
-
Working with user events and state to create interactive applications
-
A (thorough) look behind the scenes to understand how React works under the hood
-
Detailed explanations on how to work with lists and conditional content
-
React Hooks (in-depth)!
-
Working with built-in Hooks and building custom Hooks
-
How to debug React apps
-
Styling React apps with “Styled Components” and “CSS Modules”
-
Working with “Fragments” & “Portals”
-
Dealing with side effects
-
Class-based components and functional components
-
Sending Http requests & handling transitional states + responses
-
Handling forms and user input (incl. validation)
-
Redux & Redux Toolkit
-
Routing with React Router
-
An in-depth introduction into Next.js
-
Deploying React Apps
-
Implementing Authentication
-
Unit Tests
-
Combining React with TypeScript
-
Adding Animations
-
Tons of examples and demo projects so that you can apply all the things you learned in real projects
-
And so much more – check out the full curriculum on this page!
This really is the “Complete Guide” – promised!
And best of all?
You don’t need any prior React knowledge!
This course starts with zero knowledge assumed! All you need is basic web development and JavaScript knowledge (though the course even includes a brief JavaScript refresher to ensure that we’re all on the same page!).
Check out the full curriculum, the free preview videos and join the course risk-free thanks to the 30-day money-back guarantee!
Refreshing Next Generation JavaScript (Optional)
-
1Introduction
Welcome to this course! Let me introduce myself and give you a first impression of the course content!
-
2What is React?
Let's dive into the most important question first: What is React? In this lecture, we'll take a closer look.
-
3Join our Online Learning Community
Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!
-
4Real-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.
-
5Writing our First React Code
-
6Why 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.
-
7React Alternatives
React's not the only library you can dive into. Let's take a closer look at some alternatives you have.
-
8Understanding 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.
-
9Course Outline
You now know what React is but what does the course actually offer you? This lecture will answer that question.
-
10How 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.
-
11Useful Resources & Links
This lecture contains some useful resources and links. It also holds all the code for the module attached to it.
Understanding the Base Features & Syntax
-
12Module Introduction
Let me introduce you to this module and to what you're going to learn in it.
-
13Understanding "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.
-
14Arrow 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.
-
15Exports 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.
-
16Understanding 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.
-
17Classes, 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.
-
18The 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.
-
19Destructuring
Time to destructure! It's a new JavaScript feature and it allows you to ... do what? Let's explore the feature in this lecture.
-
20Reference and Primitive Types Refresher
Not next-gen but super important: Knowing the difference between reference and primitive types. This lecture will explore both.
-
21Refreshing 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.
-
22Wrap Up
Let me wrap this module up and summarize what we learned thus far.
-
23Next-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.
-
24JS Array Functions
Here's something we'll also use quite a bit in this course: Some JavaScript array functions.
Working with Lists and Conditionals
-
25Module Introduction
Let me introduce you to this module and to what you're going to learn in it.
-
26The 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.
-
27Using 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.
-
28Understanding 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.
-
29Understanding Component Basics
Components are THE core building block of React apps. Time to dive into them and learn more about them.
-
30Understanding 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!
-
31JSX Restrictions
When using JSX, we face some restrictions. Let's find out which these are.
-
32Creating 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.
-
33Components & JSX Cheat Sheet
Time to quickly summarize what components and JSX are about.
-
34Working 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.
-
35Outputting Dynamic Content
Rarely, you only want to output static content. Learn how to easily output dynamic content in this lecture.
-
36Working 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.
-
37Understanding the "children" Prop
There's a special property we can access on our props - the children property. Learn what's up with it in this lecture.
-
38Understanding & Using State
-
39Props & State
Props and state are crucial elements of React - time for a quick comparison and summary.
-
40Handling 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.
-
41To Which Events Can You Listen?
We saw onClick in the last lecture - but to which other events can you actually listen in React apps?
-
42Manipulating the State
-
43Function Components Naming
-
44Using the useState() Hook for State Manipulation
-
45Stateless vs Stateful Components
-
46Passing 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.
-
47Adding 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.
-
48Adding Styling with Stylesheets
Unstyled components don't look that exciting. Time to learn how to add styling!
-
49Working 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.
-
50Time to Practice - The Base Syntax
-
51[OPTIONAL] Assignment Solution
-
52Useful 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
-
53Module Introduction
Let me introduce you to this module and outline what we're going to cover.
-
54Rendering Content Conditionally
Not all content should be visible all the time - let me introduce you to conditional rendering in React apps in this lecture.
-
55Handling 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.
-
56Outputting 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.
-
57Outputting Lists
Time to get our hands dirty and actually output a list in React.
-
58Lists & 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.
-
59Updating State Immutably
When updating state, you should make sure to not overwrite the original state. Learn more about that in this lecture.
-
60Lists & 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.
-
61Flexible Lists
Let's dive deeper into lists and see how we can really create flexible lists in this lecture.
-
62Wrap Up
Let me wrap this module up and summarize what we learned thus far.
-
63Time to Practice - Lists & Conditionals
-
64[OPTIONAL] Assignment Solution
-
65Useful 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
-
66Module Introduction
Let me introduce you to this module and explain what you're going to learn.
-
67Outlining 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
-
68Setting 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.
-
69Setting 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.
-
70Adding and Using Radium
We saw that inline styles have some limitations. Let's find out how we can work around them.
-
71Using Radium for Media Queries
Radium is an interesting package as we saw. Let's explore how we use it together with Media Queries.
-
72Introducing Styled Components
-
73More on Styled Components
-
74Styled Components & Dynamic Styles
-
75Working with CSS Modules
-
76CSS Modules & Media Queries
-
77More on CSS Modules
Want to dive deeper into CSS Modules? This lecture should be very helpful and provide additional insights into that technique.
-
78Useful 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
-
79Module Introduction
Let me introduce you to this module and to what you're going to learn in it.
-
80Understanding Error Messages
Errors can be frustrating but React actually provides some useful error messages. Let's learn how to interpret them.
-
81Finding 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.
-
82Working with the React Developer Tools
React also has its own dev tools which you may use. Learn how to use them in this lecture.
-
83Using Error Boundaries (React 16+)
With React 16, a new feature was added: Error Boundaries. Learn more about it in this lecture.
-
84Wrap Up
Let me wrap this module up and summarize what we learned thus far.
-
85Useful Resources & Links
This lecture contains some useful resources and links. It also holds all the code for the module attached to it.