Certified ReactJS Developer

TABLE OF CONTENTS

JavaScript Refresher

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

React Basics and Working with Components

• What are Components? And Why is React All About Them?
• React Code is Written in a Declarative Way
• Creating a New React Project
• Analyzing a Standard React Project
• Introducing JSX
• How React Works
• Building a First Custom Component
• Writing More Complex JSX Code
• Adding Basic CSS Styling
• Outputting Dynamic Data and Working with Expressions in JSX
• Passing Data Via "props"
• Adding "normal" JavaScript Logic to Components
• Splitting Components into Multiple Components
• Time to Practice: React and Component Basics - Problem
• Time to Practice: React and Component Basics - Solution
• The Concept of "Composition" ("children props")
• A First Summary
• A r Look at JSX
• Organizing Component Files
• An Alternative Function Syntax

React State and Working with Events

• Listening to Events and Working with Event Handlers
• How Component Functions are Executed
• Working with "State"
• A r Look at the "useState" Hook
• Adding Form Inputs
• Listening to User Input
• Working with Multiple States
• Using One State Instead (and What's Better)
• Updating State that Depends on the Previous State
• Handling Form Submission
• Adding Two-Way Binding
• Child-to-Parent Component Communication
• Lifting the State Up
• Time to Practice: Working with Events and State - Problem
• Time to Practice: Working with Events and State - Solution
• Controlled Versus Uncontrolled Components and Stateless Versus Stateful Components

Rendering Lists and Conditional Content

• Rendering Lists of Data
• Using Stateful Lists
• Understanding "Keys"
• Time to Practice: Working with Lists - Problem
• Time to Practice: Working with Lists - Solution
• Outputting Conditional Content
• Adding Conditional Return Statements
• Time to Practice: Conditional Content - Problem
• Time to Practice: Conditional Content - Solution
• Demo App: Adding a Chart
• Adding Dynamic Styles

Styling React Components

• Setting Dynamic Inline Styles
• Setting CSS Classes Dynamically
• Introducing Styled Components
• Styled Components and Dynamic Props
• Styled Components and Media Queries
• Using CSS Modules
• Dynamic Styles with CSS Modules

Debugging React Apps

• Understanding React Error Messages
• Analyzing Code Flow and Warnings
• Working with Breakpoints
• Using the React DevTools

A Complete Practice Project

• Adding a "User" Component
• Adding a Reusable "Card" Component
• Adding a Reusable "Button" Component
• Managing the User Input State
• Adding Validation and Resetting Logic
• Adding a User List Component
• Managing a List of Users Through State
• Adding the "ErrorModal" Component
• Managing the Error State

Working with Fragments, Portals, and "Refs"

• JSX Limitations and Workarounds
• Creating a Wrapper Component
• React Fragments
• Introducing React Portals
• Working with Portals
• Working with "refs"
• Controlled Versus Uncontrolled Components

Handling Side Effects, Using Reducers, and Using the Context API

• What are "Side Effects" and Introducing useEffect()
• Using the useEffect() Hook
• useEffect() and Dependencies
• Using the useEffect() Cleanup Function
• useEffect() Summary
• Introducing useReducer() and Reducers in General
• Using the useReducer() Hook
• useReducer() and useEffect()
• useReducer() Versus useState() for State Management
• Introducing React Context
• Using the React Context API
• Tapping into Context with the useContext() Hook
• Making Context Dynamic
• Building and Using a Custom Context Provider Component
• React Context Limitations
• Learning the "Rules of Hooks"
• Refactoring an Input Component
• Diving into "Forward Refs"

Building a Food Order App

• Starting Setup
• Adding a "Header" Component
• Adding the "Cart" Button Component
• Adding a "Meals" Component
• Adding Individual Meal Items and Displaying Them
• Adding a Form
• Working on the "Shopping Cart" Component
• Adding a Modal via a React Portal
• Managing Cart and Modal State
• Adding a Cart Context
• Using the Context
• Adding a Cart Reducer
• Working with Refs and Forward Refs
• Outputting Cart Items
• Working on a More Complex Reducer Logic
• Making Items Removable
• Using the useEffect() Hook

React and Optimization Techniques

• How React Really Works
• Component Updates in Action
• A r Look at Child Component Re-Evaluation
• Preventing Unnecessary Re-Evaluations with React.memo()
• Preventing Function Recreation with useCallback()
• useCallback() and its Dependencies
• A First Summary
• A r Look at State and Components
• Understanding State Scheduling and Batching
• Optimizing with useMemo()

Class-Based Components

• What and Why
• Adding the First Class-Based Component
• Working with State and Events
• The Component Lifecycle (Class-Based Components Only)
• Lifecycle Methods in Action
• Class-Based Components and Context
• Class-based versus Functional Components: A Summary
• Introducing Error Boundaries

Sending HTTP Requests

• How to Connect to a Database
• Our Starting App and Backend
• Sending a GET Request
• Using async/await
• Handling Loading and Data States
• Handling HTTP Errors
• Using useEffect() for Requests
• Preparing the Project for the Next Steps
• Sending a POST Request

Building Custom React Hooks

• What are "Custom Hooks"?
• Creating a Custom React Hook Function
• Using Custom Hooks
• Configuring Custom Hooks
• Onwards to a More Realistic Example
• Building a Custom HTTP Hook
• Using the Custom HTTP Hook
• Adjusting the Custom Hook Logic
• Using the Custom Hook in More Components

Working with Forms and User Input

• Our Starting Setup
• What's so Complex about Forms?
• Dealing with Form Submission and Getting User Input Values
• Adding Basic Validation
• Providing Validation Feedback
• Handling the "was touched" State
• React to Lost Focus
• Refactoring and Deriving States
• Managing the Overall Form Validity
• Time to Practice: Forms - Problem
• Time to Practice: Forms - Solution
• Adding a Custom Input Hook
• Reusing the Custom Hook
• Applying Our Hook and Knowledge to a New Form
• Using useReducer()

Adding HTTP and Forms to the Food Order App

• Moving "Meals" Data to the Backend
• Fetching Meals via HTTP
• Handling the Loading State
• Handling Errors
• Adding A Checkout Form
• Reading Form Values
• Adding Form Validation
• Submitting and Sending Cart Data
• Adding Better User Feedback

Diving into Redux

• Another Look at State in React Apps
• Redux versus React Context
• How Redux Works
• Exploring the Core Redux Concepts
• More Redux Basics
• Preparing a New Project
• Creating a Redux Store for React
• Providing the Store
• Using Redux Data in React Components
• Dispatching Actions from Inside Components
• Redux with Class-Based Components
• Attaching Payloads to Actions
• Working with Multiple State Properties
• How to Work with Redux State Correctly
• Redux Challenges and Introducing Redux Toolkit
• Adding State Slices
• Connecting Redux Toolkit State
• Migrating Everything to Redux Toolkit
• Working with Multiple Slices
• Reading and Dispatching from a New Slice
• Splitting Our Code

Advanced Redux

• Redux and Side Effects (and Asynchronous Code)
• Refresher/Practice: Part 1
• Refresher/Practice: Part 2
• Redux and Async Code
• Frontend Code Versus Backend Code
• Where to Put Our Logic
• Using useEffect() with Redux
• Handling HTTP States and Feedback with Redux
• Using an Action Creator Thunk
• Getting Started with Fetching Data
• Finalizing the Fetching Logic
• Exploring the Redux DevTools

Building a Multi-Page SPA with React Router

• What is Routing and Why?
• Installing React Router
• Defining and Using Routes
• Working with Links
• Using NavLinks
• Adding Dynamic Routes with Params
• Extracting Route Params
• Using "Switch" and "exact" for Configuring Routes
• Working with Nested Routes
• Redirecting the User
• Time to Practice: Onwards to a New Project
• Practice Redirecting and Extracting Params
• Practicing Nested Routes
• Adding a Layout Wrapper Component
• Adding Dummy Data and More Content
• Outputting Data on the "Details" Page
• Adding a "Not Found" Page
• Implementing Programmatic (Imperative) Navigation
• Preventing Possibly Unwanted Route Transitions with the "Prompt" Component
• Working with Query Parameters
• Getting Creative with Nested Routes
• Writing More Flexible Routing Code
• Sending and Getting Quote Data via HTTP
• Adding the "Comments" Feature
• Upgrading to React Router v6

Deploying React Apps

• Deployment Steps
• Adding Lazy Loading
• Building the Code for Production
• Getting Started with Deployment (Uploading Files)
• Exploring Routing Issues and Finishing Deployment

Authentication

• What, How, and Why?
• Starting Setup and First Steps
• Adding User Signup
• Showing Feedback to the User
• Adding User Login
• Managing the Auth State with Context
• Using the Token for Requests to Protected Resources
• Redirecting the User
• Adding Logout
• Protecting Frontend Pages
• Persisting the User Authentication Status
• Adding Auto-Logout
• Finishing Steps

An Introduction to Next.js

• What is NextJS?
• Key Feature 1: Built-In Server-Side Rendering (Improved SEO)
• Key Feature 2: Simplified Routing with File-Based Routing
• Key Feature 3: Build Fullstack Apps
• Creating a New Next.js Project and App
• Analyzing the Created Project
• Adding First Pages
• Adding Nested Paths and Pages (Nested Routes)
• Creating Dynamic Pages (with Parameters)
• Extracting Dynamic Parameter Values
• Linking Between Pages
• Onwards to a Bigger Project
• Preparing the Project Pages
• Outputting a List of Meetups
• Adding the New Meetup Form
• The "_app.js" File and Layout Wrapper
• Using Programmatic (Imperative) Navigation
• Adding Custom Components and CSS Modules
• How Pre-Rendering Works and Which Problem We Face
• Data Fetching for Static Pages
• Static Site Generation (SSG)
• Exploring Server-side Rendering (SSR) with "getServerSideProps"
• Working with Params for SSG Data Fetching
• Preparing Paths with "getStaticPaths" and Working with Fallback Pages
• Introducing API Routes
• Working with MongoDB
• Sending HTTP Requests to Our API Routes
• Getting Data from the Database
• Getting Meetup Details Data and Preparing Pages
• Adding "head" Metadata
• Deploying Next.js Projects
• Using Fallback Pages and Redeploying

Animating React Apps

• Preparing the Demo Project
• Using CSS Transitions
• Using CSS Animations
• CSS Transition and 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

Replacing Redux with React Hooks

• Starting Project and Why You Would Replace Redux
• Alternative: Using the Context API
• Toggling Favorites with the Context API
• Context API Summary
• 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

Testing React Apps

• What and Why?
• Understanding Different Kinds of Tests
• What to Test and How to Test
• Understanding the Technical Setup and Involved Tools
• Running the First Test
• Writing Our First Test
• Grouping Tests Together with Test Suites
• Testing User Interaction and State
• Testing Connected Components
• Testing Asynchronous Code
• Working with Mocks

React and TypeScript

• What and Why?
• Installing and Using TypeScript
• Exploring the Base Types
• Working with Array and Object Types
• Understanding Type Inference
• Using Union Types
• Understanding Type Aliases
• Functions and Function Types
• Diving into Generics
• Creating a React + TypeScript Project
• Working with Components and TypeScript
• Working with Props and TypeScript
• Adding a Data Model
• Time to Practice: Exercise Time!
• Form Submissions in TypeScript Projects
• Working with refs and useRef()
• Working with "Function Props"
• Managing State and TypeScript
• Adding Styling
• Time to Practice: Removing a Todo
• The Context API and TypeScript
• Exploring tsconfig.json

React Hooks Introduction and Summary

• What are React Hooks?
• The Starting Project
• Getting Started with useState()
• More on useState() and State Updating
• Array Destructuring
• Multiple States
• Rules of Hooks
• Passing State Data Across Components
• Time to Practice: Hooks Basics - Problem
• Time to Practice: Hooks Basics - Solution
• Sending HTTP Requests
• useEffect() and Loading Data
• Understanding useEffect() Dependencies
• More on useEffect()
• What's useCallback()?
• Working with Refs and useRef()
• Cleaning Up with useEffect()
• Deleting Ingredients
• Loading Errors and 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 and Components
• Using the Custom Hook

React Summary and Core Feature Walkthrough

• What is React?
• Why React?
• Building SPAs (Single-Page Applications)
• React Alternatives
• Creating a React Project
• Setting Up a Code Editor
• Diving into the Created Project
• How React Works and Understanding Components
• More Component Work and Styling with CSS Classes
• Building and Reusing Another Component
• Working with "props" and Dynamic Content
• Handling Events
• Adding More Components
• Introducing State
• Working with "Event Props" (Passing Function as Props)
• Adding Routing
• Adding Links and Navigation
• Styling with CSS Modules
• Outputting Lists of Data
• Adding More React Components
• Building Wrapper Components with props.children
• Adding a Form
• Getting User Input and Handling Form Submission
• Preparing the App for HTTP
• Sending a POST Request
• Navigating Programmatically
• Getting Started with Fetching Data
• Using the useEffect() Hook
• Introducing React Context
• Context Logic and Different Ways of Updating State
• Using Context in Components
• More Context Usage