Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React JS and Redux Bootcamp - Master React Web Development

Learn React.js and Redux the right way. Dive into the React engine, create 5 apps, and become a React web developer.

Created byDavid Joseph Katz

Last updated 10/2025

English

What you'll learn

How to bootstrap React applications in under a minute with create-react-app.
How to build React projects from scratch without create-react-app.
Where React fits in the big picture of web development.
Transpiling and bundling React applications.
Modern best practices of React and Redux development.
How to use APIs to create unique and interesting applications.
Redux at a deeper level. How each layer of a Redux application really fits together.
The reasons why bugs appear, the proper fixes for those bugs, and why certain solutions are more optimal than other ones.
Deployment of React applications.
Backend essentials too, and how to create backend APIs.

Course content

16 sections • 174 lectures • 22h 34m total length

What You’ll Get From Taking this Course7:27
Build a foundation to become a React and Redux developer. Learn how React works, under the hood, and its role in web development, plus strong opportunities.
A 7m Overview of Web Development and React7:18
[IMPORTANT] Course Repo and Software Installations1:07
Optional For Windows: Install the Windows Subsystem for Linux and VSCode8:40

Section Overview | First React Application2:51
Set up the Portfolio App - Revised5:24
Run the React App and the React Project Structure - Revised19:57
ReactDOM, Elements, and JSX - Revised7:30
A React Component - Revised9:01
Classes - Overview3:25
Classes, Inheritance, and a Closer Component Look10:54
State9:12
Explore React state as an updatable structure that powers a component, and see how displayBio toggles a bio section via a constructor, super, render, and a ternary expression.
SetState9:46
A React Rule: Never Directly Modify State6:44
Class Properties and Initializers3:40
Component 2: Projects12:25
Props and Project Component8:40
Challenge: Social Profiles Component4:28
Code: Social Profiles Component6:52
Create the social profiles component in React by mapping the SOCIAL_PROFILES array to render a SocialProfile for each item, passing the profile data via props.
Wrap up with Low-Hanging Styling Fruit11:59
Wrap up with low-hanging styling fruit by applying quick css improvements, adding index.css, bootstrap, custom fonts, and a circular profile image to elevate visuals with minimal time.
Section Summary1:08

Section Overview3:39
React from Scratch - Revised14:58
Learn to build a React app from scratch without Create React App, load React via CDN, create a root div, and render with ReactDOM using elements and eventually JSX.
Compiling, Bundling, and a Closer Look at JSX - Revised16:02
Refactor the Portfolio to use Parcel - Revised10:51
Refactor the portfolio from create React app to Parcel, streamline setup, and implement dev, build, and start scripts for a minimal production workflow.
The Necessity of Bundlers and Transpilers Review4:59
The DOM and React’s Virtual DOM7:37
Section Summary1:20

Section Preview2:22
Continue building your React core skills by exploring lifecycle methods, the fetch method for external APIs, stateless functional components, React Router, higher-order components, browser events, and local storage.
Lifecycle Methods and componentDidMount10:04
Explore React lifecycle methods like componentDidMount and componentWillUnmount, and learn how a Title component animates rotating titles with setInterval and modulo as it mounts and unmounts in the DOM.
ComponentWillUnmount6:09
[Optional] Title Fade8:58
Stateless Functional Components8:42
[Optional] HTTP Overview4:52
Explore how http defines hypertext messages, the request-response model, and secure https, and learn how get and post methods power api interactions in a React app.
Fetch and a Jokes Component11:31
Challenge and Code: Ten More Jokes8:30
Fetch Under the Hood: Promises12:00
React Router - Revised9:13
Learn to implement React Router DOM and history to create a multi-page portfolio app, defining routes for the main page and a jokes page with browser history navigation.
Header Component - Revised8:16
Higher Order Components - Revised11:27
Section Summary1:22

Section and Project Preview3:22
Set up Music Master and Your Own React App Template - Revised10:56
Set up the Music Master project using parcel and React, initialize npm, copy assets, configure scripts, and create a reusable React app template for future projects.
Track User Input in the State7:19
Challenge and Code: Search an Artist’s Top Tracks10:33
Challenge and Code: Artist Component9:12
Tracks Component13:14
Search Component and Lifting State Up in Callback Props8:20
Styling Finishing Touches10:40
Include Music Master in Portfolio - Revised4:42
Section Summary0:41

Section and Project Preview3:11
Redux Overview6:14
Set Up Evens or Odds and the Redux Store - Revised7:33
Reducers - Revised5:45
Actions - Revised15:02
Explore how redux actions dispatch to reducers to update the store and initialize state with default settings. See how action types like set_game_started drive updates.
Action Creators - Revised9:22
Root Reducer Update and the Spread Operator - Revised11:54
Update the root reducer to handle set instructions expanded with a switch, preserve existing state using the spread operator, and avoid mutating state when actions dispatch.
Split the Redux Layers - Revised8:11
Connect React Components to Redux - Revised8:29
Connect your React components to the Redux store by wrapping the app with the Provider and using mapStateToProps to pass game started to app props, enabling dispatch.
Redux-based UI6:54
Render a redux-connected UI that reflects the game started state, showing start or cancel options, and dispatch start game and cancel game actions via helpers; explore mapDispatchToProps for cleaner dispatch.
Map Dispatch to Props3:32
Mapdispatchtoprops attaches startgame and cancel game action creators to the component props and exposes redux dispatch, wired via connect, for onClick events.
Challenge and Code: Interactive Instructions12:58
Fetch Deck of Cards10:20
Note: The deckofcardsapi updated their CORS policy0:19
CORS and Same Origin Policy10:39
Async Actions6:54
Redux Middleware - Revised7:46
Explore how Redux middleware enables asynchronous actions with Redux Thunk and configure store, using a double arrow action creator to pass dispatch for fetch new deck.
Handle Fetch Cases13:27
Split up and Combine Reducers | Revised12:36
DrawCard Component5:23
Create a stateless DrawCard component that connects to the Redux store to fetch the deck ID and dispatch a draw action calling the deck of cards API.
Challenge and Code: Draw Card Redux Flow13:57
Challenge and Code: Card Component5:26
Challenge and Code: Guess Redux Logic and Component | Revised12:34
Implement a Redux flow to track the user’s even-or-odd guess in a game state reducer, with actions, an even/odd guess component, and later track correct guesses.
Track Correct Guesses9:31
Correct Guess Record and Local Storage10:25
Include Evens or Odds in Portfolio | Revised10:07
Section Summary2:18

Section and Project Preview2:37
Publish/Subscribe with Redux4:03
Set Up the Reaction App5:21
PubNub Exploration10:20
PubSub Class and Redux Connection8:28
Messages Redux Flow9:19
Build a messages redux flow by creating a new message action type and creator, a messages reducer, and pub/sub integration, using uuid and timestamps for unique items.
Publish Message Component7:55
React Context10:07
Learn to share a single pub sub instance across components with React context, replacing multiple instances via a context provider, enabling publish and subscribe and store integration with Redux.
Redux Devtools2:59
Challenge and Code: Message Board Component5:47
Challenge and Code: Username in Redux9:22
Username in Messages4:52
CreateReaction Component6:08
Reactions Redux Flow8:51
Publish Reaction6:33
Connect publish reaction to Redux and pubsub, introducing a publishReaction helper that dispatches createReaction with username and message id, triggered by emoji clicks.
MessageReactions Component6:39
Include Reaction in Portfolio5:41
Include the reaction app in the portfolio by turning it into a reusable component, wiring a route, updating dependencies, and running a fresh build to showcase React and Redux integration.
Section Summary1:07

Section Overview2:55
Set Up News App and Express Server6:44
GET Stories and Nodemon8:03
Express Middleware and CORS6:17
Request an API within an API7:09
Error Handler10:23
Top Story Items11:30
Spotlight: Deck of Cards and Spotify Wrapper APIs4:11
Set up News React Client and Serve a React App with Express10:24
Challenge and Code: Fetch and Display Stories5:44
Fetch top stories from the express backend, store them in state, and render them in the React UI with links, author, score, and formatted timestamps.
Section Summary1:13

Requirements

Familiarity with JavaScript.
Familiarity with the command line is preferred.

Description

Master React and Redux with Real-World Projects and Modern Best Practices

Let me show you why this course is one of the strongest learning investments you can make to master React and Redux - whether you’re an individual developer or selecting training for a team.

Whether you're an individual looking to level up or a company selecting training for your development team, this course will provide the clarity, depth, and real-world experience needed to confidently build scalable front-end applications with React.

Why This Course Exists

When I taught myself web development, I learned from tutorials, docs, Stack Overflow threads, and GitHub projects. The journey was exciting - but unnecessarily time-consuming.

