We may earn an affiliate commission when you visit our partners.
Course image
Andrei Neagoie and Yihua Zhang

Just FULLY updated and re-recorded with all new React features (React v18). Join a live online community of over 900,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js. Using the latest version of React (React 18), this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple

Read more

Just FULLY updated and re-recorded with all new React features (React v18). Join a live online community of over 900,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with React.js. Using the latest version of React (React 18), this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple

We guarantee you this is the most comprehensive online resource on React. This project based course will introduce you to all of the modern toolchain of a React developer. Along the way, we will build a massive e-commerce application similar to Shopify using React, Redux, React Hooks, React Suspense, React Router, GraphQL, Context API, Firebase, Redux-Saga, Stripe + more. This is going to be a full stack app (MERN stack), using Firebase.

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional React project all the way into production. We will start from the very beginning by teaching you React Basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future ReactJS projects.

All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up for the course will have their own project to put on their portfolio right away.The topics covered will be:

- React Basics

- React Router

- Redux

- Redux Saga

- Asynchronous Redux

- React Hooks

- Context API

- React Suspense + React Lazy

- Firebase

- Stripe API

- Styled-Components

- GraphQL

- Apollo

- PWAs

- React Performance

- React Design Patterns

- Testing with Jest and Snapshot testing

- React Best Practices

- Persistance + Session Storage

- State Normalization

+ more

Wait wait… I know what you’re thinking. Why aren’t we building 10+ projects? Well, here’s the truth: Most courses teach you React and do just that. They show you how to get started, build 10 projects that are simple and easy to build in a day, and just add some CSS to make them look fancy. In real life though, you’re not building silly applications. When you apply to jobs, nobody is going to care that you built a really pretty To Do app. Employers want to see you build large apps that can scale, that have good architecture, and that can be deployed to production.

Let me tell you 3 reasons why this course is different from any other React tutorial online:

1. You will build the biggest project you will see in any course. This type of project would take you months to implement yourself.

2. This course is taught by 2 instructors that have actually worked for some of the biggest tech firms using React in production. Yihua has been working on some of the biggest e-commerce websites that you have definitely heard of and probably have shopped at. Andrei has worked on enterprise level React applications for large IPOed tech firms in Silicon Valley as well as Toronto. By having both of them teach, you get to see different perspective and learn from 2 senior developers as if you are working at a company together.

3. We learn principles that are important beyond just what you learn as a beginner. Using the instructor's experiences you learn about design patterns, how to architect your app, organize your code, structure your folders, and how to think about performance. Let’s just say we don’t shy away from the advanced topics.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No. This course will push you and challenge you to go from an absolute beginner in React to someone that is in the top 10% of React developers. 

Taught By:

Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan.. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the courses. Yihua Zhang is one of the Instructors of Zero To Mastery, one of the highest rated and fastest growing Web Development academies on Udemy. He has been working as a software developer for numerous years in Toronto for some of the largest tech companies in the world. He has also been working as an instructor for more than a decade. He is focused on bringing everything he has learned to help you achieve a new career as a developer, but also give you all the fundamental skills required to flourish in this incredible industry.

Yihua is a self taught developer, so he fully understands the challenges and mindset of coming into this industry from various other backgrounds. He has been on both sides of the table, as both an instructor and student numerous times so he can empathize with the difficulty of learning something new and challenging. Learning itself is a skill that needs to be practiced and improved upon, and he is dedicated to helping you improve and master that skill for yourself. Courses need to be practical, you need to be able to understand why you are learning the things that you are being taught. You need to understand the problem before you know the solution, and he prides himself on teaching you how to build professional, real world applications so you truly understand why you are doing things a specific way. He will teach you the mindset and skillset required to grow as a developer as fast as possible, so you can have the rich and fulfilling life that comes with this career.

Yihua's courses will guide you to build beautifully written and richly featured applications, while truly understanding all the complex concepts you will encounter along the way.

Enroll now

What's inside

Learning objectives

  • Build enterprise level react applications and deploy to production (using react 18!)
  • Learn to build reactive, performant, large scale applications like a senior developer
  • Learn the latest features in react including hooks, context api, suspense, react lazy + more
  • Master the latest ecosystem of a react developer from scratch
  • Become the top 10% reactjs developer
  • Using graphql as a react developer
  • Use redux, redux thunk and redux saga in your applications
  • Learn to compare tradeoffs when it comes to different state management
  • Set up authentication and user accounts
  • Use firebase to build full stack applications
  • Learn to lead react projects by making good architecture decisions and helping others on your team
  • Master react design patterns
  • Learn css in js with styled-components
  • Routing with react router
  • Converting apps to progressive web apps
  • Testing your application with jest, enzyme and snapshot testing
  • Handling online payments with stripe api
  • Using the latest es6/es7/es8/es9/es10/es11 javascript to write clean code
  • Show more
  • Show less

Syllabus

Introduction
Course Outline
Join Our Online Classroom!
Exercise: Meet Your Classmates & Instructor
Read more
ZTM Resources
Monthly Coding Challenges, Free Resources and Guides
React Key Concepts
React Concepts
The Birth of React.js

Imperative programming is a way to write code in a manner that has clear instructions and order using control flow: Do this, then do that, then do this. With Imperative programming you tell the machine exactly the steps to take to accomplish a task. Declarative programming on the other hand, is a way to write code by describing what you want done, without writing each step and control flow. Example: jQuery is very imperative, while React.js is very declarative.

Component Architecture
One Way Data Flow
UI Library
How To Be A Great React Developer
Web Developer Monthly
React Basics
Section Overview
Course Guideline + Code
Environment Setup for Mac
Environment Setup For Windows
NPM vs YARN
Yihua's VSCode font and settings
VSCode settings update
Create React App - NPX
Create React App - React-Scripts 1
Create React App - React-Scripts 2
Create React App - Everything Else
Don't Eject
Hooks vs Classes
Quick note: React 18 Strict Mode
Monsters Rolodex - Class Components
Monsters Rolodex - Component State
Monsters Rolodex - setState
Monsters Rolodex - States and Shallow Merge
Monsters Rolodex - setState and Secondary Callback
Monsters Rolodex - Mapping Arrays to Elements
Optional: map() + key attribute
Monsters Rolodex - Keys for Mapping
Monsters Rolodex - Single Page Applications (SPAs)
Monsters Rolodex - Lifecycle Method: componentDidMount
Optional: Promises
Monsters Rolodex - Renders & Re-renders in React
Monsters Rolodex - Input Search Box Component
Monsters Rolodex - Searching & Filtering
Optional: filter(), includes()
Monsters Rolodex - Storing Original Data
Monsters Rolodex - Optimizations
Monsters Rolodex - Understanding Components
Monsters Rolodex - CardList Component
Monsters Rolodex - Component Props
Monsters Rolodex - Rendering and Re-rendering part 2
Monsters Rolodex - SearchBox Component
Monsters Rolodex - CSS in React
Quick note on quotes for string interpolation
Monsters Rolodex - Finishing Touches
Functional vs Class Components
Class Component Lifecycle Methods Breakdown
Monsters Rolodex - Functional Component Intro
Pure & Impure Functions
Monsters Rolodex - Hooks: useState
Monsters Rolodex - Functional Component Re-rendering
Monsters Rolodex - Infinite Re-rendering
Monsters Rolodex - Hooks: useEffect
Monsters Rolodex - Remaining Components
React v18: Migrating from React v17 + ReactDOM v18 Changes
React v18: Strict Mode Changes
DOM and Virtual DOM
React and ReactDOM
React and ReactDOM part 2
ReactDOM v18 Changes
DOM Paint Flashing
Optional: Git + Github
Optional: Connecting With SSH To Github
Capstone Project: Intro + Setup
Endorsements On LinkedIN
Github Strategy
The Long Road Ahead
Project Overview
Scaffolding Our Capstone Project
Setting Up Our Categories
Adding Sass
Category Item Component
Directory Component
Adding Fonts
Routing + React-Router
Routing
Updating/Upgrading Libraries
Setting Up Our Homepage
React Router Outlet
Navigation Bar Component
React Router Link
Styling for Navigation + Logo
Authentication + Firebase
Setting Up Firebase
Authentication Flow
Optional: Async Await
Optional: How to fix 403: restricted_client error
Authenticating With Firebase
Introducing Firestore Data Models

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Specifically, teaches using the latest version of React (React 18), resulting in efficiency and the reduction in wasted time on outdated tutorials
Taught by Andrei Neagoie and Yihua Zhang, experienced industry professionals who have worked in Silicon Valley and Toronto with React.js
Develops professional skills in React.js development, as graduates from other courses taught by Andrei Neagoie are employed by Google, Tesla, Amazon, and Apple
Provides context API, GraphQL, and Firebase, all of which are commonly used in web development
Suitable for experienced learners as the course starts from advanced topics and the creation of large-scale apps

Save this course

Save Complete React Developer (w/ Redux, Hooks, GraphQL) to your list so you can find it easily later:
Save

Reviews summary

React skills builder

Learners say this course is an effective way to boost their knowledge of React and fundamentals, making them more confident in the field.
Course could lead to a future job in React programming.
"This course made me feel way more confident in React and in getting my first future web developer job."
Develop skills for React development.
"This course made me feel way more confident in React and in getting my first future web developer job."

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 Complete React Developer (w/ Redux, Hooks, GraphQL) with these activities:
Follow along with React tutorials on YouTube
Enhance your understanding of React by following along with video tutorials. This will provide you with visual demonstrations and practical examples to supplement the course material.
Browse courses on React
Show steps
  • Search for React tutorials on YouTube
  • Choose a tutorial that aligns with your learning goals
  • Follow the steps in the tutorial and try to implement the code yourself
Join a React study group or online community
Connect with other React learners and share knowledge through study groups or online communities. This will allow you to ask questions, discuss concepts, and learn from others' experiences.
Browse courses on React
Show steps
  • Find a React study group or online community
  • Join the group and actively participate in discussions
  • Share your knowledge and help others
Create a React resource library
Build a comprehensive collection of React-related resources, such as tutorials, articles, videos, and code snippets. This will serve as a valuable reference for your future React development endeavors.
Browse courses on React
Show steps
  • Gather resources from various sources
  • Categorize and organize the resources
  • Share your resource library with other React developers
Six other activities
Expand to see all activities and additional details
Show all nine activities
Solve React interview questions
Get ahead of the competition by practicing common React interview questions. This will strengthen your problem-solving skills and improve your confidence during technical interviews.
Browse courses on React
Show steps
  • Find a list of React interview questions online
  • Solve the questions on your own
  • Review your solutions and identify areas for improvement
Participate in a React workshop
Deepen your understanding of React through hands-on practice in a workshop setting. This will provide you with an opportunity to work on real-world projects and receive guidance from experienced instructors.
Browse courses on React
Show steps
  • Find a React workshop that aligns with your skill level
  • Register for the workshop
  • Attend the workshop and actively participate in the activities
Build a RESTful API using React and Firebase
Solidify your understanding of React and Firebase by building a real-world RESTful API. This hands-on project will reinforce the concepts covered in the course and prepare you for building complex web applications.
Browse courses on React
Show steps
  • Set up a React and Firebase project
  • Create a data model for your API
  • Implement CRUD operations using React and Firebase
  • Test your API using Postman or a similar tool
Participate in a React hackathon
Challenge yourself and push your React skills to the limit by participating in a hackathon. This will test your ability to work under pressure, solve complex problems, and collaborate with others.
Browse courses on React
Show steps
  • Find a React hackathon that aligns with your interests
  • Form a team or participate solo
  • Develop and submit your project during the hackathon
Attend a React meetup or conference
Expand your network and stay up-to-date on the latest React trends by attending industry events. This will allow you to connect with other React developers, share knowledge, and gain valuable insights.
Browse courses on React
Show steps
  • Find a React meetup or conference in your area
  • Register for the event
  • Attend the event and participate in discussions and workshops
Contribute to open-source React projects
Make a meaningful contribution to the React community by participating in open-source projects. This will not only enhance your technical skills but also demonstrate your passion for React and give back to the community.
Browse courses on React
Show steps
  • Find an open-source React project that interests you
  • Read the project documentation and contribute code
  • Review code and submit pull requests

Career center

Learners who complete Complete React Developer (w/ Redux, Hooks, GraphQL) will develop knowledge and skills that may be useful to these careers:
React Developer
A React Developer is responsible for developing and maintaining the front end of websites and applications using the React framework. This course provides comprehensive training in React, including all the latest features and best practices. With its focus on real-world projects, you'll gain the skills and experience needed to excel as a React Developer.
Front-End Engineer
A Front End Engineer is responsible for the structure, design, and behavior of the user interface (UI) for a website or application. This course can help build a foundation in React, which is a major framework for front end development. It also includes hands-on projects that give you the experience you need to succeed in this role.
UI Engineer
A UI Engineer is responsible for the design and development of the user interface (UI) for websites and applications. This course provides a strong foundation in React, which is a popular framework for UI development. It also covers other essential technologies like Redux and GraphQL, giving you the skills you need to succeed as a UI Engineer.
Full-Stack Developer
A Full Stack Developer is responsible for both the front end and back end of websites and applications. This course provides a solid foundation in React for front end development, and also covers Redux, React Hooks, and GraphQL for back end development. With its comprehensive approach, you'll gain the skills needed to become a well-rounded Full Stack Developer.
Web Developer
A Web Developer is responsible for the design, development, and maintenance of websites and web applications. This course provides a strong foundation in React, which is a popular framework for web development. It also covers other essential technologies like Redux, React Hooks, and GraphQL, giving you the skills you need to succeed as a Web Developer.
JavaScript Developer
A JavaScript Developer is responsible for developing and maintaining web and mobile applications using JavaScript. This course provides comprehensive training in React, which is a popular JavaScript framework. It also covers other essential technologies like Redux and GraphQL, giving you the skills you need to succeed as a JavaScript Developer.
Technical Lead
A Technical Lead is responsible for leading and mentoring a team of software engineers. This course provides a strong foundation in React, which is a popular framework for web and mobile application development. It also covers other essential technologies like Redux and GraphQL, giving you the technical skills needed to lead a team effectively and make informed decisions.
Software Engineer
A Software Engineer is responsible for designing, developing, and maintaining software applications. This course provides a strong foundation in React, which is a popular framework for web and mobile application development. It also covers other essential technologies like Redux and GraphQL, giving you the skills you need to succeed as a Software Engineer.
UX Designer
A UX Designer is responsible for the design and usability of websites and applications. This course provides a strong foundation in React, which is a popular framework for UI development. It also covers other essential technologies like Redux and GraphQL, giving you the skills you need to understand the technical side of UX design and work effectively with UI Engineers.
Product Manager
A Product Manager is responsible for the planning, development, and launch of products. This course provides a strong foundation in React, which is a popular framework for web and mobile application development. It also covers other essential technologies like Redux and GraphQL, giving you the technical skills needed to understand the development process and make informed decisions as a Product Manager.
Machine Learning Engineer
A Machine Learning Engineer is responsible for designing, developing, and deploying machine learning models. This course provides a strong foundation in GraphQL, which is a popular framework for data fetching and management. It also covers other essential technologies like React and Redux, giving you the technical skills needed to understand data pipelines and work effectively with data engineers.
Data Analyst
A Data Analyst is responsible for collecting, analyzing, and interpreting data to identify trends and patterns. This course provides a strong foundation in GraphQL, which is a popular framework for data fetching and management. It also covers other essential technologies like React and Redux, giving you the technical skills needed to understand data pipelines and work effectively with data engineers.
Data Scientist
A Data Scientist is responsible for collecting, analyzing, and interpreting data to solve business problems. This course provides a strong foundation in GraphQL, which is a popular framework for data fetching and management. It also covers other essential technologies like React and Redux, giving you the technical skills needed to understand data pipelines and work effectively with data engineers.
Software Architect
A Software Architect is responsible for designing and overseeing the development of software systems. This course provides a strong foundation in React, which is a popular framework for web and mobile application development. It also covers other essential technologies like Redux and GraphQL, giving you the technical skills needed to design and architect complex software systems.
Mobile Developer
A Mobile Developer is responsible for designing, developing, and maintaining mobile applications. This course provides a strong foundation in React Native, which is a popular framework for mobile development. It also covers other essential technologies like Redux and GraphQL, giving you the skills you need to succeed as a Mobile Developer.

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 Complete React Developer (w/ Redux, Hooks, GraphQL).
Great resource for beginners who want to learn React from the ground up. It covers the core concepts of React, and how to use it to build real-world applications.
Is one of the most recommended books for beginners and those new to the JavaScript ecosystem. The book focuses on the core concepts of React, and provides a good foundation for building web applications.
Provides a comprehensive overview of React and Redux, the two core technologies used in the course. It great resource for beginners who want to learn more about these technologies and how to use them together to build web applications.
Provides a comprehensive overview of GraphQL, the query language used in the course. It covers everything from the basics of GraphQL to advanced topics such as performance optimization and security.
Great introduction to GraphQL, and how to use it with React. It covers the core concepts of GraphQL, and how to use it to build a real-world application.
Provides a deep dive into the JavaScript language, which is used in the course. It covers everything from the basics of JavaScript to advanced topics such as closures and functional programming.

Share

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

Similar courses

Here are nine courses similar to Complete React Developer (w/ Redux, Hooks, GraphQL).
React JS and Redux Bootcamp - Master React Web Development
Most relevant
The Complete React Developer Course (w/ Hooks and Redux)
Most relevant
Building Applications with React 17 and Redux
Most relevant
Advanced React and Redux
Most relevant
React JS - Mastering Redux
Most relevant
React - The Complete Guide 2024 (incl. React Router &...
Most relevant
Modern React with Redux [2024 Update]
Most relevant
Using React 17 Hooks
Most relevant
Developing Front-End Apps with React
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