React (incl. Hooks, React Router and Redux)

• Understand the basics of React, including creating components, managing state, and handling events.
• Learn how to use Hooks to manage state and create reusable logic.
• Understand how to use React Router to handle navigation between pages in a single-page application.
• Learn how to use Redux, a state management library that can be used in conjunction with React to manage complex application states.
• Set up a Redux store, define actions and reducers, and use the store to manage application states.
• Build several small applications to reinforce learning, including a simple to-do list app and a more complex e-commerce store.
• Gain a solid understanding of React and its ecosystem, as well as practical experience building real-world web applications.
• Enhance React skills and build robust, modern web applications.

• Recorded Videos After Training
• Digital Learning Material
• Course Completion Certificate
• 24x7 After Training Support

• Developers who want to learn how to manage complex application states using Redux in conjunction with React.

• Multisoft Systems provides a training certification after successful completion of React - (incl. Hooks, React Router and Redux) course.

Chapter 1: Getting Started

• Introduction
• What is React?
• Real-World SPAs React Web Apps
• Writing our First React Code
• Why Should we Choose React?
• React Alternatives
• Understanding Single Page Applications and Multi Page Applications
• Course Outline

Chapter 2: Refreshing Next Generation JavaScript

• Module Introduction
• Understanding "let" and "const"
• Arrow Functions
• Exports and Imports
• Understanding Classes
• Classes, Properties and Methods
• The Spread Rest Operator
• Destructuring
• Reference and Primitive Types Refresher
• Refreshing Array Functions
• Wrap Up

Chapter 3: Understanding the Base Features Syntax

• Module Introduction
• The Build Workflow
• Using Create React App
• Understanding the Folder Structure
• Understanding Component Basics
• Understanding JSX
• JSX Restrictions
• Creating a Functional Component
• Working with Components Re-Using Them
• Outputting Dynamic Content
• Working with Props
• Understanding the Children Property
• Understanding Using State
• Handling Events with Methods
• Manipulating the State
• Using the useState() Hook for State Manipulation
• Stateless vs Stateful Components
• Passing Method References between Components
• Adding Two Way Binding
• Adding Styling with Stylesheets
• Working with Inline Styles

Chapter 4: Working with Lists and Conditionals

• Module Introduction
• Rendering Content Conditionally
• Handling Dynamic Content "The JavaScript Way"
• Outputting Lists (Intro)
• Outputting Lists
• Lists State
• Updating State Immutably
• Lists Keys
• Flexible Lists

Chapter 5: Styling React Components Elements

• Module Introduction
• Outlining the Problem Set
• Setting Styles Dynamically
• Setting Class Names Dynamically
• Adding and Using Radium
• Using Radium for Media Queries
• Introducing Styled Components
• More on Styled Components
• Styled Components Dynamic Styles
• Working with CSS Modules
• CSS Modules Media Queries

Chapter 6: Debugging React Apps

• Module Introduction
• Understanding Error Messages
• Finding Logical Errors by using Dev Tools Sourcemaps
• Working with the React Developer Tools
• Using Error Boundaries (React 16+)

Chapter 7: Diving Deeper into Components React Internals

• Module Introduction
• A Better Project Structure
• Splitting an App into Components
• Comparing Stateless and Stateful Components
• Class-based vs Functional Components
• class Component Lifecycle Overview
• Component Creation Lifecycle in Action
• Component Updating Lifecycle (for props Changes)
• Component Updating Lifecycle (for state Changes)
• Using useEffect() in Functional Components
• Controlling the useEffect() Behavior
• Cleaning up with Lifecycle Hooks useEffect()
• Cleanup Work with useEffect() - Ex
• Using shouldComponentUpdate for Optimization
• Optimizing Functional Components with React.memo()
• When should you optimize?
• PureComponents instead of shouldComponentUpdate
• How React Updates the DOM
• Rendering Adjacent JSX Elements
• Using React.Fragment
• Higher Order Components (HOC) - Introduction
• Another Form of HOCs
• Passing Unknown Props
• Setting State Correctly
• Using PropTypes
• Using Refs
• Refs with React Hooks
• Understanding Prop Chain Problems
• Using the Context API
• contextType useContext()

Chapter 8: A Real App: The Burger Builder (Basic Version)

• Module Introduction
• Planning an App in React - Core Steps
• Planning our App - Layout and Component Tree
• Planning the State
• Setting up the Project
• Creating a Layout Component
• Starting Implementation of the Burger Builder Container
• Adding a Dynamic Ingredient Component
• Adding Prop Type Validation
• Starting the Burger Component
• Outputting Burger Ingredients Dynamically
• Calculating the Ingredient Sum Dynamically
• Adding the Build Control Component
• Outputting Multiple Build Controls
• Connecting State to Build Controls
• Removing Ingredients Safely
• Displaying and Updating the Burger Price
• Adding the Order Button
• Creating the Order Summary Modal
• Showing Hiding the Modal (with Animation!)
• Implementing the Backdrop Component
• Adding a Custom Button Component
• Implementing the Button Component
• Adding the Price to the Order Summary
• Adding a Toolbar
• Using a Logo in our Application
• Adding Reusable Navigation Items
• Creating a Responsive Sidedrawer
• Working on Responsive Adjustments
• More about Responsive Adjustments
• Reusing the Backdrop
• Adding a Sidedrawer Toggle Button
• Adding a Hamburger Icon
• Improving the App: Introduction
• Prop Type Validation
• Improving Performance
• Using Component Lifecycle Methods
• Changing the Folder Structure

