4.62 (101400 reviews)
☑ 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
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!
Getting Started
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
Refreshing Next Generation JavaScript (Optional)
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
Understanding the Base Features & Syntax
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
[OPTIONAL] Assignment Solution
Useful Resources & Links
Working with Lists and Conditionals
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
[OPTIONAL] Assignment Solution
Useful Resources & Links
Styling React Components & Elements
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
Debugging React Apps
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
Diving Deeper into Components & React Internals
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
MUST READ: Legacy Lectures
[LEGACY] Splitting an App Into Components
[LEGACY] Comparing Stateless and Stateful Components
[LEGACY] Understanding the Component Lifecycle
[LEGACY] Converting Stateless to Stateful Components
[LEGACY] Component Creation Lifecycle in Action
[LEGACY] componentWillUnmount()
[LEGACY] Component Updating Lifecycle Hooks
[LEGACY] Component Updating Lifecycle in Action
[LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)
[LEGACY] Performance Gains with PureComponents
[LEGACY] How React Updates the App & Component Tree
[LEGACY] Understanding React's DOM Updating Strategy
[LEGACY] Windows Users Must Read - File Downloads
[LEGACY] Returning Adjacent Elements (React 16+)
[LEGACY] React 16.2 Feature: Fragments
[LEGACY] Understanding Higher Order Components (HOCs)
[LEGACY] A Different Approach to HOCs
[LEGACY] Passing Unknown Props
[LEGACY] Using setState Correctly
[LEGACY] Validating Props
[LEGACY] Available PropTypes
[LEGACY] Using References ("ref")
[LEGACY] More on the React ref API (16.3)
[LEGACY] The Context API (React 16.3)
[LEGACY] More on the Context API (16.6)
[LEGACY] Updated Lifecycle Hooks (React 16.3)
[LEGACY] The "memo" Method (16.4)
[LEGACY] Wrap Up
[LEGACY] Useful Resources & Links
A Real App: The Burger Builder (Basic Version)
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
Reaching out to the Web (Http / Ajax)
Module Introduction
Understanding Http Requests in React
Understanding our Project and Introducing Axios
Creating a Http Request to GET Data
Rendering Fetched Data to the Screen
Transforming Data
Making a Post Selectable
Fetching Data on Update (without Creating Infinite Loops)
POSTing Data to the Server
Sending a DELETE Request
Fixing a Bug
Handling Errors Locally
Adding Interceptors to Execute Code Globally
Removing Interceptors
Setting a Default Global Configuration for Axios
Creating and Using Axios Instances
Wrap Up
Useful Resources & Links
Burger Builder Project: Accessing a Server
Module Introduction
Firebase & The Right Database
Creating the Firebase Project
Creating the Axios Instance
Sending a POST Request
Displaying a Spinner while Sending a Request
Handling Errors
Retrieving Data from the Backend
Removing Old Interceptors
Useful Resources & Links
Multi-Page-Feeling in a Single-Page-App: Routing
Module Introduction
Routing and SPAs
Setting Up Links
Setting Up the Router Package
react-router vs react-router-dom
Preparing the Project For Routing
Setting Up and Rendering Routes
Rendering Components for Routes
Switching Between Pages
Using Links to Switch Pages
Using Routing-Related Props
The "withRouter" HOC & Route Props
Absolute vs Relative Paths
Absolute vs Relative Paths (Article)
Styling the Active Route
Passing Route Parameters
Extracting Route Parameters
Parsing Query Parameters & the Fragment
Using Switch to Load a Single Route
Navigating Programmatically
Additional Information Regarding Active Links
Understanding Nested Routes
Creating Dynamic Nested Routes
Redirecting Requests
Conditional Redirects
Using the History Prop to Redirect (Replace)
Working with Guards
Handling the 404 Case (Unknown Routes)
Loading Routes Lazily
Lazy Loading with React Suspense (16.6)
Routing and Server Deployment
Wrap Up
Useful Resources & Links
Adding Routing to our Burger Project
Module Introduction
Building the Checkout Container
Setting Up Routing & Routes
Navigating to the Checkout Page
Navigating Back & To Next Page
Passing Ingredients via Query Params
Navigating to the Contact Data Component
Order Submission & Passing Data Between Pages
Adding an Orders Page
Implementing Navigation Links
Fetching Orders
Outputting the Orders
Wrap Up
Useful Resources & Links
Forms and Form Validation
Module Introduction
Analyzing the App
Creating a Custom Dynamic Input Component
Setting Up a JS Config for the Form
Dynamically Create Inputs based on JS Config
Adding a Dropdown Component
Handling User Input
Handling Form Submission
Adding Custom Form Validation
Fixing a Common Validation Gotcha
Adding Validation Feedback
Improving Visual Feedback
Showing Error Messages
Handling Overall Form Validity
Working on an Error
Fixing a Bug
Useful Resources & Links
Redux
Module Introduction
Understanding State
The Complexity of Managing State
Understanding the Redux Flow
Setting Up Reducer and Store
Dispatching Actions
Adding Subscriptions
Connecting React to Redux
Connecting the Store to React
Dispatching Actions from within the Component
Passing and Retrieving Data with Action
Switch-Case in the Reducer
Updating State Immutably
Updating Arrays Immutably
Immutable Update Patterns
Outsourcing Action Types
Combining Multiple Reducers
Understanding State Types
[OPTIONAL] Assignment Solution
Combining Local UI State and Redux
Wrap Up
Useful Resources & Links
Adding Redux to our Project
Module Introduction
Installing Redux and React Redux
Basic Redux Setup
Finishing the Reducer for Ingredients
Connecting the Burger Builder Container to our Store
Working on the Total Price Calculation
Redux & UI State
Adjusting Checkout and Contact Data
Wrap Up
Useful Resources & Links
Redux Advanced
Module Introduction
Adding Middleware
Using the Redux Devtools
Executing Asynchronous Code - Introduction
Introducing Action Creators
Action Creators & Async Code
Handling Asynchronous Code
Restructuring Actions
Where to Put Data Transforming Logic?
Using Action Creators and Get State
Using Utility Functions
A Leaner Switch Case Statement
An Alternative Folder Structure
Diving Much Deeper
Wrap Up
Useful Resources & Links
Redux Advanced: Burger Project
Module Introduction
Installing the Redux Devtools
Preparing the Folder Structure
Creating Action Creators
Executing Asynchronous Code
Fetching Ingredients Asynchronously
Initializing Ingredients in the BurgerBuilder
Changing the Order of our Ingredients Manually
Adding Order Actions
Connecting Contact Data Container & Actions
The Order Reducer
Working on Order Actions
Redirect to Improve UX
Combining Reducers
Handling Purchases & Updating the UI
Resetting the Price after Purchases
Fetching Orders (via Redux)
Checking our Implemented Functionalities
Refactoring Reducers
Refactoring Reducers Continued
Wrap Up
Useful Resources & Links
Adding Authentication to our Burger Project
Module Introduction
Understanding Authentication in Single Page Applications
Required App Adjustments
Adding an Auth Form
Adding Actions
Getting a Token from the Backend
Adding Sign-In
Storing the Token
Adding a Spinner
Logging Users Out
Accessing Protected Resources
Updating the UI Depending on Auth State
Adding a Logout Link
Forwarding Unauthenticated Users
Redirecting the User to the Checkout Page
Persistent Auth State with localStorage
Fixing Connect + Routing Errors
Ensuring App Security
Guarding Routes
Displaying User Specific Orders
Wrap Up
Useful Resources & Links
Improving our Burger Project
Module Introduction
Fixing the Redirect to the Frontpage
Using updateObject in the Entire App
Sharing the Validation Method
Using Environment Variables
Removing console.log()s
Adding Lazy Loading
Wrap Up
Useful Resources & Links
Testing
Module Introduction
What is Testing?
Required Testing Tools
What To Test?
Writing our First Test
Testing Components Continued
Jest and Enzyme Documentations
Testing Components Correctly
Testing Containers
How to Test Redux
Wrap Up
Useful Resources & Links
Deploying the App to the Web
Module Introduction
Deployment Steps
Building the Project
Example: Deploying on Firebase
Wrap Up
Useful Resources & Links
Bonus: Working with Webpack
Module Introduction
Introducing Webpack
How Webpack works
Basic Workflow Requirements
Project & npm Setup
Creating a Basic Folder & File Structure
Creating the Basic React Application
Installing Production Dependencies
Setting Up the Basic Webpack Config
Adding File Rules & Babel
Loading CSS Files
Loading Images & Injecting into HTML Page
Production Workflow & Wrap Up
Adding babel-polyfill
Useful Resources & Links
Bonus: Next.js
Module Introduction
Understanding Server Side Rendering
Setting Up a Project
Understanding the Basics
Next.js & Components & Pages
Styling our App in Next.js
Handling (404) Errors
A Special Lifecycle Hook
Deploying our App
Useful Resources & Links
Bonus: Animations in React Apps
Module Introduction
Preparing the Demo Project
Using CSS Transitions
Using CSS Animations
CSS Transition & Animations Limitations
Using ReactTransitionGroup
Using the Transition Component
Wrapping the Transition Component
Animation Timings
Transition Events
The CSSTransition Component
Customizing CSS Classnames
Animating Lists
Alternative Animation Packages
Wrap Up
Useful Resources & Links
Bonus: A Brief Introduction to Redux Saga
Module Introduction
Installing Redux Saga
Creating our First Saga
Hooking the Saga Up (to the Store and Actions)
Moving Logic from the Action Creator to a Saga
Moving More Logic Into Sagas
Handling Authentication with a Saga
Handling Auto-Sign-In with a Saga
Moving the BurgerBuilder Side Effects into a Saga
Moving the Orders Side Effects into Sagas
Why Sagas can be Helpful
Diving Deeper into Sagas
Useful Resources & Links
React Hooks
Introduction
What are "React Hooks"?
The Starting Project
Getting Started with useState()
More on useState() & State Updating
Array Destructuring
Multiple States
Rules of Hooks
Passing State Data Across Components
Sending Http Requests
useEffect() & Loading Data
Understanding useEffect() Dependencies
More on useEffect()
What's useCallback()?
Working with Refs & useRef()
Cleaning Up with useEffect()
Deleting Ingredients
Loading Errors & State Batching
More on State Batching & State Updates
Understanding useReducer()
Using useReducer() for the Http State
Working with useContext()
Performance Optimizations with useMemo()
Getting Started with Custom Hooks
Sharing Data Between Custom Hooks & Components
Using the Custom Hook
Wrap Up
What's [LEGACY]?
[LEGACY] What are Hooks?
[LEGACY] Enabling Hooks
[LEGACY] The useState() Hook
[LEGACY] Adding Array Destructuring
[LEGACY] Using Multiple State
[LEGACY] Using One State Instead
[LEGACY] The "Rules of Hooks"
[LEGACY] Sending Data via Http
[LEGACY] The useEffect() Hook
[LEGACY] Controlling Effect Execution
[LEGACY] Effect Cleanup
[LEGACY] Converting the "App" Component
[LEGACY] The useContext() Hook
[LEGACY] State and Effects Gotchas
[LEGACY] The useReducer() Hook
[LEGACY] useReducer() vs useState()
[LEGACY] Working with References and useRef()
[LEGACY] Preparing & Optimizing
[LEGACY] Avoiding Unnecessary Re-Rendering
[LEGACY] How to think about Functional Components with Hooks
[LEGACY] Creating a Custom Hook
[LEGACY] Wrap Up
Using Hooks in the Burger Builder
Introduction
Converting <App>
Routing with React.lazy()
Converting the Layout Component
Converting withErrorHandler HOC
Adjusting the Order & Checkout Containers
Add Hooks to ContactData
Converting the BurgerBuilder Container
Adjusting Auth & Logout Components
Using React.memo() & More!
Adding a Custom Error Handling Hook
Setting the right useEffect() Dependencies
Working with useSelector() and useDispatch()
Wrap Up
Useful Resources & Links
Bonus: Replacing Redux with React Hooks
Module Introduction
Starting Project & Why You Would Replace Redux
Alternative: Using the Context API
Toggling Favorites with the Context API
Context API Summary (and why NOT to use it instead of Redux)
Getting Started with a Custom Hook as a Store
Finishing the Store Hook
Creating a Concrete Store
Using the Custom Store
Custom Hook Store Summary
Optimizing the Custom Hook Store
Bonus: Managing Multiple State Slices with the Custom Store Hook
Wrap Up
Useful Resources & Links
Bonus: Building the Burger CSS
Building the Burger CSS Code
Next Steps and Course Roundup
Module Introduction
React Rocks! Where to find more Examples
More Inspiration: Real-World Projects Built with React
Static React Apps with Gatsby.js
Introducing React Native
Component Libraries (Example: Material UI)
Smaller Apps with Preact
Comparing React with Preact
Congratulations
Bonus: More Content!
Good course so far. Nice paced intro with the right level of content to keep me interested but also so I don't feel like I'm lost
Probably not awful but the course wanders all over the place. I got to section 7 and lost interest after learning two ways to do the same thing and then being told neither way was going to be used in the course because there was a third way. Huh? Maybe I needed the "Incomplete Guide to React"?
its a very good explanation so far the IDe they are using is Code Pen and its not free and and its very hard to manage buying it because of the financial problems
This course is excelent, im from Argentina and the english speaker is not difficult to me, but im so excited to finish this course and get more experience to apply in futures jobs
Its was an awesome tutorials, i can understand it very easily and the assignments are making it very easy forme to implement so that i will never forget it
It is very clearly to show me how a simple react app works, for developers easily follow up. But for beginer, I suggest to learn Javascript course first.
Maximilian sa spiegare davvero bene, consigliatissimo. Inoltre il corso copre davvero tutto ed è continuamente aggiornato.
So far this course is fantastic. I have some experience with React, but wanted to take a full course to get a unified approach. Max's enthusiasm and presentation skills really make this fun.
I loved Max's pedagogy and that's why I think it was the right decision to choose this course. And I'm really finding it interesting!
Overall a really good course, Max is a good and positive instructor. The only thing i would change is the number of assignments. I would like to have more of them, maybe even some tests to verify you are really on the track. But it may be only my point of view. What i would really suggest to anyone taking this course is - Always pause the video in the beginning and try to code the next part on your own. It is really easy to fall to a "code along" approach without having a time to think about what you write and how things work.
Oui ce cours correspond largement à mes attentes , tres bien expliqué , Sir Maximillian prends des exemples concrets qui me permette de vite me retrouver et de tres bien prendre la main sur React.Js . Je recommande ce cours.
This course is amazing and very beginner friendly - maybe after a bit of JS practise. It helped me so much understanding how React works, I can't wait to start doing my own app. Maximilian is a great teacher, I always found help when I got stuck. The price/value on this course is amazing, I learnt much more than in my expensive coding bootcamp :( Thank you Max for putting so much effort in your videos! Can't wait to start the nodeJS one :)
That is all right, but unfortunately I haven't enough time recently to fully focus on the all courses and flow after Maximilian:(
The method of creating one hook and passing it to ReactDOM.render(..) gives us the same result as the previous method of multiple ReactDOM.render(..) calls . Only this was mentioned. How the method of creating one hook and one ReactDOM(..) functions i.e. the mechanism was not explained . Although it took me half a minute to understand it myself but would have been better if it was explained in the video. But if more complicated concepts are explained like this then our understanding of the unexplained part might be different from the actual working of the concept .
Eye opener with React. Never thought much about it since basic HTML with CSS seems to already be getting job done. React is amazing. Max does a great job getting me excited for the course.
Status | Date | Discount | ||
---|---|---|---|---|
Expired | 5/27/2019 | 92% OFF | ||
Expired | 7/19/2019 | 94% OFF | ||
Expired | 11/11/2019 | 93% OFF | ||
Expired | 11/29/2020 | 91% OFF | ||
Expired | 12/17/2020 | 93% OFF | ||