1. Getting Started FREE CHAPTER

• 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

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

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
• Assignment 1: Time to Practice - The Base Syntax
• [OPTIONAL] Base Syntax Assignment Solution

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
• Wrap Up
• Assignment 2: Time to Practice - Lists and Conditions
• [OPTIONAL] Lists and Conditions Assignment Solution

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

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+)
• Wrap Up

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()
• Wrap Up

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
• Wrap Up

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
• Wrap Up

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

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
• Assignment 3: Time to Practice - Routing
• [OPTIONAL] Routing Assignment Solution
• Wrap Up

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
• Wrap Up

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
• Wrap Up
• Fixing a Bug

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
• Assignment 5: Time to Practice – Redux Basics
• [OPTIONAL] Redux basics Assignment Solution
• Combining Local UI State and Redux
• Wrap Up

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
• Wrap Up

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
• Wrap Up

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
• Wrap Up

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
• Wrap Up

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
• Wrap Up

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
• Wrap Up

21. Deploying the App to the Web

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

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

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

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
• Wrap Up

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

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
• Assignment 6: Time to Practice – Hooks Basics
• [OPTIONAL] Hook Assignment Solution
• 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
• Wrap Up

27. Using Hooks in the Burger Builder

• Introduction
• Converting <App>
• 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()
• Wrap Up

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
• Wrap Up

29. Bonus: Building the Burger CSS

• Building the Burger CSS Code

30. Next Steps and Course Roundup

• Module Introduction
• React Rocks! Where to find more Examples
• More Inspiration: Real-World Projects Built with React
• Static React Apps with Gatsby.js
• Introducing React Native
• Component Libraries (Example: Material UI)
• Smaller Apps with Preact
• Comparing React with Preact
• Congratulations