Menu
React LogoHands on ReactCourse
☾
☼
React LogoHands on React
  • Course
  • Fundamentals
    • What is React?
    • Why React?
    • Comparison
    • Architecture
    • Computer Setup
    • VS Code Setup
    • Elements
    • JSX
    • Virtual DOM
    • Components
    • Project Setup
    • Labs A
      • JavaScript
        • Introduction
        • Lab 1: Creating a New Project
        • Lab 2: Running Your Project
        • Lab 3: Styles Using CSS
        • Lab 4: Your First Component
        • Lab 5: Data
      • TypeScript
        • Introduction
        • Lab 1: Creating a New Project
        • Lab 2: Running Your Project
        • Lab 3: Styles Using CSS
        • Lab 4: Your First Component
        • Lab 5: Data
    • Code Organization & Conventions
    • Props
    • PropTypes
    • React & TypeScript
    • Lists
    • Events
    • Labs B
      • JavaScript
        • Lab 6: Passing Data to a Component
        • Lab 7: Displaying List Data
        • Lab 8: More Reusable Components
        • Lab 9: Responding to an Event
        • Lab 10: Creating a Form to Edit Your Data
      • TypeScript
        • Lab 6: Passing Data to a Component
        • Lab 7: Displaying List Data
        • Lab 8: More Reusable Components
        • Lab 9: Responding to an Event
        • Lab 10: Creating a Form to Edit Your Data
    • Hooks
    • State
    • Side Effects & Lifecyle
    • Conditional Rendering
    • Component Architecture
    • Debugging
    • Labs C
      • JavaScript
        • Lab 11: Communicating from Child to Parent Component
        • Lab 12: Hiding and Showing Components
        • Lab 13: More Component Communication
        • Lab 14: Component Communication through Multiple Levels
      • TypeScript
        • Lab 11: Communicating from Child to Parent Component
        • Lab 12: Hiding and Showing Components
        • Lab 13: More Component Communication
        • Lab 14: Component Communication through Multiple Levels
    • Forms
    • Backend API Setup
    • HTTP
    • Labs D
      • JavaScript
        • Lab 15: Form Values to State
        • Lab 16: Form Validation
        • Lab 17: Setup Backend REST API
        • Lab 18: HTTP GET
        • Lab 19: HTTP PUT
      • TypeScript
        • Lab 15: Form Values to State
        • Lab 16: Form Validation
        • Lab 17: Setup Backend REST API
        • Lab 18: HTTP GET
        • Lab 19: HTTP PUT
    • Routing
    • Build & Deploy
    • Labs E
      • JavaScript
        • Lab 20: Router Basics
        • Lab 21: Route Parameters
        • Lab 22: Build & Deploy
      • TypeScript
        • Lab 20: Router Basics
        • Lab 21: Route Parameters
        • Lab 22: Build & Deploy
  • Advanced
    • Custom Hooks
    • Other Hooks
    • Context
    • State Management
    • React Query
    • Testing
    • Render Props
    • Higher-Order Components
    • Security
    • Performance
    • Styling
  • Redux
    • Redux
    • React Redux
    • Redux Thunk
    • React Redux Thunk
    • Redux & TypeScript
  • Foundation
    • Package Managers
    • Compiler Setup
    • Modern JavaScript
    • TypeScript
    • Promises & Async Await
    • Essential JavaScript for React
    • CSS Grid
    • Flexbox
  • Resources
    • UI Components
    • Resources
  • Labs
    • JavaScript
      • Introduction
      • Lab 1: Creating a New Project
      • Lab 2: Running Your Project
      • Lab 3: Styles Using CSS
      • Lab 4: Your First Component
      • Lab 5: Data
      • Lab 6: Passing Data to a Component
      • Lab 7: Displaying List Data
      • Lab 8: More Reusable Components
      • Lab 9: Responding to an Event
      • Lab 10: Creating a Form to Edit Your Data
      • Lab 11: Communicating from Child to Parent Component
      • Lab 12: Hiding and Showing Components
      • Lab 13: More Component Communication
      • Lab 14: Component Communication through Multiple Levels
      • Lab 15: Form Values to State
      • Lab 16: Form Validation
      • Lab 17: Setup Backend REST API
      • Lab 18: HTTP GET
      • Lab 19: HTTP PUT
      • Lab 20: Router Basics
      • Lab 21: Route Parameters
      • Lab 21 a: Route Transitions
      • Lab 21 b: Splash Screen
      • Lab 21 c: Skeleton Screens
      • Lab 22: Build & Deploy
      • Lab 23 Redux: Installation & Configuration
      • Lab 24: Redux | Actions and Reducer
      • Lab 25: Redux with React
      • Lab 26: Custom Hooks
      • Lab 27: React Query Refactor
      • Testing Lab 1: Your First Component Test
      • Testing Lab 2: Snapshot Tests
      • Testing Lab 3: More Component Testing
      • Testing Lab 4: Nested Components
      • Testing Lab 5: Container Components
      • Testing Lab 6: Testing Forms
      • Testing Lab 7: Action Tests
      • Testing Lab 8: Reducer Tests
      • Testing Lab 9: API Tests
      • How to Skip Labs
      • Snippets
      • Solution Code
    • TypeScript
      • Introduction
      • Lab 1: Creating a New Project
      • Lab 2: Running Your Project
      • Lab 3: Styles Using CSS
      • Lab 4: Your First Component
      • Lab 5: Data
      • Lab 6: Passing Data to a Component
      • Lab 7: Displaying List Data
      • Lab 8: More Reusable Components
      • Lab 9: Responding to an Event
      • Lab 10: Creating a Form to Edit Your Data
      • Lab 11: Communicating from Child to Parent Component
      • Lab 12: Hiding and Showing Components
      • Lab 13: More Component Communication
      • Lab 14: Component Communication through Multiple Levels
      • Lab 15: Form Values to State
      • Lab 16: Form Validation
      • Lab 17: Setup Backend REST API
      • Lab 18: HTTP GET
      • Lab 19: HTTP PUT
      • Lab 20: Router Basics
      • Lab 21: Route Parameters
      • Lab 22: Build & Deploy
      • Lab 23 Redux: Installation & Configuration
      • Lab 24: Redux | Actions and Reducer
      • Lab 25: Redux with React
      • Lab 26: Custom Hooks
      • Lab 27: React Query Refactor
      • Testing Lab 1: Your First Component Test
      • Testing Lab 2: Snapshot Tests
      • Testing Lab 3: More Component Testing
      • Testing Lab 4: Nested Components
      • Testing Lab 5: Container Components
      • Testing Lab 6: Testing Forms
      • Testing Lab 7: Action Tests
      • Testing Lab 8: Reducer Tests
      • Testing Lab 9: API Tests
      • How to Skip Labs
      • Snippets
      • Solution Code
  • Gatsby
    • Concepts
      • Overview
      • Tooling
      • Components
      • Styling
      • Data
      • CSS Grid
      • Images
      • Build & Deploy
    • Labs
      • Overview
      • Tooling
      • Components
      • Styling
      • Utility-First CSS: Tailwind
      • Data
      • CSS Grid
      • Images
      • Build & Deploy

Overview

Solution Code#

Available in git

Edit this page
Previous
« Build & Deploy
Next
Tooling »
  • Solution Code

Labs

  • Labs (JavaScript)
  • Labs (TypeScript)

Links

  • GitHub


The content on this site is available for private, non-commercial use under GPL version 3 .
If you would like to use this material to conduct your own training or workshop, please contact us at funnyant.com.
Copyright © 2022 Funny Ant, LLC. All rights reserved.