Week 27 and Week 28
Week 27
Monday
Hand in your Project
Bonus Task List Tutorial
Intro to ES6 Modules (Recall)
Extra
More
ES6 Syntax: Object Destructuring
Extra
More
ES6 Imports and Exports (Video)
React Basics Objectives
Extra
More
Frontend History
Extra
More
React Concepts and Features
Extra
More
Why React? (video)
Thinking in Components
Extra
More
Introduction To JSX
Extra
More
From JSX to the DOM
Extra
More
Intro to JSX Quiz
Tuesday
React Components Objectives
Extra
More
Function Components
Extra
More
Fragments
Extra
More
Passing Information through Props
Extra
More
Function Components (video)
Course 4 Project Reflections
Extra
More
Vite Intro
Extra
More
Wednesday
Project: Vite Walkthrough
Walkthrough
Project: Component JSX
Solution
Extra
Project: Component Props
Extra
Solution
Project: Component Lists
Extra
More
Thursday
Bonus React Router Tutorial
Bonus React Router Tutorial II
More React Router Tutorial
React Router Objectives
Extra
More
React Router Introduction
Extra
More
Routes
Extra
More
Outlet
Extra
More
Links
Extra
More
Navigation
Extra
More
Router Documentation
Extra
More
React Router Quiz
Friday
OPTIONAL: History of React Router Routers
Extra
More
OPTIONAL: Routes with JSX
Extra
More
Practice: React Router Intro
Solution
Practice: React Router Navigation
Solution
Practice: React Router Nesting
Solution
Bonus
React Documentation
Extra
More
Week 28
Monday
Long Practice: Art Museum
Phase 0
Phase 1
Phase 2
Phase 3
Phase 4
Phase 5
Phase 6
Bonus Phase
React Hooks Objectives
Extra
More
React Hooks
Extra
More
Introduction to Hooks Video
React Hooks Documentation
Extra
More
useState Hook
Extra
More
Practice: useState Hook Intro Video
Practice:useState Hook Video
useState Quiz
useEffect Hook
Extra
More
useEffect Dependency Array, Part 1
Extra
More
useEffect Dependency Array, Part 2: Reactive Functions
Extra
More
useEffect Cleanup Functions
Extra
More
useEffect Hook Intro Video
useEffect Hook Demo Video
useEffect Quiz
useEffect Dependency Array Quiz
Project: useState
Solution
Project: useEffect
Solution
Project: useEffect API
Solution
MD Cheatsheet
CheatSheet
Project: When Does useEffect Run?
Solution
Project: useEffect Debug
Solution
Long Practice: Turkey Display
Solution
Long Practice: Explore Hooks
Solution
React Forms Objectives
Extra
More
React Forms and Controlled Inputs
Extra
More
Handling Events
Extra
More
Practice: Forms
Solution
Practice: Forms - Validations
Solution
Practice: Custom Hooks
Solution
Bonus Context Info
React Context Objectives
Extra
More
Intro to React Context (video)
3 Important Parts of React Context API (video)
Context Walkthrough Project
Solution
Context Quiz
Tuesday
Practice: Create Context
Solution A
Solution B
Practice: Context - Dynamic Provider
Solution
Practice: Context - Dynamic Consumer
Solution
Wednesday
Practice Asessment Solution
Phase 1 Solution
Phase 2 Solution
Phase 3 Solution
Phase 4 Solution
Phase 5 Solution
Phase 6 Solution
Phase 7 Solution
Long Practice: Greenhouse
Solution A
Solution B
Thursday
Long Practice: Advanced Forms
Solution
Advanced Forms Walkthrough Part 1 Video
Advanced Forms Walkthrough Part 2 Video
Friday
Long Practice: Context with Tests
Solution A
Solution B
Assessment