Chapter 9: Reaching out to the Web (Http / Ajax)

• Module Introduction
• Understanding Http Requests in React
• Understanding our Project and Introducing Axios
• Creating Http Request to GET Data
• Rendering Fetched Data to the Screen
• Transforming Data
• Making a Post Selectable
• Fetching Data on Update (without Creating Infinite Loops)
• POSTing Data to the Server
• Sending a DELETE Request
• Fixing a Bug
• Handling Errors Locally
• Adding Interceptors to Execute Code Globally
• Setting a Default Global Configuration for Axios
• Creating and Using Axios Instances

Chapter 10: Burger Builder Project: Accessing a Server

• Module Introduction
• Creating the Firebase Project
• Creating the Axios Instance
• Sending a POST Request
• Displaying a Spinner while Sending a Request
• Handling Errors
• Retrieving Data from the Backend
• Removing Old Interceptors

Chapter 11 : Multi-Page-Feeling in a Single-Page-App: Routing

• Module Introduction
• Routing and SPAs
• Setting up Links
• Setting Up the Router Package
• Preparing the Project for Routing
• Setting Up and Rendering Routes
• Rendering Components for Routes
• Switching Between Pages
• Using Links to Switch Pages
• Using Routing-Related Props
• The "withRouter" HOC Route Props
• Absolute vs Relative Paths
• Styling the Active Route
• Passing Route Parameters
• Extracting Route Parameters
• Using Switch to Load a Single Route
• Navigating Programmatically
• Additional Information Regarding Active Links
• Understanding Nested Routes
• Creating Dynamic Nested Routes
• Redirecting Requests
• Conditional Redirects
• Using the History Prop to Redirect (Replace)
• Working with Guards
• Handling the 404 Case (Unknown Routes)
• Loading Routes Lazily
• Lazy Loading with React Suspense (16.6)
• Routing and Server Deployment

Chapter 12: Adding Routing to our Burger Project

• Module Introduction
• Building the Checkout Container
• Setting Up Routing Routes
• Navigating to the Checkout Page
• Navigating Back To Next Page
• Passing Ingredients via Query Params
• Navigating to the Contact Data Component
• Order Submission Passing Data between Pages
• Adding an Orders Page
• Implementing Navigation Links
• Fetching Orders
• Outputting the Orders

Chapter 13 : Forms and Form Validation

• Module Introduction
• Analyzing the App
• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Adding a Dropdown Component
• Handling User Input
• Handling Form Submission
• Adding Custom Form Validation
• Fixing a Common Validation Gotcha
• Adding Validation Feedback
• Improving Visual Feedback
• Handling Overall Form Validity

Chapter 14: Redux

• Module Introduction
• Understanding State
• The Complexity of Managing State
• Understanding the Redux Flow
• Setting Up Reducer and Store
• Dispatching Actions
• Adding Subscriptions
• Connecting React to Redux
• Connecting the Store to React
• Dispatching Actions from within the Component
• Assignment 4: Time to Practice – Dispatching actions
• [OPTIONAL] Dispatching Actions Assignment Solution
• Passing and Retrieving Data with Action
• Switch-Case in the Reducer
• Updating State Immutably
• Updating Arrays Immutably
• Outsourcing Action Types
• Combining Multiple Reducers
• Understanding State Types

Chapter 15: Adding Redux to our Project

• Module Introduction
• Installing Redux and React Redux
• Basic Redux Setup
• Finishing the Reducer for Ingredients
• Connecting the Burger Builder Container to our Store
• Working on the Total Price Calculation
• Redux UI State
• Adjusting Checkout and Contact Data

Chapter 16: Redux Advanced

• Module Introduction
• Adding Middleware
• Using the Redux Devtools
• Executing Asynchronous Code: Introduction
• Introducing Action Creators
• Action Creators Async Code
• Handling Asynchronous Code
• Restructuring Actions
• Where to Put Data Transforming Logic?
• Using Action Creators and Get State
• Using Utility Functions
• A Leaner Switch Case Statement
• An Alternative Folder Structure
• Diving Much Deeper

Chapter 17: Redux Advanced: Burger Project

• Module Introduction
• Installing the Redux Devtools
• Preparing the Folder Structure
• Creating Action Creators
• Executing Asynchronous Code
• Fetching Ingredients Asynchronously
• Initializing Ingredients in the BurgerBuilder
• Changing the Order of our Ingredients Manually
• Adding Order Actions
• Connecting Contact Data Container Actions
• The Order Reducer
• Working on Order Actions
• Redirect to Improve UX
• Combining Reducers
• Handling Purchases Updating the UI
• Resetting the Price after Purchases
• Fetching Orders (via Redux)
• Checking our Implemented Functionalities
• Refactoring Reducers
• Refactoring Reducers Continued

Chapter 18: Adding Authentication to our Burger Project

• Module Introduction
• Understanding Authentication in Single Page Applications
• Required App Adjustments
• Adding an Auth Form
• Adding Actions
• Getting a Token from the Backend
• Adding Sign-In
• Storing the Token
• Adding a Spinner
• Logging Users Out
• Accessing Protected Resources
• Updating the UI Depending on Auth State
• Adding a Logout Link
• Forwarding Unauthenticated Users
• Redirecting the User to the Checkout Page
• Persistent Auth State with localStorage
• Fixing Connect + Routing Errors
• Ensuring App Security
• Guarding Routes
• Displaying User Specific Orders

Chapter 19: Improving our Burger Project

• Module Introduction
• Fixing the Redirect to the Frontpage
• Using updateObject in the Entire App
• Sharing the Validation Method
• Using Environment Variables
• Removing console.log()s
• Adding Lazy Loading

Chapter 20 : Testing

• Module Introduction
• What is Testing?
• Required Testing Tools
• What To Test?
• Writing our First Test
• Testing Components Continued
• Jest and Enzyme Documentations
• Testing Components Correctly
• Testing Containers
• How to Test Redux

Chapter 21: Deploying the App to the Web

• Module Introduction
• Deployment Steps
• Building the Project
• Example: Deploying on Firebase

Chapter 22: Bonus: Working with Webpack

• Module Introduction
• Introducing Webpack
• How Webpack works
• Basic Workflow Requirements
• Project npm Setup
• Creating a Basic Folder File Structure
• Creating the Basic React Application
• Installing Production Dependencies
• Setting Up the Basic Webpack Config
• Adding File Rules Babel
• Loading CSS Files
• Loading Images Injecting into HTML Page
• Production Workflow Wrap Up

Chapter 23: Bonus: Next.js

• Module Introduction
• Understanding Server Side Rendering
• Setting up a Project
• Understanding the Basics
• Next.js Components Pages
• Styling our App in Next.js
• Handling (404) Errors
• A Special Lifecyle Hook
• Deploying our App

Chapter 24: Bonus: Animations in React Apps

• Module Introduction
• Preparing the Demo Project
• Using CSS Transitions
• Using CSS Animations
• CSS Transition Animations Limitations
• Using ReactTransitionGroup
• Using the Transition Component
• Wrapping the Transition Component
• Animation Timings
• Transition Events
• The CSSTransition Component
• Customizing CSS Classnames
• Animating Lists
• Alternative Animation Packages

Chapter 25: Bonus: A Brief Introduction to Redux Saga

• Module Introduction
• Installing Redux Saga
• Creating our First Saga
• Hooking the Saga Up (to the Store and Actions)
• Moving Logic from the Action Creator to a Saga
• Moving More Logic Into Sagas
• Handling Authentication with a Saga
• Handling Auto-Sign-In with a Saga
• Moving the BurgerBuilder Side Effects into a Saga
• Moving the Orders Side Effects into Sagas
• Why Sagas can be Helpful
• Diving Deeper into Sagas

Chapter 26: React Hooks

• Introduction
• What are "React Hooks"?
• The Starting Project
• Getting Started with useState()
• More on useState() State Updating
• Array Destructuring
• Multiple States
• Rules of Hooks
• Passing State Data Across Components
• Sending Http Requests
• useEffect() Loading Data
• Understanding useEffect() Dependencies
• More on useEffect()
• What's useCallback()?
• Working with Refs useRef()
• Cleaning Up with useEffect()
• Deleting Ingredients
• Loading Errors State Batching
• Understanding useReducer()
• Using useReducer() for the Http State
• Working with useContext()
• Performance Optimizations with useMemo()
• Getting Started with Custom Hooks
• Sharing Data Between Custom Hooks Components
• Using the Custom Hook

Chapter 27: Using Hooks in the Burger Builder

• Introduction
• Converting
• Routing with React.lazy()
• Converting the Layout Component
• Converting withErrorHandler HOC
• Adjusting the Order Checkout Containers
• Add Hooks to ContactData
• Converting the BurgerBuilder Container
• Adjusting Auth Logout Components
• Using React.memo() More!
• Adding a Custom Error Handling Hook
• Setting the right useEffect() Dependencies
• Working with useSelector() and useDispatch()

Chapter 28: Bonus: Replacing Redux with React Hooks

• Module Introduction
• Starting Project Why You Would Replace Redux
• Alternative: Using the Context API
• Toggling Favorites with the Context API
• Context API Summary (and why NOT to use it instead of Redux)
• Getting Started with a Custom Hook as a Store
• Finishing the Store Hook
• Creating a Concrete Store
• Using the Custom Store
• Custom Hook Store Summary
• Optimizing the Custom Hook Store

Chapter 29: Bonus: Building the Burger CSS

• Building the Burger CSS Code