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