Most tutorials showed me what code to type, but not why it fixed the problem, nor how the underlying system actually worked. I had to connect the dots alone.

Years later, as a full-stack software engineer at companies like Zendesk and Upstart, I’ve taken the best of what I learned in the industry and the feedback from more than 320,000 students across 200 countries, to design the kind of course I wish I had at the start:

A course that teaches what to do, why it works, and how it works behind the scenes - so your understanding is long-lasting and transferable to real-world development.

This brings us to:

The Why Behind the Syntax

Modern React development requires more than just syntax knowledge. It requires an understanding of how and why React works, the ability to think in components, and real practice building interactive interfaces.

This course goes beyond surface-level tutorials. You will:

Build multiple real applications step-by-step.
Learn React the right way, with clarity and intuition behind each concept.
Dive into the React engine - understand how React applications execute.
Master Redux from fundamentals to professional patterns.
Strengthen your JavaScript skills as you learn to reason about React code.
Develop confident, production-ready front-end engineering habits.

This training is designed as both a complete learning path for new React developers and a refresher + upskilling program for teams transitioning to modern, component-driven development.

Who Is This Course For

Engineering teams and companies adopting or standardizing React. Structured, project-based learning suitable for onboarding, internal training programs, and junior-to-mid level developer upskilling
Current or aspiring React developers. Develop a strong, grounded understanding of core concepts and patterns used across professional React codebases
Front-end and full-stack developers. Learn how to build scalable interfaces and integrate React into modern web applications
Developers transitioning from other frameworks. Gain a clear mental model for the React ecosystem and learn how to “think in React”
Beginners with JavaScript fundamentals. Start from the basics and grow into building full applications with confidence.

What Students Are Saying

“Excellent course! David does a great job of not only teaching React but also takes the time to go through the underlying reasoning of React. His style and content are very engaging, and his ability to demystify things other teachers gloss over makes this course #1 in my book.”
- B.C.

“I should say that this is one of the best ReactJS courses. The teaching style is concise and right to the point. Exactly what I needed. This course features many real-life projects; also, it could be used as a good reference and guide for when you need a quick reminder of the concepts.”
- S.H.

“A great, entertaining course - a knowledgeable and engaging instructor. Though I’ve a fair amount of experience with React and Redux, I took this course to ‘fill in a few blanks’ and those blanks were filled and more! Some new tricks learnt and old tricks brushed up on and revised. Fully recommended.”
- T.M.

Again, what You Will Learn

This course is structured to guide you from fundamentals to advanced concepts through practical projects, clear explanations, and hands-on development:

You will:

Start coding React from the very first section - no time wasted
Build multiple relevant, portfolio-ready applications
Understand the role of React in the web ecosystem and how it connects to the browser
Learn Redux step-by-step with a breakdown of how each part works and why it exists
Develop professional front-end engineering habits and debugging skills
Work with real APIs, multi-user functionality, and backend integration
Deploy your applications so you can share your work publicly

The goal is not only to get you building apps - but to ensure you understand the why and how, so you can keep building long after you complete this course.

A Course Built for Growth

Whether you are:

choosing a curriculum to train your engineering team,
building your first professional React application, or
strengthening your existing React and Redux skills,

this course provides a clear, structured, and motivating learning experience supported by real projects, modern best practices, and highly rated instruction.

The first few sections are free to preview. Even if you only complete that portion, you will walk away with a full React application and valuable, transferable lessons.

If you're ready to learn React and Redux efficiently, deeply, and in a way that sticks - this course is designed for you.

I look forward to seeing you inside.

Who this course is for:

Training curators looking for a hands-on React and redux bootcamp for their curriculum.
Those looking for relevant web development skills to start their careers.
Those who want to build React and Redux applications the right way, by to thinking about the code at a deeper level.
JavaScript coders looking to take the next step and learn React.
Backend web developers who want to add frontend to their skillset.

React JS and Redux Bootcamp - Master React Web Development

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 25min

Welcome to React | First React Application17 lectures • 2hr 14min

Breaking down React | React and Web Development7 lectures • 59min

Continued Main React Concepts13 lectures • 1hr 43min

Core React Project: MusicMaster 2.010 lectures • 1hr 19min

Core React Concepts Review2 lectures • 9min

Redux and more Advanced React27 lectures • 3hr 51min

Redux Project: Reaction18 lectures • 1hr 56min

Redux Review2 lectures • 9min

Create Backend APIs for React Apps11 lectures • 1hr 15min

Requirements

Description

Who this course is for: