React and its Ecosystem - A Complete Beginner's Guide

Name: React and its Ecosystem - A Complete Beginner's Guide
Rating: 4.5 (138 reviews)

Learn React.js from scratch! Get a deep understanding of the fundamentals, advanced topics, hooks, redux and more!

Created byVishwas Gopinath

Last updated 10/2020

English

What you'll learn

Deep understanding of React Fundamentals, Advanced Topics and Hooks
Learn the most popular packages that work with React like React Redux
Understand why React code is written the way it is written

Course content

7 sections • 184 lectures • 21h 23m total length

Introduction9:33
Hello World4:53
Folder Structure5:34
Components4:58
Function Components6:32
Class Components6:21
Hooks update3:53
JSX11:24
Props11:36
State10:34
setState14:29
Destructuring Props and State4:44
Event Handling7:35
Binding Event Handlers11:55
Methods as Props8:44
Conditional Rendering11:45
List Rendering11:56
Lists and Keys7:31
Index as Key Anti-pattern10:59
Styling and CSS Basics11:39
Basics of Form Handling13:48
Component Lifecycle Methods2:38
Component Mounting Lifecycle Methods10:36
Component Updating Lifecycle Methods10:34
Resources

Fragments9:42
Pure Components12:44
memo4:20
Refs9:32
Refs with Class Components5:40
Forwarding Refs7:26
Portals9:18
Error Boundary10:52
Higher Order Components - Part 16:49
Higher Order Components - Part 212:38
Higher Order Components - Part 33:41
Render Props - Part 14:56
Render Props - Part 211:09
Context - Part 13:24
Context - Part 27:24
Context - Part 34:43
HTTP3:16
HTTP GET Request7:45
HTTP POST Request7:14

Introduction7:55
useState Hook10:44
useState with Previous State6:20
useState with Object7:18
useState with Array5:54
useEffect Hook3:46
useEffect after Render7:23
Conditionally Run Effects7:38
Run Effects Only Once5:24
useEffect with Cleanup5:53
useEffect with Incorrect Dependency10:24
Fetching Data with useEffect - Part 15:37
Fetching Data with useEffect - Part 24:44
Fetching Data with useEffect - Part 32:57
useContext Hook - Part 13:42
useContext Hook - Part 26:08
useContext Hook - Part 33:01
useReducer Hook8:42
useReducer (Simple State & Action)9:48
useReducer (Complex State & Action)8:33
Multiple useReducers3:08
useReducer with useContext12:10
Fetching Data with useReducer - Part 17:02
Fetching Data with useReducer - Part 27:08
useState vs useReducer4:18
useCallback Hook15:25
useMemo Hook10:40
useRef Hook - Part 14:17
useRef Hook - Part 29:45
Custom Hooks1:48
useDocumentTitle Custom Hook8:58
useCounter Custom Hook7:46
useInput Custom Hook9:45
Resources

Introduction15:00
Getting Started2:07
Three Core Concepts4:18
Three Principles6:24
Actions3:58
Reducers5:10
Store10:32
Cakes and Ice Creams2:41
Multiple Reducers6:00
Combine Reducers3:41
Middleware4:59
Async Actions9:29
Redux Thunk Middleware8:45
React Redux Setup3:40
Actions3:31
Reducers2:54
Store3:31
connect8:44
React Redux with Hooks1:27
useSelector Hook3:10
useDispatch Hook2:04
Cakes and Ice Creams10:32
Logger Middleware2:58
Redux Devtool Extension6:45
Action Payload5:28
mapStateToProps6:15
mapDispatchToProps3:20
Async Actions9:24
Redux Thunk GET Request11:12
Resources

Introduction2:12
Icons7:28
Learn to use icons in React apps with React Icons package, including installing, selecting Font Awesome or Material Design icons, and using the icon context provider for color and size.
Toast Notifications10:06
Modal8:44
Tooltip10:40
CountUp10:12
Idle Timer16:28
Color Picker6:25
Credit Cards8:48
Date Picker9:50
Presentation Decks10:36
Video Player6:00
Loading Indicators5:45
Charts16:40

Introduction4:36
Simple Form5:20
useFormik Hook2:00
Managing Form State8:40
Handling Form Submission4:37
Form Validation0:53
Validation Function6:36
Displaying Error Messages7:31
Visited Fields3:42
Improving Validation UX3:35
Schema Validation with Yup5:21
Reducing Boilerplate3:48
Formik Component2:52
Form Component1:17
Field Component1:39
ErrorMessage Component5:10
Journey So Far2:14
Learn to build and validate React forms with Formic, using initial values, change handlers, and on submit. Explore validation options, including the validate function and the validation schema.
Field Revisited12:04
ErrorMessage Revisited4:18
Nested Objects4:32
Arrays3:15
FieldArray Component15:16
FastField Component3:57
When does Validation Run?5:27
Field Level Validation6:16
Manually Trigerring Validation11:10
Disabling Submit - Part 110:36
Disabling Submit - Part 26:28
Load Saved Data7:08
Reset Form Data3:19
Building Reusable Formik Controls5:10
FormikControl Component1:36
Input8:55
Textarea7:31
Select10:38
Radio Buttons17:27
Checkbox Group8:43
Date Picker12:01
Login Form7:02
Registration Form10:22
Course Enrollment Form7:30
Wiring up a UI Library2:02
ChakraInput8:07
Wrapping Up2:40
This wrap-up reviews building and validating forms in React with Formik, including reusable controls for input, textarea, select, radios, checkboxes, and a date picker.
Resources

Introduction2:43
Rendering5:43
useState12:40
useReducer9:24
State Immutability11:17
Parent and Child11:02
Same Element Reference12:41
React memo8:23
Questions on Optimziation5:41
Incorrect memo with children6:10
Incorrect memo with Impure Component5:06
Incorrect memo with props Reference7:26
useMemo and useCallback4:22
Context11:13
Conext and memo4:11
Context and Same Element Reference3:38
Resources

Requirements

HTML, CSS and JavaScript fundamentals are absolutely required
You DON'T have to be a JavaScript expert to take up this course
NO prior React or any other JS framework experience is required!

Description

Start from 0 and learn everything to do with React and its ecosystem. This course will be an ever growing course as the react ecosystem is continously evolving. All updates aer of course availabl for free

Content and Overview

Specifically for beginners, this course contains all the fundamentals and advanced topics you need to know, in one place, simplified and straight forward!

If you're looking for a React develoepr job or planning on enhancing your React knowledge, this course will hit you with the utmost clarity on why React code is written the way it is.

We will start with the fundamentals and move on to the advanced topics, and hooks. We then dive into the React ecosystem starting with Redux and move on to working with Forms using Formik. Later on, explore some of the popular packages you tend to use in a React app. Focus on performance optimization and more.

Who this course is for:

Web developers interested in learning React and its ecosystem

React and its Ecosystem - A Complete Beginner's Guide

What you'll learn

Explore related topics

Course content

React Fundamentals25 lectures • 3hr 34min

React Advanced Topics19 lectures • 2hr 23min

React Hooks34 lectures • 3hr 54min

React and Redux30 lectures • 2hr 48min

Practical React14 lectures • 2hr 10min

React Formik45 lectures • 4hr 33min

React Render and Optimization17 lectures • 2hr 2min

Requirements

Description

Who this course is for: