React – The Complete Guide with React Hook Redux in 4hr

Course Curriculum

Lecture 1: Introduction

Lecture 2: How to create a blank new react app

Chapter 1: [OPTIONAL] Quick review on es6

Lecture 1: var let and const

Lecture 2: The problem of using let in switch cases

Lecture 3: Template literal

Lecture 4: Arrow function

Lecture 5: Classes

Lecture 6: Spread operator

Lecture 7: Destructuring

Lecture 8: Primitive vs Reference

Lecture 9: Primitive vs Reference

Lecture 10: Import and export

Lecture 11: Array function

Lecture 12: For in For of

Chapter 2: [REACT ESSENTIALS] JSX

Lecture 1: What is JSX?

Lecture 2: Import CSS

Lecture 3: inline CSS

Lecture 4: Curly braces in react

Lecture 5: Styles object

Lecture 6: Fast track to convert CSS to JS object

Lecture 7: store jsx element to variable

Chapter 3: [REACT ESSENTIALS] Functional Component

Lecture 1: Create a list of card

Lecture 2: Create card component

Chapter 4: [REACT ESSENTIALS] Props

Lecture 1: Pass and receive props

Lecture 2: Pass multiple props

Lecture 3: The children of props

Chapter 5: [REACT ESSENTIALS] State

Lecture 1: useState and Change of State

Lecture 2: passing function to component

Lecture 3: Two way binding

Lecture 4: Conditional rendering

Chapter 6: [REACT ESSENTIALS] List

Lecture 1: Rendering a list of cards

Lecture 2: Delete a specific card

Lecture 3: Fix unique key error

Lecture 4: Change the name of a specific card

Chapter 7: [REACT ESSENTIALS] Style

Lecture 1: Dynamic style with javascript

Lecture 2: Dynamic style with classes

Lecture 3: Styled component

Lecture 4: Theme

Lecture 5: Extract the styled button

Chapter 8: [REACT ESSENTIALS] Lifecycle and useEffect

Lecture 1: Convert functional base to class base

Lecture 2: Convert Card component to class base component

Lecture 3: Life Cycle Methods Diagram

Lecture 4: React lifecycle – mounting

Lecture 5: React lifecycle – updating

Lecture 6: React lifecycle – unmounting

Lecture 7: useEffect

Lecture 8: useEffect clean up

Chapter 9: [REACT ESSENTIALS] React hooks – to improve the performance of the app

Lecture 1: useEffect fetch data with axios

Lecture 2: useEffect fetch a card

Lecture 3: React Context

Lecture 4: Multiple React Context

Lecture 5: useContext

Lecture 6: useReducer (Simpiflied)

Lecture 7: useReducer (Normal)

Lecture 8: multiple useReducer

Lecture 9: useReducer with useContext

Lecture 10: use of useReducer with useContext

Lecture 11: use useReducer with useEffect to fetch the data

Lecture 12: Beautify the list with ReactStrap / Bootstrap

Lecture 13: useMemo

Lecture 14: useMemo

Lecture 15: useRef

Lecture 16: useRef – deal with the unmount component problems

Lecture 17: useCallback – to prevent the recreation of function

Lecture 18: custom Hook – extract the logic

Lecture 19: custom Hook.- using in form

Chapter 10: [REACT ESSENTIALS] React Router

Lecture 1: React Router

Lecture 2: Link and NavLink

Lecture 3: Program to redirect

Lecture 4: Higher Order Component

Lecture 5: Fetch the posts by using axios

Lecture 6: Passing Parameters

Lecture 7: Fetch specific post and using Switch from React Router

Lecture 8: Page Not Found

Lecture 9: Protected Route

Lecture 10: Apply Protected Route

Chapter 11: [REACT ESSENTIALS] Redux

Lecture 1: Redux simplified version

Lecture 2: Reducer

Lecture 3: Store

Lecture 4: Actions

Lecture 5: Display the value with useSelector and also useDispatch

Lecture 6: Dispatch the login action

Chapter 12: [PROJECTS] Autocomplete search from remote api

Lecture 1: Start a new project, install axios and adminlte

Lecture 2: Create the onchangehandler function

Lecture 3: Make suggestions base on user input

Lecture 4: Render the suggestion list

Lecture 5: Select the suggestion

Chapter 13: [PROJECTS] Evernote Clone