.jpg)
Brochure
Enquire- Course Outline
- Join Our Online Classroom!
- Exercise: Meet The Community
- Monthly Coding Challenges, Free Resources and Guides
Complete React Developer (w/ Redux, Hooks, GraphQL)
BY
Udemy
Master React skills and knowledge to become an expert in designing large-scale e-commerce applications utilizing Redux, ...Read more
Online
₹ 4099
Quick Facts
| particular | details | |||
|---|---|---|---|---|
|
Medium of instructions
English
|
Mode of learning
Self study
|
Mode of Delivery
Video and Text Based
|
Course overview
The Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) certification course was designed by Andrei Neagoie - Founder of zerotomastery.io & Senior Software Developer, Yihua Zhang - Senior Software Developer, and Zero To Mastery and is featured on Udemy. The Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) online classes focus on productivity and efficiency because the course is updated with the latest 2022 content as per the latest React version, React 17.
The Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) online course is a hands-on training program that attempts to guide applicants through the fundamentals of React and then continues to advance subjects so that candidates can make solid judgments on architecture and tools for any future ReactJS projects. Candidates will be given all of the codes in a step-by-step manner, as well as access to the master projects code, allowing them to work on their application development projects and add them to their portfolios.
The highlights
- Certificate of completion
- Self-paced course
- English videos with multi-language subtitles
- 41.5 hours of pre-recorded video content
- 99 articles
- 43 downloadable resources
- 1 coding exercise
- 30-day money-back guarantee
- Unlimited access
- Accessible on mobile devices and TV
Program offerings
- Certificate of completion
- Self-paced course
- English videos with multi-language subtitles
- 41.5 hours of pre-recorded video content
- 99 articles
- 43 downloadable resources
- 1 coding exercise
- 30-day money-back guarantee
- Unlimited access
- Software engine
Course and certificate fees
Fees information
₹ 4,099
certificate availability
Yes
certificate providing authority
Udemy
Who it is for
What you will learn
After completing the Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL) online certification, candidates will acquire a comprehensive understanding of the fundamental concepts of React for use in application development projects. Candidates will explore the most latest React technologies, including Hooks, Context API, React Lazily, and others, to develop reactive, performant, large-scale apps. Candidates will learn about ReactJS, Stripe API, Context API, GraphQL, Redux, Redux-Saga, and CSS for javascript styling. Candidates will also learn about methods and strategies for configuring authentication and user accounts, state management, and routing, as well as contemporary Javascript versions ranging from ES6 to ES11.
The syllabus
Introduction
React Key Concepts
- React Concepts
- The Birth of React.js
- Declarative vs Imperative
- Component Architecture
- One Way Data Flow
- UI Library
- How To Be A Great React Developer
- React Latest Version!
- Web Developer Monthly
React Basics
- Section Overview
- 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
- Class Components
- Thinking In JSX
- Dynamic Content
- Optional: map() + key attribute
- Single Page Application
- Fetching Content
- Optional: Promises
- Architecting Our App
- Card List Component
- Quick note on quotes for string interpolation
- Card Component
- Exercise: Breaking Into Components
- State vs Props
- SearchField State
- React Events
- Filtering State
- Optional: filter(), includes()
- Search Box Component
- Exercise: Where To Put State?
- Class Methods and Arrow Functions
Master Project: Setting Up E-commerce Project
- Endorsements On LinkedIN
- The Long Road Ahead
- Project Overview
- Github + Project Repositories
- Course Guideline + Github Links
- Quick Note About Github
- Update for CRA v4.0.0+ and React 17+
- E-commerce Homepage + SASS setup
- Project Files + Modules
- Project Component Architecture
- CSS and SCSS files
- Homepage and Directory Components
- Styling Menu Items
- Updated Google Fonts UI
- Quick Note: React 17
- React 17: Updating Packages + Latest Version Of React
Master Project: React Router and Routing
- Routing In React
- Routing In Our Project
- React Router Dom
- withRouter()
Master Project: Forms + Components
- Shopping Data
- Shop Page
- Collection Item
- Header Component
- Resources: Importing SVG In React
- Introducing Forms In React
- Sign In Component
- Form Input Component
- Custom Button Component
Master Project: Firebase + User Authentication
- Section Overview
- Firebase Introduction
- Important Note: firebase version in the course!
- Adding a Project to Firebase
- Note about Github
- Firebase Compatibility Imports
- Google Sign In Authentication
- Cloning From This Point On
- Google Sign In Authentication 2
- Optional: How to fix 403: restricted_client error
- Google Sign In Authentication 3
- Note: Use Cloud Firestore NOT Realtime Database
- Firebase Firestore
- Optional: Async Await
- Storing User Data In Firebase
- Note: Firestore update regarding permissions
- Storing User Data In Our App
- Sign Up Component
- Sign Up With Email and Password
- Sign In With Email and Password
- Note on our Custom Button
- Firebase unsubscribe method
- Section Review
Master Project: Redux 1
- Section Overview
- Redux Introduction
- Redux Concepts
- Redux In Our Application
- Redux Actions and Reducers
- Setting Up Redux 1
- Setting Up Redux 2
- connect() and mapStateToProps
- mapDispatchToProps
- User Redirect and User Action Type
- Cart Component
- Cart Dropdown Component
- Implementing Redux In Cart
- Add To Cart Styling
- Cart Item Reducer
- Adding Multiple Items To Cart
- Optional: find()
- Cart Item Component
- Optional: reduce()
- Selectors in Redux
- Optional: Memoization
- Reselect Library
- Quick correction on CartIcon re-rendering
- User Selectors
- Checkout Page
- Checkout Page 2
- Extensible Code
- Dispatch Action Shorthand
- Checkout Item Component
- Remove Items From Cart
- Remove Items At Checkout
Master Project: Session Storage + Persistence
- Local Storage and Session Storage
- Redux Persist
Master Project: Redux
- Directory State Into Redux
- Collection State Into Redux
- Collection Overview Component
Master Project: Advanced Routing
- Nested Routing in Shop Page
- Improving Naming Of Component
- Collection Routing and Selector
- Memoizing selectCollection and collectionUrlParam
- Optional: Currying
Master Project: State Normalization
- Data Normalization + Collection Page
- Optional: Hash Tables vs Arrays
- Data Flow In Our App
- Thinking About Data Flow
Master Project: Stripe Payments Part 1
- Introduction To Stripe
- Stripe Integration
- Note about TEST credit cards for Stripe
- Cloning From This Point On
- Finishing Touches + Look Ahead
Master Project: Deploying To Production
- Deploying To Heroku
- Resources: Buildpack
- Linking Github to Heroku
- Optional: Git + Heroku commands
- Optimizing Production Build
Master Project: CSS in JS - styled-components
- CSS in JS
- Styled-components
- Styled-components In Our App
- Thinking About Tradeoffs
- Styled-components In Our App 2
- Styled-components In Our App 3
- Exercise: styled-components
Master Project: Advanced Redux + Firebase
- Section Overview
- Quick Note: Firebase
- Firebase Refresher
- Firebase Refresher 2
- Moving Our Shop Data To Firebase
- Moving Our Shop Data To Firebase 2
- Reviewing What We Have Done
- Bringing Shop Data To Our App
- Adding Shop Data To Redux
- Note: Shop page may break
Master Project: HOC Patterns
- WithSpinner HOC
- WithSpinner HOC 2
- Quick Note About Next Lesson
- Optional: How To Build HOCs
Master Project: Asynchronous Redux
- Observables + Observer Pattern
- Promise Pattern
- Redux Thunk
- What Does Redux Thunk Do?
- Debugging Our Code
Master Project: Container Pattern
- Container Pattern
- Refactoring Is A Tradeoff
Master Project: Redux-Saga
- Introduction to Sagas
- Correction about Saga flow
- Generator Functions
- Quick Note About Sagas
- redux-saga
- Redux Thunk Into Saga
- take(), takeEvery(), takeLatest()
- Root Saga
- Planning Ahead With Sagas
- Google Sign In Into Sagas
- Email Sign In Into Sagas
- Reviewing Our Sagas
- Recreating Persistence
- Note: Small correction on user saga
- Sign Out With Sagas
- Clear Cart Saga
- Solution: Sign Up Saga
Master Project: React Hooks
- React Hooks Introduction (useState)
- Why Did React Add Hooks?
- useEffect
- Hook Rules
- Converting Class Components With useState
- useEffect In Our App
- useEffect as ComponentWillUnmount()
- useEffect Cheat Sheet
- Custom Hooks
- Custom Hooks 2
- useReducer
- Should You Adopt Hooks?
Master Project: Advanced React Hooks
- React-Redux Hooks
- useDispatch
- useParams Part 1
- useParams Part 2
- useState Part 1
- useState Part 2
- useEffect Part 1
- useEffect Part 2
- useEffect Part 3
- useMemo
- useLayoutEffect
Master Project: Stripe Payments Part 2 - Backend
- About This Section
- Introduction To Backend
- Cloning From This Point On
- Note: Do not push to github until end of section!
- Creating our Server Inside the Project
- Building A Basic Server
- Note: You don't need the CORS library anymore
- What We Are Building
- Quick note about next lecture: Stripe Dashboard and Private Keys
- Backend Payment Route
- Connecting Client To Server
- Note: Ignoring client node_modules
- Deploying To Production
Master Project: Context API
- Quick note about cloning this repo
- Introduction To Context API
- Context Consumer + useContext Hook
- Context Provider
- Cart Context
- Provider Context Pattern
- Provider Context Pattern 2
- Redux vs Context API
Master Project: GraphQL + Apollo
- Introduction To GraphQL
- Course Guideline + Github Links
- Note about next lesson
- GraphQL Playground
- Backend Code
- GraphQL Playground 2
- Introduction To Apollo
- Apollo Container
- Note: Destructuring change in next lesson
- Query With Variables
- GraphQL vs Redux
- Mutations On The Client
- Resources: Mutations
- Mutations On The Client 2
- Adding Items With Apollo
- Adding Items With Apollo 2
- Note: Compose in next lesson
- CartItem Count With Apollo
- Exercises: Adding More GraphQL
- Should You Use GraphQL?
Master Project: Mobile Support
- Mobile Responsiveness
- Mobile Responsiveness 2
- Exercise: Mobile Friendly App
Master Project: React Performance
- Code Splitting Introduction
- Introducing React Lazy
- React Lazy + Suspense
- Error Boundaries
- React.memo, PureComponent, shouldComponentUpdate
- Update on React Devtools
- Performance In Our App
- useCallback
- useMemo
- Gzipping and Compression
- React <Profiler>
- React Performance Cheat Sheet
React Interview Questions + Advice
- Don't Overcomplicate
- Be A Late Follower
- Break Things Down
- It Will Never Be Perfect
- Learning Guideline
- Endorsements On LinkedIn
- Become An Alumni
- Common React Interview Questions
- Course Review
- The Final Challenge
Progressive Web App
- Note About This Section
- Progressive Web Apps
- Opt-In Service Worker in CRA
- Resources: Progressive Web Apps
- Progressive Web Apps Examples
- PWA - HTTPS
- Note on server.js code
- Resources: PWA - HTTPS
- PWA - App Manifest
- PWA - Service Workers
- Resources: PWA - Service Workers
- PWA - Final Thoughts
- Update for CRA v4.0.0+ and React 17+
- Converting Our App To PWA
- Addendum to Server.js
Firebase Security
- Firebase Security Rules
- User Security Rule
- User Security Rule 2
- More Security Rules
- Coding Challenge: Firebase Cart
Testing in React
- Note About This Section
- Section Overview
- Updated Code For This Section
- Types of Tests
- Testing Libraries
- Note: The Next Videos
- Unit Tests
- Integration Tests
- Automation Testing
- Final Note On Testing
- Setting Up Jest
- Our First Tests
- Writing Tests
- Quick Note: Upcoming API Endpoint + ES6 Modules
- Asynchronous Tests
- Asynchronous Tests 2
- Resources: Jest Cheat Sheet
- Mocks and Spies
- Note: Testing React Apps
- Enzyme vs React Testing Library
- Introduction To Enzyme
- Quick Note: Empty Snapshots
- Snapshot Testing
- Snapshot Testing + Code Coverage
- Testing Stateful Components
- Quick Recap
- Testing Connected Components
- Testing Connected Components 2
- Testing Reducers
- Testing Actions
- Section Review
- Testing In Our Master Project
Webpack + Babel
- Introduction to Webpack + Babel
- Webpack Config
Build a GatsbyJS Blog
- Quick Note About This Section
- Introduction to Gatsby.js
- Starting a Gatsby Project
- Gatsby Pages
- Gatsby GraphQL + Markdown
- Building Our Blog 1
- Building Our Blog 2
- Building Our Blog 3
- Building Our Blog 4
- Building Our Blog 5
Appendix 1: Key Developer Concepts
- map()
- Promises
- filter()
- includes()
- CWD: Git + Github
- Github Update: Master --> Main
- CWD: Git + Github 2
- Async Await
- find()
- reduce()
- Memoization
- Currying
Open Source Projects
- Contributing To Open Source
- Contributing To Open Source 2
- Exercise: Contribute To Open Source
AMA + Bonus
- AMA - 100,000 Students!!
- Coding Challenges
- Bonus Lecture
Instructors
Mr Andrei Neagoie
Senior Software Developer
Freelancer
Mr Yihua Zhang
Instructor
Freelancer
Articles
Popular Articles
prev
next
Latest Articles
prev
next
