Modern React with Redux [2019 Update]
3.5 /5- Offered byUDEMY
Modern React with Redux [2019 Update] at UDEMY Overview
Duration | 38 hours |
Total fee | ₹11,520 |
Mode of learning | Online |
Difficulty level | Intermediate |
Official Website | Go to Website  |
Credential | Certificate |
Modern React with Redux [2019 Update] at UDEMY Highlights
- Compatible on Mobile and TV
- Earn a Cerificate on successful completion
- Get Full Lifetime Access
- Course Instructor : Stephen Grider
Modern React with Redux [2019 Update] at UDEMY Course details
- Programmers looking to learn React
- Developers who want to grow out of just using jQuery
- Engineers who have researched React but have had trouble mastering some concepts
- Build amazing single page applications with React JS and Redux
- Master fundamental concepts behind structuring Redux applications
- Realize the power of building composable components
- Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
- Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax
- 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 popular , most 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! ---------------------- What will you build? 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. Below is a partial list of the topics you'll find in this course: 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.
Modern React with Redux [2019 Update] at UDEMY Curriculum
Let's Dive In!
How to Get Help
Important Codepen Info
Small Required Codepen Fix
Our First App
CodePen Solution and Blank White Screen Help
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
Building Content with JSX
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
JSX Exercise Solution
Communicating with Props
Three Tenets of Components
Application Overview
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
Props Exercise Solution
Exercise - Children
Children Exercise Solution
Structuring Apps with Class-Based Components
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
State in React Components
The Rules of State
Initializing State Through Constructors
Updating State Properties
App Lifecycle Walkthrough
Handling Errors Gracefully
Conditionally Rendering Content
Understanding Lifecycle Methods
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
Exercise Solution - Class-Based Components
Updating Components with State
Handling User Input with Forms and Events
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
Handling Form Submittal
Understanding 'this' In Javascript
Solving Context Issues
Communicating Child to Parent
Invoking Callbacks in Children
Making API Requests with React
Fetching Data
Axios vs Fetch
Viewing Request Results
Handling Requests with Async Await
Setting State After Async Requests
Binding Callbacks
Creating Custom Clients
Building Lists of Records
Rendering Lists
Review of Map Statements
Rendering Lists of Components
The Purpose of Keys in Lists
Implementing Keys in Lists
Using Ref's for DOM Access
Grid CSS
Issues with Grid CSS
Creating an Image Card Component
Accessing the DOM with Refs
Accessing Image Height
Callbacks on Image Load
Dynamic Spans
App Review
Let's Test Your React Mastery!
App Overview
Component Design
Scaffolding the App
Reminder on Event Handlers
Handling Form Submittal
Accessing the Youtube API
Axios 400 "Required Parameter: part" Error
Searching for Videos
Adding a Video Type
Putting it All Together
Updating State with Fetched Data
Passing State as Props
Rendering a List of Videos
Rendering Video Thumbnails
Styling a List
Communicating from Child to Parent
Deeply Nested Callbacks
Conditional Rendering
Styling the VideoDetail
Displaying a Video Player
Fixing a Few Warnings
Defaulting Video Selection
On We Go...To Redux!
Introduction to Redux
Redux by Analogy
A Bit More Analogy
Finishing the Analogy
Mapping the Analogy to Redux
Modeling with Redux
Creating Reducers
Rules of Reducers
Testing Our Example
Important Redux Notes
Integrating React with Redux
React Cooperating with Redux
React, Redux, and...React-Redux!?
Design of the Redux App
How React-Redux Works
Redux Project Structure
Named vs Default Exports
Building Reducers
Wiring Up the Provider
The Connect Function
Configuring Connect with MapStateToProps
Building a List with Redux Data
Calling Action Creators from Components
Redux is Not Magic!
Functional Components with Connect
Conditional Rendering
Exercise Solution - Connecting Components to Redux
Async Actions with Redux Thunk
App Overview and Goals
Initial App Setup
Tricking Redux with Dummy Reducers
A Touch More Setup
How to Fetch Data in a Redux App
Wiring Up an Action Creator
Making a Request From an Action Creator
Understanding Async Action Creators
More on Async Action Creators
Middlewares in Redux
Behind the Scenes of Redux Thunk
Shortened Syntax with Redux Thunk
Redux Store Design
Rules of Reducers
Return Values from Reducers
Argument Values
Pure Reducers
Mutations in Javascript
Equality of Arrays and Objects
A Misleading Rule
Safe State Updates in Reducers
Switch Statements in Reducers
Dispatching Correct Values
List Building!
Displaying Users
Fetching Singular Records
Displaying the User Header
Finding Relevant Users
Extracting Logic to MapStateToProps
That's the Issue!
Memoizing Functions
Memoization Issues
One Time Memoization
Alternate Overfetching Solution
Action Creators in Action Creators!
Finding Unique User Ids
Quick Refactor with Chain
App Wrapup
Navigation with React Router
App Outline
Mockups in Detail
App Challenges
Initial Setup
React Router Dom Bug Fix
Introducing React Router
How React Router Works
How Paths Get Matched
How to *Not* Navigate with React Router
Navigating with React Router
[Optional] - Different Router Types
Component Scaffolding
Wiring Up Routes
Always Visible Components
Connecting the Header
Links Inside Routers
Handling Authentication with React
OAuth-Based Authentication
OAuth for Servers vs Browser Apps
Creating OAuth Credentials
Wiring Up the Google API Library
Sending a User Into the OAuth Flow
Rendering Authentication Status
Updating Auth State
Displaying Sign In and Sign Out Buttons
On-Demand Sign In and Sign Out
Redux Architecture Design
Redux Setup
Connecting Auth with Action Creators
Building the Auth Reducer
Handling Auth Status Through Redux
Fixed Action Types
Recording the User's ID
Redux Dev Tools
Using Redux Dev Tools to Inspect the Store
Debug Sessions with Redux Dev Tools
Handling Forms with Redux Form
Redux Form Version Issue
Forms with Redux Form
Useful Redux Form Examples
Connecting Redux Form
Creating Forms
Automatically Handling Events
Customizing Form Fields
Handling Form Submission
Validation of Form Inputs
Displaying Validation Messages
Showing Errors on Touch
Highlighting Errored Fields
REST-Based React Apps
Creating Streams
REST-ful Conventions
Setting Up an API Server
Creating Streams Through Action Creators
Creating a Stream with REST Conventions
Dispatching Actions After Stream Creation
Bulk Action Creators
Object-Based Reducers
Key Interpolation Syntax
Handling Fetching, Creating, and Updating
Deleting Properties with Omit
Merging Lists of Records
Fetching a List of All Streams
Rendering All Streams
Associating Streams with Users
Conditionally Showing Edit and Delete
Linking to Stream Creation
When to Navigate Users
History References
History Object Deprecation Warning
Creating a Browser History Object
Implementing Programmatic Navigation
Manually Changing API Records
URL-Based Selection
Wildcard Navigation
More on Route Params
Pulling Streams Out of State
Selecting Records from State
Component Isolation with React Router
Fetching a Stream for Edit Stream
Real Code Reuse!
Refactoring Stream Creation
Setting Initial Values
Avoiding Changes to Properties
Edit Form Submission
PUT vs PATCH Requests
Using React Portals
Why Use Portals?
More on Using Portals
Creating a Portal
Hiding a Modal
Making the Modal Reusable
React Fragments
OnDismiss From the Parent
Reminder on Path Params
Fetching the Deletion Stream
Conditionally Showing Stream Details
Deleting a Stream
Implementing Streaming Video
Viewing a Stream
Switches with React-Router
Showing a Stream
RTMP NodeMediaServer is not a constructor error fix
RTMP Server Setup
OBS Installation
OBS Scene Setup
Video Player Setup
Implementing FLV JS
Creating a FLV Player
Optional Player Building
It Works!
Cleaning Up with ComponentWillUnmount
The Context System with React
The Context System
An App with Context
App Generation
Selecting a Language
A Touch More Setup
Getting Data Out of Context
Creating Context Objects
Consuming the Context Value
The Context Provider
Gotchas Around Providers
Accessing Data with Consumers
Pulling From Multiple Contexts
Replacing Redux with Context
Replacing Redux with Context?
Creating a Store Component
Implementing a Language Store
Rendering the Language Store
Connecting the Selector to the Store
Connecting the Field and Button to the Store
Context vs Redux Recap
Hooks with Functional Components
Introducing Hooks
App Overview
Building Stateful Class Components
The UseState Hook
UseState in Detail
Building the ResourceList
Fetching a Given Resource
ComponentDidUpdate vs ComponentDIdMount
Refactoring a Class to a Function
Lifecycles with UseEffect
Updates with UseEffect
Does It Get Called?
Quick Gotcha with UseEffect
Rendering a List
Actual Code Reuse!
Code Reuse with Hooks
More Fun with Hooks
Weather Hooks
Project Zip
App Overview
Refactoring a Class to a Function
Extracting Reusable Logic
That's All For Now
[Legacy] An Intro to React
Introduction - Github Links for Project Files!
Completed Projects - Github Links
The Purpose of Boilerplate Projects
Environment Setup
Project Setup
Support for Create React App
A Taste of JSX
More on JSX
Quick Note - Getting Different Error Messages
ES6 Import Statements
ReactDOM vs React
Differences Between Component Instances and Component Classes
Render Targets
Component Structure
Youtube Search API Signup
Export Statements
Class-Based Components
Handling User Events
Introduction to State
More on State
Controlled Components
Breather and Review
[Legacy] Ajax Requests with React
Youtube Search Response
Refactoring Functional Components to Class Components
Props
Building Lists with Map
List Item Keys
Video List Items
Detail Component and Template Strings
Handling Null Props
Video Selection
Styling with CSS
Searching for Videos
Throttling Search Term Input
React Wrapup
[Legacy] Modeling Application State
Foreword on Redux
What is Redux?
More on Redux
Even More on Redux!
[Legacy] Managing App State with Redux
Putting Redux to Practice
Reducers
Containers - Connecting Redux to React
Containers Continued
Implementation of a Container Class
Containers and Reducers Review
Actions and Action Creators
Binding Action Creators
Creating an Action
Consuming Actions in Reducers
Consuming Actions in Reducers Continued
Conditional Rendering
Reducers and Actions Review
[Legacy] Intermediate Redux: Middleware
App Overview and Planning
Component Setup
Controlled Components and Binding Context
Form Elements in React
Working with API's
Introduction to Middleware
Ajax Requests with Axios
Redux-Promise in Practice
Redux-Promise Continued
Avoiding State Mutations in Reducers
Building a List Container
Mapping Props to a Render Helper
Adding Sparkline Charts
Making a Reusable Chart Component
Labeling of Units
Google not Defined Errors
Google Maps Integration
Google Maps Integration Continued
Project Review
[Legacy] React Router + Redux Form v6
App Overview and Goals
Posts API
Quick Note
Installing React Router
What React Router Does
The Basics of React Router
Route Design
Our First Route Definition
State as an Object
Back to Redux - Index Action
Implementing Posts Reducer
Action Creator Shortcuts
Rendering a List of Posts
Creating New Posts
A React Router Gotcha
Navigation with the Link Component
Redux Form
Setting Up Redux Form
The Field Component
Generalizing Fields
Validating Forms
Showing Errors to Users
Handling Form Submittal
Form and Field States
Conditional Styling
More on Navigation
Create Post Action Creator
Navigation Through Callbacks
The Posts Show Component
Receiving New Posts
Selecting from OwnProps
Data Dependencies
Caching Records
Deleting a Post
Wrapup
[Legacy - Do Not Take] Bonus - RallyCoding
Basics of Redux Thunk
Combining Redux and Firebase
Dynamic Forms with Redux Form
Logicless Components with Reselect
Data Loading Methods with Redux
Animation of React Components
The Best Way to Store Redux Data
Four Most Common Errors with React and Redux
Modals in React and Redux Apps
Deployment of React/Webpack Apps
BrowserHistory in Production
React Integration with 3rd Party Libraries
Introducing JSPlaygrounds for Rapid Prototyping
[Legacy - Do Not Take] React Router + Redux Form v4
Important Note - Do Not Skip!
App Overview and Goals
Exploring the Posts Api
Installing React Router
React Router - What is It?
Setting Up React Router
Route Configuration
Nesting Of Routes
IndexRoutes with React Router
Back To Redux - Index Action
Catching Data with Posts Reducer
Catching Data with Posts Reducer Continued
Fetching Data with Lifecycle Methods
Fetching Data with Lifecycle Methods Continued
Creating New Posts
Navigation with the Link Component
Forms and Form Submission
More on Forms and Form Submission
Passing Control to Redux Form
CreatePost Action Creator
Form Validation
Form Validation Continued
Navigating on Submit
Posts Index
Dynamic Route Params
Loading Data on Render
Handling Null Props
Delete Action Creator
Navigate on Delete
ReactRouter and ReduxForm Wrapup
Extras
Bonus!
Other courses offered by UDEMY
Student Forum
Anything you would want to ask experts?