3 Pemimpin Dr, #06-04 (07), Singapore 576147
+65 8839 6772

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

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

Online Self-Paced

Play Video

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

Course Description

This course is fully up-to-date with the latest version of React and includes React Hooks! Of course it will be kept up-to-date in the future 🙂

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.

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. 

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

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

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

This course includes:

40.5 hours on-demand video

Access on mobile and TV

49 articles


223 downloadable resources

SkillsFuture Credit eligible *

Full lifetime access

Certificate of completion

* More than 7hr of learning time required

Course content

  • Introduction
  • What is React?
  • Join our Online Learning Community
  • Real-World SPAs & React Web Apps
  • Writing our First React Code
  • Why Should we Choose React?
  • React Alternatives
  • Understanding Single Page Applications and Multi Page Applications
  • Course Outline
  • How to get the Most out of This Course
  • Useful Resources & Links

  • Module Introduction
  • Understanding "let" and "const"
  • Arrow Functions
  • Exports and Imports
  • Understanding Classes
  • Classes, Properties and Methods
  • The Spread & Rest Operator
  • Destructuring
  • Reference and Primitive Types Refresher
  • Refreshing Array Functions
  • Wrap Up
  • Next-Gen JavaScript - Summary
  • JS Array Functions

  • Module Introduction
  • The Build Workflow
  • Using Create React App
  • Understanding the Folder Structure
  • Understanding Component Basics
  • Understanding JSX
  • JSX Restrictions
  • Creating a Functional Component
  • Components & JSX Cheat Sheet
  • Working with Components & Re-Using Them
  • Outputting Dynamic Content
  • Working with Props
  • Understanding the "children" Prop
  • Understanding & Using State
  • Props & State
  • Handling Events with Methods
  • To Which Events Can You Listen?
  • Manipulating the State
  • Function Components Naming
  • Using the useState() Hook for State Manipulation
  • Stateless vs Stateful Components
  • Passing Method References Between Components
  • Adding Two Way Binding
  • Adding Styling with Stylesheets
  • Working with Inline Styles
  • Time to Practice - The Base Syntax
  • [OPTIONAL] Assignment Solution
  • Useful Resources & Links

  • Module Introduction
  • Rendering Content Conditionally
  • Handling Dynamic Content "The JavaScript Way"
  • Outputting Lists (Intro)
  • Outputting Lists
  • Lists & State
  • Updating State Immutably
  • Lists & Keys
  • Flexible Lists
  • Wrap Up
  • Time to Practice - Lists & Conditionals
  • [OPTIONAL] Assignment Solution
  • Useful Resources & Links

  • Module Introduction
  • Outlining the Problem Set
  • Setting Styles Dynamically
  • Setting Class Names Dynamically
  • Adding and Using Radium
  • Using Radium for Media Queries
  • Introducing Styled Components
  • More on Styled Components
  • Styled Components & Dynamic Styles
  • Working with CSS Modules
  • CSS Modules & Media Queries
  • More on CSS Modules
  • Useful Resources & Links

  • Module Introduction
  • Understanding Error Messages
  • Finding Logical Errors by using Dev Tools & Sourcemaps
  • Working with the React Developer Tools
  • Using Error Boundaries (React 16+)
  • Wrap Up
  • Useful Resources & Links

  • Module Introduction
  • A Better Project Structure
  • Splitting an App Into Components
  • Comparing Stateless and Stateful Components
  • Class-based vs Functional Components
  • class Component Lifecycle Overview
  • Component Creation Lifecycle in Action
  • Component Update Lifecycle (for props Changes)
  • Component Update Lifecycle (for state Changes)
  • Using useEffect() in Functional Components
  • Controlling the useEffect() Behavior
  • Cleaning up with Lifecycle Hooks & useEffect()
  • Cleanup Work with useEffect() - Example
  • Using shouldComponentUpdate for Optimization
  • Optimizing Functional Components with React.memo()
  • When should you optimize?
  • PureComponents instead of shouldComponentUpdate
  • How React Updates the DOM
  • Rendering Adjacent JSX Elements
  • Windows Users Must Read
  • Using React.Fragment
  • Higher Order Components (HOC) - Introduction
  • Another Form of HOCs
  • Passing Unknown Props
  • Setting State Correctly
  • Using PropTypes
  • Using Refs
  • Refs with React Hooks
  • Understanding Prop Chain Problems
  • Using the Context API
  • contextType & useContext()
  • Wrap Up
  • Useful Resources & Links

  • About React Hooks
  • Module Introduction
  • Planning an App in React - Core Steps
  • Planning our App - Layout and Component Tree
  • Planning the State
  • MUST READ: Enabling CSS Modules
  • Setting up the Project
  • Creating a Layout Component
  • Starting Implementation of The Burger Builder Container
  • Adding a Dynamic Ingredient Component
  • Adding Prop Type Validation
  • Starting the Burger Component
  • Outputting Burger Ingredients Dynamically
  • Calculating the Ingredient Sum Dynamically
  • Adding the Build Control Component
  • Outputting Multiple Build Controls
  • Connecting State to Build Controls
  • Removing Ingredients Safely
  • Displaying and Updating the Burger Price
  • Adding the Order Button
  • Creating the Order Summary Modal
  • Showing & Hiding the Modal (with Animation!)
  • Implementing the Backdrop Component
  • Adding a Custom Button Component
  • Implementing the Button Component
  • Adding the Price to the Order Summary
  • Adding a Toolbar
  • Using a Logo in our Application
  • Adding Reusable Navigation Items
  • Creating a Responsive Sidedrawer
  • Working on Responsive Adjustments
  • More about Responsive Adjustments
  • Reusing the Backdrop
  • Adding a Sidedrawer Toggle Button
  • Adding a Hamburger Icon
  • Improving the App - Introduction
  • Prop Type Validation
  • Improving Performance
  • Using Component Lifecycle Methods
  • Changing the Folder Structure
  • Wrap Up
  • Useful Resources & Links

Certificate of Completion

When you complete a paid Udemy course, you will receive a certificate of completion, which you can share with your friends, relatives, co-workers and potential employers. Certificates of completion help demonstrate your accomplishments, but please note Udemy is not an accredited institution, and as a result, the certificates cannot be used for formal accreditation.

Please note: free courses and courses that only include practice tests do not offer a certificate of completion.

What you'll learn

Student feedback

Client Logo
Michael Newman

This course was great to supplement the coding boot camp I went to! Starts off with the basics but it gets pretty advanced in a hurry.

Client Logo
Rob Arbittier

It was great. Occasionally got overly complicated and seemed to show a way to do things that weren't the simplest, most logical way. But great overall.

Client Logo
David N Tran

Very very thorough course! Appreciate the ongoing updates and extra bonus courses to help on my development journey!

Client Logo
Alexander Ivchenko

An amazing course! I've learned so much, I think now I have a solid knowledge which I can utilize to create web apps. Max is an incredible instructor!

Client Logo
Ben Lowther

Really thorough and enjoyable course, packed with a variety of information and content! I learned a lot and found the tutors engaging and knowledgeable. Thanks!

Who this course is for:

Transform your life through Udemy

Join millions of learners from around the world already learning on Udemy! Learn online at your own pace from highly rated instructors on any device. Learn at home, the office, waiting in line, or on the go.

Start today with a special discount and download to your phone. Lifetime access over 130,000 courses, courses in 60+ languages and expert instructors. 30-Day Money-back guarantee.

Related courses by other education partners

Tableau Training and Certification

Edureka’s Tableau Training & Certification Course is curated by Business Intelligence Industry Experts, and it covers in-depth […]

Modern React with Redux [2020 Update]

Thousands of other engineers have learned React and Redux, and you can too. This course uses a time-tested, battle-proven method to […]

React with Redux Certification Training

Edureka’s React with Redux Certification Training will train you to build efficient React applications by mastering the concepts of React, […]