3 Pemimpin Dr, #06-04 (07), Singapore 576147
+65 8839 6772

Modern React with Redux [2020 Update]

Modern React with Redux [2020 Update]

Online Self-Paced

Play Video

Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Course Description

Course Last Updated for React v16.6.3 and Redux v4.0.1!  All content is brand new!  Update includes detailed videos on the new React Hooks system.

Congratulations!  You’ve found the most popularmost complete, and most up-to-date resource online for learning React and Redux!

Thousands of other engineers have learned React and Redux, and you can too.  This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you’ve always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

React is the most popular Javascript library of the last five years, and the job market is still hotter than ever.  Companies large and small can’t hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high.  It’s a great time to learn React!

This course features hundreds of videos with dozens of custom diagrams to help you understand how React and Redux work.  No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you’ll learn the fundamentals of building dynamic and live web apps using React.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge.  You’ll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.

My guarantee to you: there is no other course online that teaches more features of React and Redux.  This is the most comprehensive resource there is.

  • Master the fundamental features of React, including JSX, state, and props
  • From square one, understand how to build reusable components
  • Dive into the source code of Redux to understand how it works behind the scenes
  • Test your knowledge and hone your skills with numerous coding exercises
  • Integrate React with advanced browser features, even geolocation API’s!
  • Use popular styling libraries to build beautiful apps
  • Master different techniques of deployment so you can show off the apps you build!
  • See different methods of building UI’s through composition of components

Besides just React and Redux, you’ll pick up countless other tidbits of knowledge, including ES2015 syntax, popular design patterns, even the clearest explanation of the keyword ‘this’ in Javascript that you’ll ever hear.

This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

  • A Mac or Windows Computer

This course includes:

52 hours on-demand video

Full lifetime access

23 articles

Access on mobile and TV

222 downloadable resources

SkillsFuture Credit eligible *

17 coding exercises

Certificate of completion

* More than 7hr of learning time required

Course content

  • How to Get Help
  • Our First App
  • Critical Questions!
  • Installing Node JS
  • Important Update About React App Generation
  • Generating a React Project
  • Why Create React App?
  • Exploring a Create-React-App Project
  • Starting and Stopping a React App
  • Javascript Module Systems
  • Displaying Content with Functional Components
  • Link to Completed Github Repo
  • Common Questions About My Environment

  • What is JSX?
  • Converting HTML to JSX
  • Inline Styling with JSX
  • Converting Styling to JSX Format
  • Class vs ClassName
  • Referencing JS Variables in JSX
  • Values JSX Can't Show
  • Finding Forbidden Property Names
  • Exercise Introduction
  • Test Your Knowledge: JSX Interpolation
  • JSX Exercise Solution

  • Three Tenets of Components
  • Application Overview
  • Semantic UI CDN Link
  • Getting Some Free Styling
  • Naive Component Approach
  • Specifying Images in JSX
  • Duplicating a Single Component
  • Extracting JSX to New Components
  • Component Nesting
  • React's Props System
  • Passing and Receiving Props
  • Passing Multiple Props
  • Passing Props - Solutions
  • Component Reuse
  • Implementing an Approval Card
  • Showing Custom Children
  • Component Reuse
  • Exercise - Props
  • Test Your Knowledge: Props
  • Props Exercise Solution
  • Exercise - Children
  • Test Your Knowledge: Children Through Props
  • Children Exercise Solution

  • Class-Based Components
  • Application Overview
  • Scaffolding the App
  • Getting a Users Physical Location
  • Resetting Geolocation Preferences
  • Handling Async Operations with Functional Components
  • Refactoring from Functional to Class Components

  • The Rules of State
  • Initializing State Through Constructors
  • Updating State Properties
  • App Lifecycle Walkthrough
  • Handling Errors Gracefully
  • Conditionally Rendering Content

  • Introducing Lifecycle Methods
  • Why Lifecycle Methods?
  • Refactoring Data Loading to Lifecycle Methods
  • Alternate State Initialization
  • Passing State as Props
  • Determining Season
  • Ternary Expressions in JSX
  • Showing Icons
  • Extracting Options to Config Objects
  • Adding Some Styling
  • Showing a Loading Spinner
  • Specifying Default Props
  • Avoiding Conditionals in Render
  • Breather and Review
  • Class-Based Components
  • Exercise Solution - Class-Based Components
  • Updating Components with State
  • Updating Components with State

  • App Overview
  • Component Design
  • Adding Some Project Structure
  • Showing Forms to the User
  • Adding a Touch of Style
  • Creating Event Handlers
  • Alternate Event Handler Syntax
  • Uncontrolled vs Controlled Elements
  • More on Controlled Elements
  • Exercise Overview - Receiving Values
  • Receiving Values From Controlled Elements
  • Exercise Solution
  • Handling Form Submittal
  • Understanding 'this' In Javascript
  • Solving Context Issues
  • Communicating Child to Parent
  • Invoking Callbacks in Children

  • Fetching Data
  • Axios vs Fetch
  • Viewing Request Results
  • Handling Requests with Async Await
  • Setting State After Async Requests
  • Binding Callbacks
  • Creating Custom Clients

Certificate of Completion

When you complete a paid Udemy course, you will receive a certificate of completion, which you can share with your friends, relatives, co-workers and potential employers. Certificates of completion help demonstrate your accomplishments, but please note Udemy is not an accredited institution, and as a result, the certificates cannot be used for formal accreditation.

Please note: free courses and courses that only include practice tests do not offer a certificate of completion.

What you'll learn

Student feedback

Client Logo
Strand LS

It's an amazingly well organized detailed course. It would be great if this course also adds a way typescript is used in building react applications for the basic libraries used here.

Client Logo

This is a pretty thorough explanation of react. Mr Grider doesn't only help you understand what is happening he also answers the question why.

Client Logo
Kiran Peramareddy

Stephen has extraordinary talent in both on the subject and on teaching. He went into minute details of each concept and explained. This is definitely one of the best courses on ReactJS.

Client Logo
Kevin Law

The best course I have enrolled on Udemy! Stephen explained not only React but also modern Javascript concepts. The sample projects are funny and good for learning.

Client Logo
Mohammed Salihu Bukar

A well detailed react course beyond any I've ever watched. If you want a complete react course, this is the best option I've seen so far.

Who this course is for:

Transform your life through Udemy

Join millions of learners from around the world already learning on Udemy! Learn online at your own pace from highly rated instructors on any device. Learn at home, the office, waiting in line, or on the go.

Start today with a special discount and download to your phone. Lifetime access over 130,000 courses, courses in 60+ languages and expert instructors. 30-Day Money-back guarantee.

Related courses by other education partners

React with Redux Certification Training

Edureka’s React with Redux Certification Training will train you to build efficient React applications by mastering the concepts of React, […]

Docker Certified Associate Training

Edureka’s Docker Certified Associate Training Course is designed keeping in mind the needs of both new learners and professionals […]

React – The Complete Guide (incl Hooks, React […]

Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is […]