Enrolment options
- Enrolled students: There are no students enrolled in this course.
Guests cannot access this course. Please log in.
Course content
Sections:
31
•
Activities:
0
•
Resources:
441
- 001-Welcome To The Course
- 002-What is React js
- 003-Why React Instead Of Just JavaScript
- 004-Building Single Page Applications SPAs with React
- 005-Exploring React js Alternatives Angular Vue
- 007-About This Course Course Outline
- 008-The Two Ways Paths Of Taking This Course
- 009-Getting The Most Out Of This Course
- 010-Setting Up The Course Dev Environment Code Editor
- 011-Module Introduction
- 012-Understanding let and const
- 013-Arrow Functions
- 014-Exports and Imports
- 015-Understanding Classes
- 016-Classes Properties and Methods
- 017-The Spread Rest Operator
- 018-Destructuring
- 019-Reference and Primitive Types Refresher
- 020-Refreshing Array Functions
- 021-Wrap Up
- 024-Module Introduction
- 025-What Are Components And Why Is React All About Them
- 026-React Code Is Written In A Declarative Way
- 027-Creating a new React Project
- 029-Analyzing a Standard React Project
- 030-Introducing JSX
- 031-How React Works
- 032-Building a First Custom Component
- 033-Writing More Complex JSX Code
- 034-Adding Basic CSS Styling-
- 035-Outputting Dynamic Data Working with Expressions in JSX
- 036-Passing Data via props
- 037-Adding normal JavaScript Logic to Components
- 038-Splitting Components Into Multiple Components
- 040-The Concept of Composition children props
- 041-A First Summary
- 042-A Closer Look At JSX
- 043-Organizing Component Files
- 044-An Alternative Function Syntax
- 047-Module Introduction
- 048-Listening to Events Working with Event Handlers
- 049-How Component Functions Are Executed
- 047-Module Introduction (copy) (copy) (copy)
- 050-Working with State
- 051-A Closer Look at the useState Hook
- 053-Adding Form Inputs
- 054-Listening to User Input
- 055-Working with Multiple States
- 056-Using One State Instead And What s Better
- 057-Updating State That Depends On The Previous State
- 058-Handling Form Submission
- 059-Adding Two Way Binding
- 060-Child to Parent Component Communication Bottom up
- 061-Lifting The State Up
- 063-Controlled vs Uncontrolled Components Stateless vs Stateful Components
- 066-Module Introduction
- 067-Rendering Lists of Data-
- 068-Using Stateful Lists
- 069-Understanding Keys
- 071-Outputting Conditional Content
- 072-Adding Conditional Return Statements
- 074-Demo App Adding a Chart
- 075-Adding Dynamic Styles
- 076-Wrap Up Next Steps
- 080-Module Introduction
- 081-Setting Dynamic Inline Styles
- 082-Setting CSS Classes Dynamically
- 083-Introducing Styled Components
- 084-Styled Components Dynamic Props
- 085-Styled Components Media Queries
- 086-Using CSS Modules
- 087-Dynamic Styles with CSS Modules
- 089-Module Introduction
- 090-Understanding React Error Messages
- 091-Analyzing Code Flow Warnings
- 092-Working with Breakpoints
- 093-Using the React DevTools
- 095-Module Introduction
- 096-Adding a User Component
- 097-Adding a re usable Card Component
- 098-Adding a re usable Button Component
- 099-Managing the User Input State
- 100-Adding Validation Resetting Logic
- 101-Adding a Users List Component
- 102-Managing a List Of Users via State
- 103-Adding The ErrorModal Component
- 104-Managing the Error State
- 106-Module Introduction
- 107-JSX Limitations Workarounds
- 108-Creating a Wrapper Component
- 109-React Fragments
- 110-Introducing React Portals
- 111-Working with Portals
- 112-Working with ref
- 113-Controlled vs Uncontrolled Components
- 115-Module Introduction
- 116-What are Side Effects Introducing useEffect
- 117-Using the useEffect Hook
- 118-useEffect Dependencies
- 120-Using the useEffect Cleanup Function
- 121-useEffect Summary
- 122-Introducing useReducer Reducers In General
- 123-Using the useReducer Hook
- 124-useReducer useEffect
- 126-useReducer vs useState for State Management
- 127-Introducing React Context Context API
- 128-Using the React Context API
- 129-Tapping Into Context with the useContext Hook
- 130-Making Context Dynamic
- 131-Building Using a Custom Context Provider Component
- 132-React Context Limitations
- 133-Learning the Rules of Hooks
- 134-Refactoring an Input Component
- 135-Diving into Forward Refs
- 137-Module Introduction
- 138-Starting Setup
- 139-Adding a Header Component
- 140-Adding the Cart Button Component
- 141-Adding a Meals Component
- 142-Adding Individual Meal Items Displaying Them
- 143-Adding a Form
- 145-Working on the Shopping Cart Component
- 146-Adding a Modal via a React Portal
- 147-Managing Cart Modal State
- 148-Adding a Cart Context
- 149-Using the Context
- 150-Adding a Cart Reducer
- 151-Working with Refs Forward Refs
- 152-Outputting Cart Items
- 153-Working on a More Complex Reducer Logic
- 154-Making Items Removable
- 155-Using the useEffect Hook
- 157-Module Introduction
- 158-How React Really Works
- 159-Component Updates In Action
- 160-A Closer Look At Child Component Re Evaluation
- 161-Preventing Unnecessary Re Evaluations with React memo
- 162-Preventing Function Re Creation with useCallback
- 163-useCallback and its Dependencies
- 164-A First Summary
- 165-A Closer Look At State Components
- 166-Understanding State Scheduling Batching
- 167-Optimizing with useMemo
- 169-Module Introduction
- 170-What Why
- 171-Adding a First Class based Component
- 172-Working with State Events
- 173-The Component Lifecycle Class based Components Only
- 174-Lifecycle Methods In Action
- 175-Class based Components Context
- 176-Class based vs Functional Components A Summary
- 177-Introducing Error Boundaries
- 179-Module Introduction
- 180-How To Not Connect To A Database
- 181-Our Starting App Backend
- 182-Sending a GET Request
- 183-Using async await
- 184-Handling Loading Data States
- 185-Handling Http Errors
- 186-Using useEffect For Requests
- 187-Preparing The Project For The Next Steps
- 188-Sending a POST Request
- 189-Wrap Up
- 191-Module Introduction
- 192-What are Custom Hooks
- 193-Creating a Custom React Hook Function
- 194-Using Custom Hooks
- 195-Configuring Custom Hooks
- 196-Onwards To A More Realistic Example
- 197-Building a Custom Http Hook
- 198-Using the Custom Http Hook
- 199-Adjusting the Custom Hook Logic
- 200-Using The Custom Hook In More Components
- 202-Module Introduction
- 203-Our Starting Setup
- 204-What s So Complex About Forms
- 205-Dealing With Form Submission Getting User Input Values
- 206-Adding Basic Validation
- 207-Providing Validation Feedback
- 208-Handling the was touched State
- 209-React To Lost Focus
- 210-Refactoring Deriving States
- 211-Managing The Overall Form Validity
- 213-Adding A Custom Input Hook
- 214-Re Using The Custom Hook
- 215-A Challenge For You
- 216-Applying Our Hook Knowledge To A New Form
- 217-Summary
- 218-Bonus Using useReducer
- 220-Module Introduction
- 221-Moving Meals Data To The Backend
- 222-Fetching Meals via Http
- 223-Handling the Loading State
- 224-Handling Errors
- 225-Adding A Checkout Form
- 226-Reading Form Values
- 227-Adding Form Validation
- 228-Submitting Sending Cart Data
- 229-Adding Better User Feedback
- 230-Summary-
- 232-Module Introduction
- 233-Another Look At State In React Apps
- 234-Redux vs React Context
- 235-How Redux Works
- 236-Exploring The Core Redux Concepts
- 237-More Redux Basics
- 238-Preparing a new Project
- 239-Creating a Redux Store for React
- 240-Providing the Store
- 241-Using Redux Data in React Components
- 242-Dispatching Actions From Inside Components
- 243-Redux with Class based Components
- 244-Attaching Payloads to Actions
- 245-Working with Multiple State Properties-
- 247-Redux Challenges Introducing Redux Toolkit
- 248-Adding State Slices
- 249-Connecting Redux Toolkit State
- 250-Migrating Everything To Redux Toolkit
- 251-Working with Multiple Slices
- 252-Reading Dispatching From A New Slice
- 253-Splitting Our Code-
- 254-Summary
- 256-Module Introduction
- 257-Redux Side Effects and Asynchronous Code
- 258-Refresher Practice Part 1 2
- 259-Refresher Practice Part 2 2
- 260-Redux Async Code
- 261-Frontend Code vs Backend Code
- 262-Where To Put Our Logic
- 263-Using useEffect with Redux
- 265-Handling Http States Feedback with Redux
- 266-Using an Action Creator Thunk
- 267-Getting Started with Fetching Data
- 268-Finalizing the Fetching Logic
- 269-Exploring the Redux DevTools
- 270-Summary
- 272-Module Introduction
- 273-What is Routing Why
- 274-Installing React Router
- 275-Defining Using Routes
- 276-Working with Links
- 277-Using NavLinks
- 278-Adding Dynamic Routes with Params
- 279-Extracting Route Params
- 280-Using Switch and exact For Configuring Routes
- 281-Working with Nested Routes
- 282-Redirecting The User
- 283-Time to Practice Onwards to a New Project
- 284-Practice Redirecting Extracting Params
- 285-Practicing Nested Routes
- 286-Adding a Layout Wrapper Component
- 287-Adding Dummy Data More Content
- 288-Outputting Data on the Details Page
- 289-Adding a Not Found Page
- 290-Implementing Programmatic Imperative Navigation
- 291-Preventing Possibly Unwanted Route Transitions with the Prompt Component
- 292-Working with Query Parameters
- 293-Getting Creative With Nested Routes
- 294-Writing More Flexible Routing Code
- 295-Sending Getting Quote Data via Http
- 296-Adding the Comments Features
- 298-Module Introduction
- 299-Deployment Steps
- 300-Adding Lazy Loading
- 301-Building The Code For Production
- 302-Getting Started With Deployment Uploading Files
- 303-Exploring Routing Issues Finishing Deployment
- 305-Module Introduction
- 306-What How Why
- 308-Starting Setup First Steps
- 309-Adding User Signup
- 310-Showing Feedback To The User
- 311-Adding User Login
- 312-Managing The Auth State With Context
- 313-Using The Token For Requests To Protected Resources
- 314-Redirecting The User
- 315-Adding Logout
- 316-Protecting Frontend Pages
- 317-Persisting The User Authentication Status
- 318-Adding Auto Logout
- 319-Finishing Steps
- 321-Module Introduction
- 322-What is NextJS
- 323-Key Feature 1 Built in Server side Rendering Improved SEO
- 324-Key Feature 2 Simplified Routing with File based Routing
- 325-Key Feature 3 Build Fullstack Apps
- 326-Creating a New Next js Project App
- 327-Analyzing the Created Project
- 328-Adding First Pages
- 329-Adding Nested Paths Pages Nested Routes
- 330-Creating Dynamic Pages with Parameters
- 331-Extracting Dynamic Parameter Values
- 332-Linking Between Pages
- 333-Onwards to a bigger Project
- 334-Preparing the Project Pages
- 335-Outputting a List of Meetups
- 336-Adding the New Meetup Form
- 337-The app js File Layout Wrapper
- 338-Using Programmatic Imperative Navigation
- 339-Adding Custom Components CSS Modules
- 340-How Pre rendering Works Which Problem We Face
- 341-Data Fetching for Static Pages
- 342-More on Static Site Generation SSG
- 343-Exploring Server side Rendering SSR with getServerSideProps
- 344-Working with Params for SSG Data Fetching
- 345-Preparing Paths with getStaticPaths Working With Fallback Pages
- 346-Introducing API Routes
- 347-Working with MongoDB
- 348-Sending Http Requests To Our API Routes
- 349-Getting Data From The Database
- 350-Getting Meetup Details Data Preparing Pages
- 351-Adding head Metadata
- 352-Deploying Next js Projects
- 353-Using Fallback Pages Re deploying
- 354-Summary
- 356-Module Introduction
- 357-Preparing the Demo Project
- 357-Preparing the Demo Project
- 359-Using CSS Animations
- 360-CSS Transition Animations Limitations
- 361-Using ReactTransitionGroup
- 362-Using the Transition Component
- 363-Wrapping the Transition Component
- 364-Animation Timings
- 365-Transition Events
- 366-The CSSTransition Component
- 367-Customizing CSS Classnames
- 368-Animating Lists
- 369-Alternative Animation Packages
- 370-Wrap Up
- 372-Module Introduction
- 373-Starting Project Why You Would Replace Redux
- 374-Alternative Using the Context API
- 375-Toggling Favorites with the Context API
- 376-Context API Summary and why NOT to use it instead of Redux
- 377-Getting Started with a Custom Hook as a Store
- 378-Finishing the Store Hook
- 379-Creating a Concrete Store
- 380-Using the Custom Store
- 381-Custom Hook Store Summary
- 382-Optimizing the Custom Hook Store
- 384-Wrap Up
- 386-Module Introduction
- 387-What Why
- 388-Understanding Different Kinds Of Tests
- 389-What To Test How To Test
- 390-Understanding the Technical Setup Involved Tools
- 391-Running a First Test
- 392-Writing Our First Test
- 393-Grouping Tests Together With Test Suites
- 394-Testing User Interaction State
- 395-Testing Connected Components
- 396-Testing Asynchronous Code
- 397-Working With Mocks
- 398-Summary Further Resources
- 400-Module Introduction
- 401-What Why
- 402-Installing Using TypeScript
- 403-Exploring the Base Types
- 404-Working with Array Object Types
- 405-Understanding Type Inference
- 406-Using Union Types
- 407-Understanding Type Aliases
- 408-Functions Function Types
- 409-Diving Into Generics
- 411-Creating a React TypeScript Project
- 414-Adding a Data Model
- 413-Working with Props TypeScript
- 415-Time to Practice Exercise Time
- 416-Form Submissions In TypeScript Projects
- 417-Working with refs useRef
- 418-Working with Function Props
- 419-Managing State TypeScript
- 420-Adding Styling
- 421-Time to Practice Removing a Todo
- 422-The Context API TypeScript
- 423-Summary
- 424-Bonus Exploring tsconfig json
- 426-Module Introduction
- 427-What Are React Hooks
- 428-The Starting Project
- 429-Getting Started with useState
- 430-More on useState State Updating
- 431-Array Destructuring
- 432-Multiple States
- 433-Rules of Hooks
- 434-Passing State Data Across Components
- 436-Sending Http Requests
- 437-useEffect Loading Data
- 438-Understanding useEffect Dependencies
- 439-More on useEffect
- 440-What s useCallback
- 441-Working with Refs useRef
- 442-Cleaning Up with useEffect
- 443-Deleting Ingredients
- 444-Loading Errors State Batching
- 446-Understanding useReducer
- 447-Using useReducer for the Http State
- 448-Working with useContext
- 449-Performance Optimizations with useMemo
- 450-Getting Started with Custom Hooks
- 451-Sharing Data Between Custom Hooks Components
- 452-Using the Custom Hook
- 453-Wrap Up
- 455-Module Introduction
- 456-What Is React
- 457-Why React
- 458-Building SPAs Single Page Applications
- 459-React Alternatives
- 460-Creating a React Project
- 461-Setting Up A Code Editor
- 462-Diving Into The Created Project
- 463-How React Works Understanding Components
- 464-More Component Work Styling with CSS Classes
- 465-Building Re Using Another Component
- 466-Working with props Dynamic Content
- 468-Adding More Components
- 469-Introducing State
- 470-Working with Event Props Passing Function As Props
- 471-Adding Routing
- 475-Adding More React Components
- 473-Styling with CSS Modules
- 474-Outputting Lists of Data
- 475-Adding More React Components
- 476-Building Wrapper Components with props children
- 477-Adding a Form
- 478-Getting User Input Handling Form Submission
- 479-Preparing the App for Http
- 480-Sending a POST Request
- 481-Navigating Programmatically
- 482-Getting Started with Fetching Data
- 483-Using the useEffect Hook
- 484-Introducing React Context
- 485-Context Logic Different Ways Of Updating State
- 486-Using Context In Components
- 487-More Context Usage
- 488-Summary
- 490-What Now Next Steps You Could Take
- 491-Explore The React Ecosystem
- 492-Finishing Thoughts
- 494-Course Update Overview Explanation Migration Guide