Advanced React Links

Slides

• Slides

Instructor Info

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

React Hooks

• Toggle Challenge - Solution

Star Rating

• Five Stars Rendered - (run it)
• Star Component with Props - (run it)
• Star Component with State - (run it)
• Completed Star Component - (run it)
• Advanced Star Component - (run it)

Color Organizer

• Feature: Display Color Data - (run it)
• Features: Remove Color, Rate Color - (run it)
• 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)

useReducer

• Checkbox with useState - (run it)
• Checkbox with toggle - (run it)
• Checkbox with useReducer - (run it)
• Increment number with useReducer - (run it)

useReducer to handle Complex State

• useState with objects - (run it)
• useReducer with objects - (run it)
• legacy setState with useReducer - (run it)

xstate and State Machines

• xstate Visualizer
• tahoeTravelMachine Visualized
• Tahoe Travel Machine

Flux & Redux

• Slides
• Activity
• 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

Next Steps

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