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 Web Development - The Essentials Bootcamp

Updated for 2026: React.js essentials bootcamp - React Core, Router, Redux, Hooks, in-depth JS, + detailed guides!

Created byDavid Joseph Katz

Last updated 10/2025

English

What you'll learn

Updated for 2026: Learn how to code with React, React Hooks, Redux, Next.js, and more from an engineer with 5+ years of industry experience.
Learn React the right way and learn best practices, from an engineer with 5+ years of industry experience.
Modern Redux in 2026: modern syntax and best practices.
Modern React in 2026: createStore, functional components, hooks, etc.
React hooks in 2026 - explore fundamental hooks, and build hooks from scratch.
Explore the React engine, and learn how it works under the hood to better understand the Virtual DOM, state, props, etc.
Learn React in 2026 the right way and learn best practices, from an engineer with 5+ years of industry experience.
Learn how to build applications from scratch, setting up your own react-app-template.
Create industry-relevant projects that you can use on your portfolio and resume.
See how React fits in the big picture of web development, with a ton of detailed overviews on what is happening in the browser and the React engine.
Access 3+ hours of in-depth JavaScript material to hone your JS skills.

Course content

15 sections • 197 lectures • 28h 42m total length

What You’ll Get From Taking this Course4:12
Overview of the course curriculum, and what you'll learn by taking it.
A 7m Overview of Web Development and React7:18
An overarching view of web development, and how React.js fits into that picture.
Course Repo and Software Installations1:14
Provides important information including the course repository, and software installation links.
Optional For Windows: Install the Windows Subsystem for Linux and VS Code8:40

Section Preview: Welcome To React | First React Application0:55
Section Overview | First React Application2:51
Overview of the first section on creating the first React application.
Set up the Portfolio App5:24
Set up the portfolio application - the first project of the course.
Run the React App and the React Project Structure19:57
Run the React application set up in the previous video, and go over the project structure.
ReactDOM, Elements, and JSX7:30
Understand essential aspects of React, including the ReactDOM, elements, and JSX.
A React Component9:01
Create your first React Component. Components are the building blocks of a React application. They can be used to build the whole user interface. And they can have dynamic functionality, that the user can interact with.
Classes - Overview3:25
An overview of JavaScript classes - a prerequisite for building React components using classes.
Classes, Inheritance, and a Closer Component Look10:54
An exploration of classes, JavaScript class-based inheritance, and an investigation of React.component.
State9:12
An exploration of React component state: the dynamic data contained within a React component.
SetState9:46
An introduction to the `setState` method: the way to update state in a React component.
A React Rule: Never Directly Modify State6:44
An explanation of one of the golden rules of react: never directly modify the state object in the component.
Class Properties and Initializers3:40
Refactor the class to use properties and initializers to follow the best practices of JavaScript.
Component 2: Projects12:25
Add a second component to Portfolio project for Projects.
Props and Project Component8:40
Explore React component props: the way data is passed from a parent React component to a child React component.
Challenge: Social Profiles Component4:28
Take on a challenge to build a new React component for Social Profiles.
Code: Social Profiles Component6:52
An implementation of the Social Profiles component - a follow up to the previous challenge to build this component.
Wrap up with Low-Hanging Styling Fruit11:59
Wrap up the Portfolio project by following up on some low hanging fruit to clean up the code.
Section Summary1:07

Section Preview: Breaking Down React | React and Web Development0:55
Section Overview3:39
React from Scratch14:58
Explore React more thoroughly from a truly ground 0 "from scratch" perspective.
Compiling, Bundling, and a Closer Look at JSX16:02
Understand compiling and bundling JavaScript code for React projects. Investigate JSX more deeply.
Refactor the Portfolio to use Parcel10:51
Refactor the Portfolio project to use the Parcel build tool to accomplish bundling.
The Necessity of Bundlers and Transpilers Review4:59
Understand the reasons why bundlers and transpilers for JavaScript and React applications are necessary.
The DOM and React’s Virtual DOM7:37
Go over the JavaScript raw DOM API for the browser. Understand how React creates its own virtual DOM as an internal representation of the raw DOM. Learn how the virtual DOM aids React applications to update their UI in a very efficient way.
Section Summary1:17

