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

React JS and Redux Bootcamp - Master React Web Development

David Joseph Katz

Want to learn React and Redux applications the right way?

Give my five minutes of your time, and I’ll explain why this course is the best time investment you can make to learn how to code React and Redux apps.

Read more

Want to learn React and Redux applications the right way?

Give my five minutes of your time, and I’ll explain why this course is the best time investment you can make to learn how to code React and Redux 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. 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 should have given 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 and Redux 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 want to ensure that even reading this description is a good use of time. So I'm letting you know:

The first couple sections are free to preview.

I believe that if you only end up doing this free content, you’ll still 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.

  • Learn Redux the right way, breaking it down. Redux is a must with React. But it has a much higher learning curve, since the concepts are more complex. In this course, every Redux method is going to be taken one step at a time. You’ll dig deeper into how the methods work under the hood. You’ll learn more than what methods to use. You’ll learn how those methods work individually and together. And you’ll learn why methods are written in a certain way, and when they should be applied. That way, you have the deep understanding that will empower you to write React and Redux apps long into the future.

  • Build more awesome apps. As you learn redux in the later sections, the projects will remain interesting and relevant. You’ll make a mini React game, using an external API. And you’ll create a React app that has multi-user functionality. Supporting multiple users is a staple of so many web applications - but can be surprisingly hard to pull off. But you’ll find the solution in this course both elegant and extendable.

  • Explore backend web development. I think it’s important to learn essential backend skills as a React and web application developer. With React app, you’re often using APIs to supply the content of your application. So having the ability to create your own backends, and APIs, will give you the capability to make React apps of any kind, for your own unique use cases, long after you complete this course.

  • Deploy your React applications. The projects you create in this course will be deployed to production. That way, you can share your the products of your work with anyone you like.

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

Once again, the first couple sections are free to preview. 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.

Promo music provided by Ben Sound.

Enroll now

What's inside

Learning objectives

  • Updated for 2022-2023: learn how to code with react js, redux, and react hooks from an engineer with 5+ years of industry experience.
  • 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.
  • Show more
  • Show less

Syllabus

Introduction
What You’ll Get From Taking this Course
A 7m Overview of Web Development and React
[IMPORTANT] Course Repo and Software Installations
Read more
Optional For Windows: Install the Windows Subsystem for Linux and VSCode
Welcome to React | First React Application
Section Overview | First React Application
Set up the Portfolio App - Revised
Run the React App and the React Project Structure - Revised
ReactDOM, Elements, and JSX - Revised
A React Component - Revised
Classes - Overview
Classes, Inheritance, and a Closer Component Look
State
SetState
A React Rule: Never Directly Modify State
Class Properties and Initializers
Component 2: Projects
Props and Project Component
Challenge: Social Profiles Component
Code: Social Profiles Component
Wrap up with Low-Hanging Styling Fruit
Section Summary
Breaking down React | React and Web Development
Section Overview
React from Scratch - Revised
Compiling, Bundling, and a Closer Look at JSX - Revised
Refactor the Portfolio to use Parcel - Revised
The Necessity of Bundlers and Transpilers Review
The DOM and React’s Virtual DOM
Continued Main React Concepts
Section Preview
Lifecycle Methods and componentDidMount
ComponentWillUnmount
[Optional] Title Fade
Stateless Functional Components
[Optional] HTTP Overview
Fetch and a Jokes Component
Challenge and Code: Ten More Jokes
Fetch Under the Hood: Promises
React Router - Revised
Header Component - Revised
Higher Order Components - Revised
Core React Project: MusicMaster 2.0
Section and Project Preview
Set up Music Master and Your Own React App Template - Revised
Track User Input in the State
Challenge and Code: Search an Artist’s Top Tracks
Challenge and Code: Artist Component
Tracks Component
Search Component and Lifting State Up in Callback Props
Styling Finishing Touches
Include Music Master in Portfolio - Revised
Core React Concepts Review
Core React Review
Core React - Glossary of Key Terms
Redux and more Advanced React
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
Redux Project: Reaction
Publish/Subscribe with Redux
Set Up the Reaction App
PubNub Exploration
PubSub Class and Redux Connection
Messages Redux Flow
Publish Message Component
React Context
Redux Devtools
Challenge and Code: Message Board Component
Challenge and Code: Username in Redux
Username in Messages

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Explores modern React concepts like functional components, hooks, and context
Develops solid foundational skills in React and JavaScript
Teaches essential back-end skills that complement React development
Suitable for beginners with some coding experience and those looking to strengthen their React foundation

Save this course

Save React JS and Redux Bootcamp - Master React Web Development to your list so you can find it easily later:
Save

Reviews summary

Easy to understand react course

Learners say this course makes learning React easy and understandable with its engaging assignments.
Most learners found this course to be helpful, easy to understand, and informative.
"Thank you for making the course. It's very instructive and easy to understand React"

Activities

Coming soon We're preparing activities for React JS and Redux Bootcamp - Master React Web Development. These are activities you can do either before, during, or after a course.

Career center

Learners who complete React JS and Redux Bootcamp - Master React Web Development will develop knowledge and skills that may be useful to these careers:
Front-End Developer
Front-End Developers work primarily with the appearance and functionality of websites. By learning more about React and Redux in this course, you will be better prepared to work with these tools to build dynamic and responsive online applications. A firm understanding of both React and Redux is instrumental to the success of any Front-End Developer.
Software Developer
Software Developers are responsible for making computer programs; this includes designing, coding, and testing these programs. Taking this course may improve your chances of becoming a qualified candidate as it teaches many of the skills and knowledge required to succeed in such a role. In particular, the course covers core concepts in React and Redux, which are popular JavaScript frameworks used in modern web development.
Computer Programmer
Computer Programmers write, test, and maintain computer programs; this can include developing web applications. By taking this course and understanding React and Redux, you may be better able to develop effective and efficient web applications.
Web Developer
Web Developers research, design, and implement websites and web applications. This course may be useful in helping you to build a foundation in the skills and knowledge needed to succeed as a Web Developer. Many of the concepts and tools covered in this course are commonly used by Web Developers.
Software Engineer
Software Engineers apply engineering principles to software development. This course may help you learn the skills needed for a career as a Software Engineer by helping you understand the principles of React and Redux, which are used to develop and maintain software applications.
Mobile Developer
Mobile Developers design, develop, and implement applications for mobile devices. While this course focuses on web development, many of the skills, such as React Hooks, Redux, and deployment, are also useful for mobile app development.
Back-End Developer
Back-End Developers are responsible for a website's functionality; they write the code that makes it possible to interact with and use websites. Though this course primarily covers front-end concepts such as React and Redux, by taking it you will be better prepared to collaborate with Back-End Developers and understand their work.
Full-Stack Developer
Full-Stack Developers are responsible for both the front-end and back-end development of websites and applications. This course may be particularly useful for Full-Stack Developers who plan to use React and Redux in their work. It teaches the fundamentals of both tools as well as how to implement them.
Information Architect
Information Architects design the structure and organization of websites and applications. While this course focuses on the technical implementation of websites, the skills and knowledge gained, such as understanding how users interact with websites, can be useful for Information Architects.
Technical Support Specialist
Technical Support Specialists provide support to users of computer systems and software. While this course focuses on the technical implementation of websites, the skills and knowledge gained, such as understanding how users interact with websites, can be useful for Technical Support Specialists.
Cloud Engineer
Cloud Engineers design, build, and maintain cloud computing systems. Though this course focuses on front-end development, by taking it you will be better prepared to collaborate with Cloud Engineers when deploying React applications.
Technical Writer
Technical Writers create and maintain technical documentation. While this course focuses on the technical implementation of websites, the skills and knowledge gained, such as understanding how software works, can be useful for Technical Writers.
UI/UX Designer
UI/UX Designers focus on the user experience of websites and applications. While this course focuses on the functionality of web applications, the skills and knowledge gained, such as understanding how users interact with websites, can be useful for UI/UX Designers.
Data Analyst
Data Analysts collect, clean, and analyze data to provide insights. While this course focuses on building web applications, the skills and knowledge gained, such as state management and data fetching, can be useful for Data Analysts, as they often collaborate with software developers.
Product Manager
Product Managers define the vision and roadmap for products. While this course is not directly related to product management, it may be helpful for Product Managers who plan to work on products that involve web development, as it will enable them to better understand the product development process with React and Redux.

Reading list

We've selected six 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 and Redux Bootcamp - Master React Web Development.
Provides a comprehensive guide to React, covering both the basics and advanced topics. It valuable resource for beginners and experienced React developers alike.
Provides a comprehensive guide to Redux, the state management library for React. It valuable resource for beginners and experienced Redux developers alike.
Provides a comprehensive guide to JavaScript. It covers the basics of JavaScript, as well as more advanced topics such as JavaScript objects and JavaScript functions.
Provides a comprehensive guide to learning React. It covers the basics of React, as well as more advanced topics such as Redux and React Router.
Provides a comprehensive guide to functional programming for JavaScript developers. It covers the basics of functional programming, as well as more advanced topics such as monads and recursion.

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 and Redux Bootcamp - Master React Web Development.
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