React JS Web Development - The Essentials Bootcamp
4.4 (3,982 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
60,785 students enrolled

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!
4.4 (3,982 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
60,785 students enrolled
Created by David Joseph Katz
Last updated 8/2019
English [Auto-generated], Portuguese [Auto-generated], 2 more
  • Spanish [Auto-generated]
  • Turkish [Auto-generated]
Current price: $41.99 Original price: $59.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 19 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
Course content
Expand all 125 lectures 10:48:46
+ Introduction
3 lectures 12:20

Overview of the course curriculum, and what you'll learn by taking it.

Preview 04:12

An overarching view of web development, and how React.js fits into that picture.

Preview 07:18

Provides important information including the course repository, and software installation links.

[IMPORTANT] Course Repo and Software Installations
+ Welcome to React | First React Application
17 lectures 01:58:26

Overview of the first section on creating the first React application.

Preview 02:51

Set up the portfolio application - the first project of the course.

Preview 04:22

Run the React application set up in the previous video, and go over the project structure.

Preview 09:56

Understand essential aspects of React, including the ReactDOM, elements, and JSX.

Preview 05:52

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.

Preview 06:15

An overview of JavaScript classes - a prerequisite for building React components using classes.

Preview 03:25

An exploration of classes, JavaScript class-based inheritance, and an investigation of React.component.

Preview 10:54

An exploration of React component state: the dynamic data contained within a React component.

Preview 09:12

An introduction to the `setState` method: the way to update state in a React component.

Preview 09:46

An explanation of one of the golden rules of react: never directly modify the state object in the component.

Preview 06:44

Refactor the class to use properties and initializers to follow the best practices of JavaScript.

Preview 03:40

Add a second component to Portfolio project for Projects.

Preview 12:25

Explore React component props: the way data is passed from a parent React component to a child React component.

Preview 08:40

Take on a challenge to build a new React component for Social Profiles.

Preview 04:28

An implementation of the Social Profiles component - a follow up to the previous challenge to build this component.

Preview 06:52

Wrap up the Portfolio project by following up on some low hanging fruit to clean up the code.

Preview 11:59
Section Summary
+ Breaking down React | React and Web Development
7 lectures 49:07

Explore React more thoroughly from a truly ground 0 "from scratch" perspective.

Preview 10:26

Understand compiling and bundling JavaScript code for React projects. Investigate JSX more deeply.

Preview 11:25

Refactor the Portfolio project to use the Parcel build tool to accomplish bundling.

Preview 09:44

Understand the reasons why bundlers and transpilers for JavaScript and React applications are necessary.

Preview 04:59

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.

Preview 07:37
Section Summary
+ Continued Main React Concepts
13 lectures 01:39:25

Understand lifecycle methods and their purpose, starting with componentDidMount.

Lifecycle Methods and componentDidMount

Continue the exploration of lifecycle methods with componentWillUnmount.


Optionally fade the title of the Portfolio application.

[Optional] Title Fade

Learn an alternative way to define React components with the stateless functional style.

Stateless Functional Components

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] HTTP Overview

Make a fetch call within a React application to an external API to power the data behind a new component around Jokes.

Fetch and a Jokes Component

Take on a challenge to display ten jokes within the Jokes component.

Challenge and Code: Ten More Jokes

Explore the fetch method under the hood, by diving into JavaScript promises.

Fetch Under the Hood: Promises

Add React Router to the project: a library which takes care of navigating the user to different components based on the url.

React Router

Add a reusable Header component to the project.

Header Component

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.

Higher Order Components
+ Core React Concepts Review
2 lectures 08:34

Review the core concepts of React that were introduced and explained in the previous sections.

Core React Review
Core React - Glossary of Key Terms
+ Core React Project: MusicMaster 2.0
10 lectures 01:17:09
Section and Project Preview

Set up the music master application - the next project of the course!

Set up Music Master and Your Own React App Template

Track the input of a user within fields in the state object of the React component.

Track User Input in the State

Take on a challenge to search on artist's top tracks, and display them in the application.

Challenge and Code: Search an Artist’s Top Tracks

Take on a challenge to build an Artist component for the MusicMaster project.

Challenge and Code: Artist Component

Build a Tracks component for the MusicMaster project.

Tracks Component

Create a Search component for the MusicMaster project, and learn about the approach of lifting state up through components in a React application.

Search Component and Lifting State Up in Callback Props

Apply finishing touches around style to MusicMaster.

Styling Finishing Touches

Add MusicMaster to the Portfolio project.

Include Music Master in Portfolio
Section Summary
+ Conclusion and Course Sequel
3 lectures 08:29
Congratulations and Course Sequel
Redux Overview [Redux Bootcamp Preview]
Bonus Content!
+ [Deprecated] Building CountdownChamp - Your First React Application
16 lectures 51:51
Updating State
Changing Data with the Input Field
Creating a Clock Component
Introducing Props
Calculating Time Until
Hooking with LifeCycle Methods
Adding Helper Methods with Ternary Expressions
Styling with React Bootstrap
Summary and Challenges
+ [Deprecated] Building MusicMaster - with an API
17 lectures 01:10:44
Setting Up MusicMaster
Creating the App Component
Styling with Bootstrap
Searching for Artists
Coding Break: Web Requests
Preparing a Web Request
Fetching Data with a Url
Building the Artist Profile
Styling New Components with CSS
Expanding the Fetch Request
Building a Gallery
Playing Audio with JavaScript
Pausing a Track
Animated Styling
Summary and Challenges
  • Familiarity with JavaScript, HTML, and CSS will help.


As of January 2019, this course has been completely updated with all new material!

The new content follows all the best practices of modern React development, and will take you even deeper into the React engine. There is a far better exploration of where React fits in the overall big picture of web development. And just like before, the course will teach how to create React applications as you build your own React projects along with the tutorial.


Want to learn how to create React applications the right way?

With five minutes of your time, I’ll explain why this course is the best invesment of time you can make to learn how to code React apps.


When I was first learning web development and software engineering, I used courses, tutorials, stackoverflow threads, and public github projects. It was invigorating - teaching myself the skills that would start a career.

But I often found that tutorials only showed me what methods to use. I had to piece together examples, trying to figure out why examples were working - why bugs were popping up. Even when I found a code fix, there was often that missing layer of how the update addressed the problem.

It was a grind, and the learning process could have been more efficient with better resources.

Fast forward five years, and I’m working as a full-stack software engineer at Zendesk in San Francisco. I often think back to those first couple years teaching myself web development.

The resources could have been better, more efficient, giving me not only what to write, but why the fix addresses the issue, and how the code works under the hood.

So that is what I’ve created in this course. A React learning experience that will give you all three of those important aspects to understanding code: what methods to use, why to use those methods, and how those methods work under the hood.


I really believe that taking this course will be a valuable investment of your time.

I’m making the first couple sections free to preview. Even if you only end up doing this free content, you’ll walk away with a complete React application, and a lot of valuable lessons learned.


Why take this course from me?

As mentioned before, I’m a full-stack software engineer working at Zendesk in San Francisco. I’ve also released 15 courses (a lot of them on React), with more than 170,000 students from 192 countries so far.

I’ve applied the best practices of software I’ve learned in my career, and the feedback from my thousands of reviews, to craft the best learning experience possible for you in this course. You’ll find a healthy balance of conceptual theory, and practical hands-on experience. You’ll gain skills right from the get-go in the first section. And you’ll build interesting and relevant projects throughout the course.


In this course, you will:

  • Dive into React code right away. You will gain relevant experience as soon as the first section. Time is precious. And I want to make sure that you’ll never feel like you’re wasting it in this course. So in a matter of minutes, you will be writing React code in the first section, with a fully completed app by the end of it.

  • Understand how React fits in the big picture of web development. In the second section, you will take an important step back and examine how React fits in the big picture of web development. You’ll build a React project from scratch - discovering all the layers that are in between the supplies that supports the React app, and the browser which displays the React app.

  • Create relevant and compelling React apps. I’m betting you’ll find the apps both useful and interesting. Useful ones like the portfolio app will help you both learn React, and be valuable as a completed project for your software engineering and web developer profile. Fun ones like “Music Master”, will make coding lively, giving you apps you want to show off to your friends and family.


In summary, you should take this course if you want to learn React in a time-efficient way, while building relevant and engaging projects.

Once again, the first couple sections are free to preview. And even if you only complete the free content, you’ll walk away with a full React app, and lots of valuable lessons learned.

See you there!

Who this course is for:
  • All levels welcome. However this won’t introduce coding from the ground up, so this might feel fast-paced for completely new students.
  • Anyone who wants a bootcamp to learn the essentials of React development.
  • Those looking for career opportunity in the exciting field of frontend web development.