AndrewT11/advanced-react

Advanced React Links

Instructor Info

• Eve Porcello: Twitter | Email
• Moon Highway Training: Moon Highway Website | Mailing List | Articles

Color Organizer

• Start Files Download
• Feature: Add Color Component with Refs - (run it)
• Refactor: Add Color Controlled Component - (run it)

Custom Hooks

• Refactor: useInput hook - (run it)
• Feature: Adding a Color to State - (run it)
• Refactor: Colors In Context - (run it)
• Refactor: useColors hook - (run it)
• BONUS: Color Organizer App (with emotion css)- (run it)

xstate and State Machines

• xstate Visualizer
• tahoeTravelMachine Visualized
• Tahoe Travel Machine
• Code Sandbox Start

Flux & Redux

• Slides
• Activity Start
• Activity Finished
• Finished Tests

GraphQL

GraphQL Query Language

• Query Language Slides
• Snowtooth Playground
• Pet Library Playground
• Moon Highway Vote Playground
• Github GraphQL Explorer
• Lab Instructions

GraphQL Schema Definition Language

• Slides for Reference
• Schema Design Cheat Sheet

Example GraphQL APIs

• Snowtooth API
• Pet Library API

Apollo Client

Simple Requests

• curl Request

curl -X POST \
     -H "Content-Type: application/json" \
     --data '{ "query": "{allLifts{name}}" }' \
     http://snowtooth.moonhighway.com

• Fetch Sample
• graphql-request

React & Apollo

• Snowtooth UI Start Files
• Snowtooth UI Finished Files

The Dependency Array

• Too many effects - (run it)
• Effect Dependencies - (run it)
• Any Key to Render - (run it)
• Array Dependency issue - (run it)
• useMemo - (run it)
• Function Dependency issue - (run it)
• useCallback - (run it)

Next Steps

• Pet Library with Relay
• Fullstack Error Handling with GraphQL
• Apollo Federation
• TypeScript & Apollo CLI - Finished Project + Instructions