Introduction to this course
•Preparations
•Advanced JavaScript
•Structure
•Const, Let and Var
•[TASK] Const, Let and Var
•[SOLUTION]: Const, Let and Var
•Function Constructors & Classes
•[TASK] Function Constructors & Classes
•[SOLUTION] Function Constructors & Classes
•Function References
•[TASK] Function References
•[SOLUTION] Function References
•Arrow Functions
•[TASK] Arrow Functions
•[SOLUTION] Arrow Functions
•Promises / Async / Await
•[TASK] Promises / Async / Await
•[SOLUTION] Promises / Async / Await
•Destructuring
•[TASK] Destructuring
•[SOLUTION] Destructuring
•Spread Operator
•[TASK] Spread Operator
•[SOLUTION] Spread Operator
•Rest Operator
•[TASK] Rest Operator
•[SOLUTION] Rest Operator
•Key Interpolation
•[TASK] Key Interpolation
•[SOLUTION] Key Interpolation
•Map & Filter
•[TASK] Map & Filter
•[SOLUTION] Map & Filter
•Modules
•[TASK] Modules
•[SOLUTION] Modules
•Ternary Operator
•[TASK] Ternary Operator
•[SOLUTION] Ternary Operator
•React Classic: Introduction
•Windows Installation
•MacOS Installation
•Ubuntu Linux Installation
•HalloWorld
•JSX: Expressions & Conditional Rendering
•[TASK] JSX: Expressions & Conditional Rendering
•[SOLUTION] JSX: Expressions & Conditional Rendering
•JSX: Arrays
•[TASK] JSX: Arrays
•[SOLUTION] JSX: Arrays
•CSS
•[TASK] CSS
•[SOLUTION] CSS
•Sub-Components
•[TASK] Sub-Components
•[SOLUTION] Sub-Components
•React Classic: State & Events
•Definition of State
•[TASK] Definition of State
•[SOLUTION] Definition of State
•Definition of Events
•[TASK] Definition of Events
•[SOLUTION] Definition of Events
•Events in JSX-Lists
•[TASK] Events in JSX-Lists
•[SOLUTION] Events in JSX-Lists
•React Classic: Communication between 2 components
•Stateful VS. Stateless Components
•[TASK] Stateful VS. Stateless Components
•[SOLUTION] Stateful VS. Stateless Components
•Downward Communication via Passing Function References
•[TASK] Downward Communication via Passing Function References
•[SOLUTION] Downward Communication via Passing Function References
•Upward Communication via Passing Function References
•Excourse: Radio Buttons
•[TASK] Upward Communication via Passing Function References
•[SOLUTION] Upward Communication via Passing Function References
•Sub-Components with an Ending-Tag
•[TASK] Sub-Components with an Ending-Tag
•[SOLUTION] Sub-Components with an Ending-Tag
•React Classic: Lifecycle
•Overview
•Mounting Phase
•Updating Phase
•Unmounting Phase
•[TASK] Lifecycle
•[SOLUTION] Lifecycle
•React Classic: Routing
•Definition of a Route
•[TASK] Definition of a Route
•[SOLUTION] Definition of a Route
•React Classic: Multi-Layered Communication
•Props Drilling
•[TASK] Props Drilling
•[SOLUTION] Props Drilling
•Context API
•[TASK] Context API
•[SOLUTION] Context API
•Context API with Reducer
•[TASK] Context API with Reducer
•[SOLUTION] Context API with Reducer
•Redux
•[TASK] Redux
•[SOLUTION] Redux
•Redux With Two Reducers
•[TASK] Redux With Two Reducers
•[SOLUTION] Redux With Two Reducers
•React Classic: AJAX
•Fetch
•[TASK] Fetch
•[SOLUTION] Fetch
•Redux Thunk
•[TASK] Redux Thunk
•[SOLUTION] Redux Thunk
•Localhost as Backend
•[TASK] Localhost as Backend
•[SOLUTION] Localhost as Backend
•React Classic: HOC
•Definition
•[TASK] Higher Order Components
•[SOLUTION] Higher Order Components
•React Classic: Refs
•[TASK] HalloWorld
•[SOLUTION] HalloWorld
•React Hooks: Introduction
•Structure & Preparation
•Motivation: Why React Hooks?
•React Hooks: useState
•Example: HalloWorld
•Primitives
•Example: Primitives
•Objects
•Example: Objects
•Arrays
•Example: Arrays
•[TASK] useState
•[SOLUTION] useState
•React Hooks: useEffect
•Example: Any Variable Changes
•Example: One or multiple variables change
•Example: After the component has mounted
•Example: Before the component unmounts
•AJAX
•Example: Initial Data Load
•Example: Data Load when State Variable Changes
•[TASK] useEffect
•[SOLUTION] useEffect
•React Hooks: useContext
•Changing the context
•Example: Changing the context
•Multiple Contexts
•Example: Multiple Contexts
•[TASK] useContext
•[SOLUTION] useContext
•React Hooks: useReducer
•Primitives, Objects and Arrays
•[TASK] useReducer
•[SOLUTION] useReducer
•React Hooks: useContext + useReducer
•[TASK] useReducer + useContext
•[SOLUTION] useReducer + useContext
•React Hooks: useMemo
•useEffect VS useMemo
•Example: useEffect VS useMemo
•[EXCOURSE] Sorting in Arrays
•[TASK] useMemo
•[SOLUTION] useMemo
•React Hooks: useCallback
•Example: useCallback
•Example: React.memo
•[TASK] useCallback + React.memo
•[SOLUTION] useCallback + React.memo
•React Hooks: useRef
•[TASK] useRef
•[SOLUTION] useRef
•React Hooks: Custom Hooks
•[TASK] Custom Hook
•[SOLUTION] Custom Hook
•