Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2020-12-01 02:42:22
30-Day Money-Back Guarantee

This course includes:

  • 40.5 hours on-demand video
  • 49 articles
  • 223 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
Development Programming Languages React

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!
Bestseller
Rating: 4.6 out of 54.6 (101,639 ratings)
345,948 students
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller
Last updated 1/2021
English
English, French [Auto], 
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

30 sections • 491 lectures • 40h 38m total length

  • Preview01:49
  • What is React?
    Preview02:56
  • Join our Online Learning Community
    00:21
  • Preview02:28
  • Preview15:07
  • Why Should we Choose React?
    Preview02:03
  • Preview01:11
  • Preview03:38
  • Preview07:28
  • Preview02:29
  • Preview00:08

  • Module Introduction
    01:35
  • Understanding "let" and "const"
    03:05
  • Arrow Functions
    05:27
  • Exports and Imports
    04:43
  • Understanding Classes
    04:37
  • Classes, Properties and Methods
    03:03
  • The Spread & Rest Operator
    06:30
  • Destructuring
    03:13
  • Reference and Primitive Types Refresher
    04:26
  • Refreshing Array Functions
    02:45
  • Wrap Up
    00:52
  • Next-Gen JavaScript - Summary
    03:51
  • JS Array Functions
    00:20

  • Module Introduction
    00:38
  • The Build Workflow
    08:00
  • Using Create React App
    06:09
  • Understanding the Folder Structure
    08:11
  • Understanding Component Basics
    05:32
  • Understanding JSX
    05:38
  • JSX Restrictions
    03:09
  • Creating a Functional Component
    08:09
  • Components & JSX Cheat Sheet
    00:52
  • Working with Components & Re-Using Them
    01:47
  • Outputting Dynamic Content
    03:02
  • Working with Props
    04:07
  • Understanding the "children" Prop
    02:56
  • Understanding & Using State
    07:17
  • Props & State
    01:34
  • Handling Events with Methods
    03:45
  • To Which Events Can You Listen?
    01:20
  • Manipulating the State
    05:03
  • Function Components Naming
    00:26
  • Using the useState() Hook for State Manipulation
    13:51
  • Stateless vs Stateful Components
    03:08
  • Passing Method References Between Components
    07:05
  • Adding Two Way Binding
    06:51
  • Adding Styling with Stylesheets
    05:28
  • Working with Inline Styles
    04:15
  • Time to Practice - The Base Syntax
    1 question
  • [OPTIONAL] Assignment Solution
    22:28
  • Useful Resources & Links
    00:02

  • Module Introduction
    01:03
  • Rendering Content Conditionally
    10:09
  • Handling Dynamic Content "The JavaScript Way"
    04:49
  • Outputting Lists (Intro)
    01:31
  • Outputting Lists
    05:32
  • Lists & State
    04:12
  • Updating State Immutably
    02:39
  • Lists & Keys
    04:14
  • Flexible Lists
    07:34
  • Wrap Up
    01:55
  • Time to Practice - Lists & Conditionals
    1 question
  • [OPTIONAL] Assignment Solution
    17:17
  • Useful Resources & Links
    00:01

  • Module Introduction
    01:19
  • Outlining the Problem Set
    01:58
  • Setting Styles Dynamically
    03:19
  • Setting Class Names Dynamically
    07:09
  • Adding and Using Radium
    07:00
  • Using Radium for Media Queries
    05:02
  • Introducing Styled Components
    08:16
  • More on Styled Components
    05:51
  • Styled Components & Dynamic Styles
    05:27
  • Working with CSS Modules
    15:21
  • CSS Modules & Media Queries
    03:15
  • More on CSS Modules
    01:02
  • Useful Resources & Links
    00:03

  • Module Introduction
    00:55
  • Understanding Error Messages
    02:37
  • Finding Logical Errors by using Dev Tools & Sourcemaps
    04:17
  • Working with the React Developer Tools
    03:06
  • Using Error Boundaries (React 16+)
    08:13
  • Wrap Up
    00:57
  • Useful Resources & Links
    00:01

  • Module Introduction
    00:43
  • 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() - Example
    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:03

  • About React Hooks
    00:14
  • Module Introduction
    00:57
  • Planning an App in React - Core Steps
    02:32
  • Planning our App - Layout and Component Tree
    10:57
  • Planning the State
    04:13
  • MUST READ: Enabling CSS Modules
    01:25
  • Setting up the Project
    05:01
  • Creating a Layout Component
    10:01
  • Starting Implementation of The Burger Builder Container
    05:04
  • Adding a Dynamic Ingredient Component
    08:27
  • Adding Prop Type Validation
    02:49
  • Starting the Burger Component
    06:49
  • Outputting Burger Ingredients Dynamically
    09:44
  • Calculating the Ingredient Sum Dynamically
    05:10
  • Adding the Build Control Component
    07:26
  • Outputting Multiple Build Controls
    04:03
  • Connecting State to Build Controls
    08:22
  • Removing Ingredients Safely
    07:30
  • Displaying and Updating the Burger Price
    02:28
  • Adding the Order Button
    10:39
  • Creating the Order Summary Modal
    13:58
  • Showing & Hiding the Modal (with Animation!)
    06:59
  • Implementing the Backdrop Component
    08:22
  • Adding a Custom Button Component
    04:46
  • Implementing the Button Component
    04:54
  • Adding the Price to the Order Summary
    02:05
  • Adding a Toolbar
    09:11
  • Using a Logo in our Application
    06:40
  • Adding Reusable Navigation Items
    11:26
  • Creating a Responsive Sidedrawer
    07:44
  • Working on Responsive Adjustments
    04:34
  • More about Responsive Adjustments
    07:18
  • Reusing the Backdrop
    09:11
  • Adding a Sidedrawer Toggle Button
    06:27
  • Adding a Hamburger Icon
    02:20
  • Improving the App - Introduction
    01:11
  • Prop Type Validation
    01:17
  • Improving Performance
    08:48
  • Using Component Lifecycle Methods
    01:48
  • Changing the Folder Structure
    04:57
  • Wrap Up
    01:49
  • Useful Resources & Links
    00:04

  • Module Introduction
    01:03
  • Understanding Http Requests in React
    01:35
  • Understanding our Project and Introducing Axios
    04:15
  • Creating a Http Request to GET Data
    05:29
  • Rendering Fetched Data to the Screen
    03:46
  • Transforming Data
    02:40
  • Making a Post Selectable
    04:01
  • Fetching Data on Update (without Creating Infinite Loops)
    07:56
  • POSTing Data to the Server
    03:52
  • Sending a DELETE Request
    02:23
  • Fixing a Bug
    00:33
  • Handling Errors Locally
    03:23
  • Adding Interceptors to Execute Code Globally
    06:18
  • Removing Interceptors
    00:10
  • Setting a Default Global Configuration for Axios
    03:10
  • Creating and Using Axios Instances
    05:03
  • Wrap Up
    00:47
  • Useful Resources & Links
    00:00

  • Module Introduction
    01:52
  • Firebase & The Right Database
    00:05
  • Creating the Firebase Project
    03:26
  • Creating the Axios Instance
    02:42
  • Sending a POST Request
    07:46
  • 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
  • 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 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.

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

Featured review

Obada Qawwas
Obada Qawwas
15 courses
8 reviews
Rating: 5.0 out of 5a year ago
An amazing course to start building React applications, the instructor is extremely great, he explains everything in different ways and shows us all the possible ways to work with React. If you're thinking about taking your career to the next level and learn something trendy, I really advise you in this course. Lastly, I want to thank the instructor for such a lovely course, I wish you all the best. Regards

Instructors

Academind by Maximilian Schwarzmüller
Online Education
Academind by Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 305,754 Reviews
  • 1,297,701 Students
  • 25 Courses

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. 

Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.

Currently, you can find courses published by Maximilian Schwarzmüller and Manuel Lorenz, more instructors to come!

Keep learning!

Maximilian Schwarzmüller
Professional Web Developer and Instructor
Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 555,826 Reviews
  • 1,316,229 Students
  • 35 Courses

Experience as (Web) Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

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 enables 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 on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 1,000,000 students.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.