Section Preview: Continued Main React Concepts0:37
[Optional section] Section Preview2:22
[Optional section] Lifecycle Methods and componentDidMount10:04
Understand lifecycle methods and their purpose, starting with componentDidMount.
[Optional section] ComponentWillUnmount6:09
Continue the exploration of lifecycle methods with componentWillUnmount.
[Optional section] Title Fade8:58
Optionally fade the title of the Portfolio application.
[Optional section] Stateless Functional Components8:42
Learn an alternative way to define React components with the stateless functional style.
[Optional section] HTTP Overview4:52
Optionally do a high-level overview of HTTP in order to understand how the protocol works. Learn how it's used for APIs and to request resources in the web.
[Optional section] Fetch and a Jokes Component11:31
Make a fetch call within a React application to an external API to power the data behind a new component around Jokes.
[Optional section] Challenge and Code: Ten More Jokes8:30
Take on a challenge to display ten jokes within the Jokes component.
[Optional section] Fetch Under the Hood: Promises12:00
Explore the fetch method under the hood, by diving into JavaScript promises.
[Optional section] React Router9:13
Add React Router to the project: a library which takes care of navigating the user to different components based on the url.
[Optional section] Header Component8:16
Add a reusable Header component to the project.
[Optional section] Higher Order Components11:27
Go over React higher-order components: components that take other React components as input, and output new React components with more logic, as a result.
[Optional section] Section Summary1:03

Section Preview: React Hooks Section 1 - Dive Into Hooks Development0:55
Set Up Project One6:55
First Hook: useState15:28
Explore building a React home component with hooks, using useState to manage a user query and power a Google search bar with onChange and onClick.
useEffect13:56
Explore the useEffect hook in React by fetching a random joke from the official joke API and managing local state, while preventing infinite renders with an empty dependency array.
Challenge and Code: Stories Component with UseEffect11:15
Build a Custom Hook: useFetch14:04
[Optional] Function Keyword vs Arrow Functions8:15

Section Preview: React Hooks Section 2 - Hooks Under the Hood0:51
The React Runtime and How React Applies Hooks11:08
UseState Under the Hood7:19
Tasks Component Part 1: Multiple useState hooks11:36
Create a React tasks component using multiple useState hooks to manage task text, the task list, and completed tasks. Then add and render tasks.
Tasks Component Part 28:58
The Order of UseState6:23
Local Storage for Tasks8:18
Hooks with an Interval12:15
Effects with Cleanup6:17
Dynamic Delay and Increment11:23
Challenge and Code: Matrix Component11:54
Build a Custom Hook: useDynamicTransition7:30

Section Preview: Next.js and React 18+ Project2:08
React Fundamentals and Client vs. Server Components In Depth7:32
Explore core React fundamentals and the client-server rendering split, distinguishing client components from server components, and examine Next.js coordination and build-time pre-rendering.
Start the Next.js and React Project8:41
Link to Pages with Next/Link | Grid Item17:14
Style with Tailwind CSS21:35
Next.js Fonts and Responsive Design14:43
Connect Page Setup11:03
Next.js Client Components19:53
Learn to implement Next.js client components with a Spotify follower counter using useState and useEffect, and distinguish client versus server components for optimized rendering.
Next.js Server Actions (get-followers)14:39
Refactor the followers fetch into a Next.js server action to offload execution from the client, enabling server caching, async server logic, and a follower goal.
Mailjet API post-contact Server Action and Next.js Environment Variables16:00
React 18 useTransition and Create Contact Form24:49
Next.js Layout Structure, Loading.js, and Global Components9:43
Build record pages for David Candy songs using dynamic segments in Next.js, implement a layout and loading user interface, move the spinner to a components folder, and add SEO metadata.
Next.js Dynamic Segments and generateStaticParams | record/[id]18:02
Next.js generateMetadata | record/[id]/page.js6:06
Create dynamic Next.js record pages with generate static params to render blurb and release date, and use generate metadata to set tab titles and enable Spotify embed with React suspense.
React Suspense and React lazy | Embed19:54
Next.js not-found and Route Groups13:56
Nested Dynamic Segments | record/[id]/[content]14:05
Explore nesting dynamic segments in Next.js with record/[id]/[content], generate static params for id-content pairs (lyrics or gear), and render nested content using data-driven pages and embeds.
Breadcrumbs Component and Next.js useSelectedLayoutSegments | nav-title24:41
Create a breadcrumbs component for record pages using Next.js useSelectedLayoutSegments and usePathname to derive URL segments, enabling dynamic, clickable page titles that reflect navigation.
Setup Quiz Form and (form) route group19:03
Next.js useSearchParams and Quiz result20:17
Next.js Images and Web Standards | Discography22:59
Set up the discography page with Next.js image optimization and web standards, render records with album art and play links, and enable a search powered by React 18 useDeferredValue.
React 18 useDeferredValue21:32
Next.js Deployment with Vercel4:27
Remaining Pages and Functionality5:31

Requirements

Beginners are welcome!

Description

React JS Web Development – The Essentials Bootcamp

Modern. Comprehensive. Industry-ready.

This course has been completely updated for modern React 18, Next.js, and modern JavaScript. It’s designed for both individual developers eager to advance their skills and companies and teams seeking a reliable, structured curriculum to train their engineering teams.

Since its release, this has been one of the most popular and best-rated React bootcamps on the platform - continually improved and expanded to stay ahead of the modern web ecosystem.

Why Companies and Developers Choose This Bootcamp

Up-to-date and production-focused: Covers React 18+, Hooks, Next.js, and Tailwind CSS-everything you need to build and ship real applications in 2026.
Project-driven curriculum: Each section connects directly to hands-on projects that reinforce key concepts through real implementation.
Modern engineering perspective: You’ll learn how React fits into the larger software stack-how apps are compiled, bundled, and deployed.
Proven clarity and structure: Built from years of teaching experience and thousands of successful students across engineering and DevOps courses.

What You’ll Learn

You’ll progress from React fundamentals to advanced professional workflows:

React Fundamentals – Build Your First Portfolio App: Begin coding immediately. Learn components, state, and props by creating a personal portfolio application-your first completed React project.
React Under the Hood – How Web Apps Actually Work: Go deeper by building React from scratch. Understand JSX, bundlers, the Virtual DOM, and how browser rendering connects to your code.
React Hooks – Modern Functional Development: Learn the heart of modern React: useState, useEffect, and custom hooks. Build interactive applications and reusable logic patterns.
Next.js and React 18 – Server and Client Components in Practice: Build a production-grade Next.js project with server actions, Suspense, and useTransition. Learn how modern React applications balance client-side interactivity with server-side performance.
In-Depth JavaScript – The Language Behind React: Strengthen your understanding of closures, prototypes, asynchronous code, and the JavaScript runtime. This optional section turns your React skills into engineering-level fluency.
Redux and Advanced React (Optional): Explore scalable state management and asynchronous data flow using Redux patterns found in professional-grade applications.

Why This Course Stands Out

React is the industry standard for building interactive web applications used by companies like Meta, Netflix, and Airbnb. This course doesn’t just show you what to type-it gives you the reasoning behind every pattern. You’ll learn to think like an engineer: understanding not only how to write code, but how to debug, refactor, and scale it.

That’s what makes it valuable for:

Engineering teams standardizing their React knowledge
Developers transitioning from other frameworks or roles
Individuals looking to build portfolio-ready, professional-grade applications

Feedback from Students

5-stars: “David is super knowledgeable and passionate about React-it shows in every lesson. The explanations are clear, detailed, and engaging.”

5-stars: “I’ve taken many programming courses, and this is by far the most structured and professional. You don’t just learn React-you understand it.”

5-stars: “This course bridges the gap between tutorials and real-world projects. I walked away confident I could build production-level apps.”

By the End of the Course

You’ll have:

A complete understanding of React’s fundamentals, architecture, and runtime.
Experience building, styling, and deploying applications with Next.js and React 18+.
A strong command of modern JavaScript-closures, async/await, and the event loop that powers React.
Multiple portfolio projects demonstrating real-world, deployable code.

You’ll be ready to contribute to professional React projects with confidence and clarity.

Before You Begin

You’ll need:

A computer capable of running Node.js and a text editor (VS Code recommended).
Basic familiarity with HTML, CSS, and JavaScript (the course includes refreshers where needed).

Everything else-setup, build tools, and deployment-will be covered step by step.

Build. Understand. Ship.

React remains one of the most in-demand skills in web development. By completing this course, you’ll gain the experience, technical insight, and confidence to build applications that scale-from your first React component to a fully deployed Next.js site.

Enroll today and start your journey toward mastering modern React development!

Who this course is for:

Companies and teams seeking a trusted, structured React curriculum for internal training or onboarding.
Aspiring software engineers/developers who want to learn from an engineer who has contributed to and built React applications in the industry.
Working engineers who want to see how a fellow engineer with 5+ years of full-stack experience approaches React applications.
All levels welcome, as long as you have some coding experience!
Anyone who wants a bootcamp to learn the essentials of React development.
Those looking for career opportunities in the exciting field of frontend web development.
Developers from other frameworks transitioning to React and Next.js.

React JS Web Development - The Essentials Bootcamp

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 21min

Optional Reference Content2 lectures • 25min

Welcome to React | First React Application18 lectures • 2hr 15min

Breaking down React | React and Web Development8 lectures • 1hr

[Optional section] Continued Main React Concepts14 lectures • 1hr 44min

Core React Concepts Review2 lectures • 9min

React Hooks Section 1 - Dive into Hooks Development7 lectures • 1hr 11min

React Hooks Section 2 - Hooks Under the Hood12 lectures • 1hr 44min

React Hooks Wrap-Up: Reflection on the Why of Hooks1 lecture • 5min

Next.js and React 18+ Project24 lectures • 5hr 59min

Requirements

Description

Who this course is for: