We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

React JS Web Development - The Essentials Bootcamp

David Joseph Katz

This course is completely up-to-date with React in 2023. A ton of material has been added and revised in this course. In the updated course, you’ll find additional content including:

Read more

This course is completely up-to-date with React in 2023. A ton of material has been added and revised in this course. In the updated course, you’ll find additional content including:

  • New sections on React Hooks.

  • A ton of reference content for In-Depth JavaScript walkthroughs.

  • Revised material for modern React in 2022: createRoot, root.render, modern React Router, etc.

  • Revised material for modern Redux in 2022: @reduxjs/toolkit, updates on best practices, etc.

  • Extra Github reference content, including a new commit-per-lecture guide to make sure you can troubleshoot at every step of the way in the course.

Since this course’s release, this has been one of the most popular and best-selling React bootcamps on the platform. Here are the testimonials from a handful of students who have taken the course:

  • “This course is great. David is super knowledgeable AND passionate about React and it’s obvious in the course quality. I've taken a lot of programming courses on Udemy and David is by far the best instructor I've come across. ”

  • “It is very clear and well explained. He explains every idiom related to the topic theoretically and by examples so you can have a complete idea about what is going on and why you need every file folder. The application examples are explained very clearly so you can follow up with him and get the same result. Also there is a code challenge to try if you want before seeing the answer. The course is well constructed and explained so never miss it especially if you got lost in the folder tree of react app or about its specialization. Highly recommended.”

  • “I started with some React concepts in mind and I found this course very useful. Also I am learning practical ways to do things and advance to Redux for more complex apps. I like very much the step by step, simple to complex, and practical style to explain concepts. Also, David is very nice and quickly solves any question.”

  • "David is a champ. One of the best course instructors I've ever encountered. Not only is his level of knowledge very impressive, but his timing, delivery, and tone create a very easy to follow experience. He's extremely thorough. "

With five minutes of your time, I’ll explain why this course is the best investment 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, not why examples were working, or 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.

So Why should you take this course?

I’ve applied the best practices of software I’ve learned in my software engineering career, and the feedback from my thousands of reviews in over 15 other coding courses, 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 support 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.

  • Dive into React Hooks to learn how to write React apps now and in the future. React hooks, as the new paradigm for React development, are a must in any bootcamp experience on React and frontend web development.

  • Optionally explore in-depth JavaScript. At the end of the course, you will find a trove of optional videos that will bring your JavaScript knowledge to the next level.

[2023 Update]

Also, this course contains optional content in Nextjs, React 18, and In-Depth JavaScript. Continue your learning React journey beyond hooks, here in this course.

Nextjs and React 18 are the modern ways to make a React application. In this course, you will also build a production-level Nextjs and React 18 project. During the Nextjs and React 18 project section, you will:

  • Go more into depth with server and client components.

  • Learn Nextjs server actions.

  • Explore the React 18 useTransition hook.

  • Expand upon Nextjs fundamentals, and create a shared layout structure.

  • Create dynamic segments with Nextjs and learn generateStaticParams.

  • Explore React Suspense and React lazy.

  • Dive deeper into advanced Nextjs hooks like useSelectedLayoutSegments, and useSearchParams.

  • Explore the React 18 useDeferredValue hook.

  • Learn how to deploy a Nextjs application.

Then follow with a bounty of In-Depth JavaScript content. During the In-Depth JavaScript section, you will find videos on:

* The Console, Operators, and Variables, Arrays, Objects.

* Functions - Declarations vs. Expressions, and Arrow Functions

* Methods and the `this` Keyword

* Callbacks

* A Dynamic Language and Types - "Almost Everything is an Object"

* Equality and Type Coercion

* Let, Const, Mutability, Var, and Scope

* Interview Question | Scope and Hoisting

* Template Literals and Ternary Operators

* The Property Shorthand and Destructuring Assignment

* JSON parse, JSON stringify, Custom and Lodash CloneDeep

* Closures

* Function Factories, and Higher Order Functions

* Prototypes and the Prototype-Based Inheritance, Object Prototype, proto, and the prototype chain

* Asynchronous Code with SetTimeout

* Fetch and Promise from Scratch

* JavaScript Engine and Runtime

* Await and Async

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

See you in the course.

Enroll now

What's inside

Learning objectives

  • Updated for 2022-2023: learn how to code with react, redux, react hooks, 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 2022-2023: modern syntax and best practices.
  • Modern react in 2022-2023: createstore, functional components, etc.
  • React hooks in 2023-2023 - 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 2022-2023 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.
  • Show more
  • Show less

Syllabus

Introduction

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

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

Read more

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

Optional For Windows: Install the Windows Subsystem for Linux and VS Code
Optional Reference Content
Optional Mega JavaScript Overview Part 1
Optional Mega JavaScript Overview Part 2
Welcome to React | First React Application

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

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

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

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

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.

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

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

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

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

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

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

Add a second component to Portfolio project for Projects.

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

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

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

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

Section Summary
Breaking down React | React and Web Development
Section Overview

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

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

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

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

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.

Continued Main React Concepts
Section Preview

Understand lifecycle methods and their purpose, starting with componentDidMount.

Continue the exploration of lifecycle methods with componentWillUnmount.

Optionally fade the title of the Portfolio application.

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

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.

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

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

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

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

Add a reusable Header component to the project.

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.

Core React Concepts Review

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

Core React - Glossary of Key Terms
Core React Project: MusicMaster 2.0
Section and Project Preview

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

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

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

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

Build a Tracks component for the MusicMaster project.

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

Apply finishing touches around style to MusicMaster.

Add MusicMaster to the Portfolio project.

Redux and More Advanced React - Sequel Preview
Redux Overview
Set Up Evens or Odds and the Redux Store | Revised
Reducers | Revised
Actions | Revised
Action Creators | Revised
Root Reducer Update and the Spread Operator | Revised
Split the Redux Layers | Revised
Connect React Components to Redux | Revised
Redux-based UI
Map Dispatch to Props
Challenge and Code: Interactive Instructions
Fetch Deck of Cards
Note: The deckofcardsapi updated their CORS policy
CORS and Same Origin Policy
Async Actions
Redux Middleware | Revised
Handle Fetch Cases
Split up and Combine Reducers | Revised
DrawCard Component
Challenge and Code: Draw Card Redux Flow
Challenge and Code: Card Component
Challenge and Code: Guess Redux Logic and Component | Revised
Track Correct Guesses
Correct Guess Record and Local Storage
Include Evens or Odds in Portfolio | Revised
React Hooks Section 1 - Dive into Hooks Development
Project One Preview
Set Up Project One | Revised
First Hook: useState | Revised
useEffect
Challenge and Code: Stories Component with UseEffect | Revised
Build a Custom Hook: useFetch
[Optional] Function Keyword vs Arrow Functions
React Hooks Section 2 - Hooks Under the Hood
Section Preview - Hooks Under the Hood
The React Runtime and How React Applies Hooks

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Explores industry-standard techniques, including React, Redux, and React Hooks
Teaches React the right way and shares best practices from an engineer with 5+ years of industry experience
Develops foundational and advanced React skills, core for front-end web development
Taught by David Joseph Katz, an experienced software engineer recognized for their work in web development and React
Examines React within the context of web development, providing a comprehensive understanding of front-end architecture
Advises students to take other courses before this one as prerequisites

Save this course

Save React JS Web Development - The Essentials Bootcamp to your list so you can find it easily later:
Save

Reviews summary

Introductory react course with room for improvement

Learners say this course is an acceptable introduction to React. It has engaging assignments but doesn't go into enough detail to help learners who are very new to programming. The instructor is knowledgeable, and the course covers topics that are fundamental. However, several learners mention struggling to grasp these fundamentals and felt that the course could be improved by going over each topic in greater depth for beginners.
Students enjoy the assignments.
"I enjoyed the assignments."
The material is not detailed enough for some.
"I still need to grasp the fundamentals which I believe comes with practice."
"This course is a great introduction to React hitting the different things needed."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React JS Web Development - The Essentials Bootcamp with these activities:
Find a React Mentor
Connect with experienced React developers who can provide guidance and support throughout your learning journey.
Browse courses on React
Show steps
  • Identify potential mentors through online forums, social media, or professional networking events.
  • Reach out to potential mentors and introduce yourself.
  • Explain your goals and interests in learning React.
  • Be respectful of their time and availability.
  • Build a relationship based on mutual respect and open communication.
Organize Course Materials
Stay organized and improve your learning experience by compiling course materials effectively.
Show steps
  • Create a system for organizing notes, assignments, and other course materials.
  • Use a digital note-taking app or physical notebook to keep track of your notes.
  • Store assignments and other course materials in a dedicated folder on your computer.
  • Review your organized materials regularly to reinforce your understanding.
  • Consider sharing your organized materials with peers to contribute to a collaborative learning environment.
Review JavaScript Fundamentals
Ensure you have a solid foundation in JavaScript before diving into React.
Browse courses on JavaScript
Show steps
  • Review online tutorials or documentation on JavaScript fundamentals.
  • Practice writing basic JavaScript code snippets.
  • Take online quizzes or tests to assess your understanding.
  • Complete small JavaScript coding challenges.
  • Collaborate with peers to discuss JavaScript concepts and best practices.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Join a React Study Group
Collaborate with peers to discuss concepts, share knowledge, and work through challenges.
Browse courses on React
Show steps
  • Find or create a study group with other students taking the same course or interested in learning React.
  • Set regular meeting times and stick to them.
  • Review course material before each meeting to prepare for discussions.
  • Take turns leading discussions and presenting on different topics.
  • Work together on practice problems and projects.
Follow React Tutorial Series
Supplement your learning by following a structured tutorial series that provides step-by-step guidance.
Browse courses on React
Show steps
  • Choose a reputable tutorial series that covers the topics you want to learn.
  • Set aside dedicated time each week to work through the tutorials.
  • Take notes and experiment with the code examples provided in the tutorials.
  • Build small projects to apply what you've learned.
  • Join online forums or communities to connect with other learners and get help when needed.
Complete Practice Problems
Reinforce your understanding of the concepts covered in the course by solving practice problems.
Browse courses on React
Show steps
  • Review the course material and identify areas where you need more practice.
  • Find online or textbook practice problems that cover those areas.
  • Set aside dedicated time to work through the practice problems.
  • Review your answers and identify any areas where you made mistakes.
  • Repeat steps 2-4 until you feel confident in your understanding of the concepts.
Create a React Application
Deepen your understanding by building a practical React application from scratch.
Browse courses on React
Show steps
  • Plan the features and functionality of your application.
  • Set up a development environment and install the necessary tools.
  • Write the code for your application, following best practices and design patterns.
  • Test your application thoroughly to ensure it works as expected.
  • Deploy your application to a hosting platform so that others can access it.
Contribute to an Open-Source React Project
Gain practical experience and contribute to the React community by participating in open-source projects.
Browse courses on React
Show steps
  • Identify open-source React projects that align with your interests and skills.
  • Familiarize yourself with the project's documentation and codebase.
  • Make small contributions to the project, such as fixing bugs or adding features.
  • Collaborate with other contributors and follow the project's development process.
  • Share your experiences and lessons learned from contributing to the open-source project with peers.

Career center

Learners who complete React JS Web Development - The Essentials Bootcamp will develop knowledge and skills that may be useful to these careers:
React Developer
React Developers design and create user interfaces for web applications. They use React JS, a JavaScript library, to build interactive and responsive user interfaces. This course can teach you how to use React JS to build React applications. This can help you to become a more marketable React Developer.
Front-End Web Developer
Front End Web Developers design and create the parts of a website that users can see and interact with. They use HTML, CSS, and JavaScript to create interactive web pages. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build front end applications. This can help you to become a more marketable Front End Web Developer.
Web Developer
Web Developers design and create websites. They use HTML, CSS, and JavaScript to create interactive web pages. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build web applications. This can help you to become a more marketable Web Developer.
Front-End Engineer
Front End Engineers develop the parts of a website that users can see and interact with. They use HTML, CSS, and JavaScript to create interactive web pages. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build front end applications. This can help you to become a more marketable Front End Engineer.
JavaScript Developer
JavaScript Developers design and create websites and web applications. They use JavaScript, a programming language, to build interactive and responsive web applications. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build JavaScript applications. This can help you to become a more marketable JavaScript Developer.
UI Developer
UI Developers design and create the user interface for websites and web applications. They use HTML, CSS, and JavaScript to create interactive and responsive user interfaces. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build user interfaces. This can help you to become a more marketable UI Developer.
Full-Stack Developer
Full Stack Developers design and create websites and web applications. They work on both the front end and the back end of a website. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build full stack applications. This can help you to become a more marketable Full Stack Developer.
Software Developer
Software Developers design, develop, and maintain software systems. They use a variety of programming languages and technologies to build software applications. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build software applications. This can help you to become a more marketable Software Developer.
Web Designer
Web Designers design and create the look and feel of websites. They use HTML, CSS, and JavaScript to create visually appealing and user-friendly websites. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build websites. This can help you to become a more marketable Web Designer.
Software Engineer
Software Engineers design, develop, and maintain software systems. They use a variety of programming languages and technologies to build software applications. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build software applications. This can help you to become a more marketable Software Engineer.
UX Designer
UX Designers design and create the user experience for websites and web applications. They focus on making sure that websites are easy to use and navigate. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build user experiences. This can help you to become a more marketable UX Designer.
Junior Software Engineer
Junior Software Engineers design, develop, and maintain software systems. They work under the supervision of a more senior engineer. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course can teach you how to use React JS to build software applications. This can help you to become a more marketable Junior Software Engineer.
Back-End Web Developer
Back End Web Developers design and create the parts of a website that users cannot see. They use programming languages such as Java, Python, and C++ to build the server-side of a website. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course may teach you some of the skills needed to become a Back End Web Developer.
Mobile App Developer
Mobile App Developers design and create mobile applications. They use programming languages such as Java, Kotlin, and Swift to build mobile apps for iOS and Android devices. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course may teach you some of the skills needed to become a Mobile App Developer.
Data Scientist
Data Scientists use data to build models and make predictions. They use programming languages such as Python and R to analyze data. React JS is a JavaScript library that is used by many companies because it makes it easier to build complex, responsive user interfaces. This course may teach you some of the skills needed to become a Data Scientist.

Reading list

We've selected eight books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in React JS Web Development - The Essentials Bootcamp.
Comprehensively covers React concepts. It serves as both a great starting point for beginners and a valuable reference guide. It delves into advanced topics such as performance optimization and testing, making it suitable for those who want to deepen their understanding of React.
Provides a deep dive into JavaScript, which is important for understanding React. It covers advanced concepts such as closures, prototypes, and functional programming, which are essential for writing effective React applications.
Comprehensive reference guide for JavaScript. It covers the latest features of JavaScript including ES6 and beyond, making it a valuable resource for those who want to deepen their understanding of the language.
Offers a collection of reusable patterns for solving common challenges in React development. It provides practical solutions and best practices for handling state management, performance optimization, and asynchronous operations in React applications.
Focuses on the good parts of JavaScript, highlighting best practices and patterns for writing clean and efficient code. It's suitable for those who want to deepen their understanding of JavaScript fundamentals and apply them in React development.
Practical guide to learning React. It delves into topics like component lifecycle, state management, and testing. It's suitable for beginners to React and those who want to strengthen their knowledge of foundational concepts.
Focuses on the latest features of JavaScript, known as ECMAScript 6 or ES6. It provides a thorough explanation of new concepts such as arrow functions, classes, and modules, which are particularly relevant for writing modern React applications.
This guide covers React concepts from the basics, making it suitable for beginners to React as well as those supplementing the current course. It covers foundational concepts and helps one strengthen their foundational knowledge of React.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to React JS Web Development - The Essentials Bootcamp.
React Hooks Tutorial - Master React Hooks Development
Most relevant
React JS - Mastering Redux
Most relevant
Next.js 14 & React - The Complete Guide
Most relevant
Code Faster with Tabnine: Optimise a NextJS Application
Most relevant
SvelteKit Framework by Example: Full-Stack Ecommerce...
Most relevant
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
Working with React and Go (Golang)
Most relevant
Hello React - React Training for JavaScript Beginners
Most relevant
Master Next.js 14 - Full-Stack Complete Guide
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser