• Syllabus
• TA: Joshua Yoo
• Final project requirements (due Sunday 12/3 Monday 12/4 at 11:59pm)

(11/27) Week 15 - Real-time web applications with WebSockets

• Slides
• Chat demo: Frontend code (vanilla JS)
• Chat demo: Backend code (Node.js)
• Chat demo: Frontend code (React)
• Documentation: Blobs
• Final project (due Sunday 12/3 Monday 12/4 at 11:59pm)

(11/20) Week 14 - Quiz 2, Testing components (REMOTE)

• Quiz 2
• Slides
• Demo: Writing tests for the StarRating component (see commits on 11/20)
• Documentation: Jest JavaScript Testing Framework
• Documentation: React Testing Library
• Extra credit assignment (due 11/27 at 11:59pm, no extensions)

(11/13) Week 13 - Reusable Component Patterns

• Demo: StarRating component (see commits on 11/13)
• Assignment 7 (due 11/20 at 11:59pm, no extensions)
• Assignment 7 solution
• Next week: Quiz 2

(11/6) Week 12 - Client-side routing (part 2) (No class - RECORDED)

• Demo 3: Client-side routing (part 2)
• Documentation: React Router
• Environment variables for Create React App
• LECTURE RECORDING

(10/30) Week 11 - Pessimistic vs. Optimistic UI

• Slides
• Demo 1: Pessimistic UI
• Demo 2: Optimistic UI
• Assignment 6 (due 11/6 at 11:59pm) - Final Project Overview
• Documentation: React Toastify
• Documentation: Font Awesome with React

(10/23) Week 10 - Midterm (REMOTE)

• Midterm

(10/16) Week 9 - REST APIs, JSON Server, and fetch() (part 2)

• Slides: REST APIs
• Demo: JSON Server
• Midterm (Week 10, 10/23 at 5pm)

(10/9) Week 8 - Multiple checkboxes, Client-side routing (part 1) (REMOTE)

• Demo 1: Multiple checkboxes (with Bootstrap)
• Demo 1: Multiple checkboxes (without Bootstrap)
• Demo 2: Client-side routing (part 1)
• Documentation: React Router
• Assignment 5 (due 10/16 at 11:59pm)
• Assignment 5 Solution

(10/2) Week 7 - Building an autocomplete input with debouncing, the useRef hook

• Demo 1: Static autocomplete input
• Demo 2: The useRef hook
• Demo 3: Building an autocomplete input with debouncing (function component)
• Demo 4: Building an autocomplete input with debouncing (class component)
• Exercise: Refactoring the autocomplete input with debouncing into a reusable component
• Exercise solution
• React documentation: useRef
• Midterm (Week 10, 10/23 at 5pm)

(9/25) Week 6 - Forms, controlled and uncontrolled components

• Review Quiz 1
• Demo: Form Controls
• Bootstrap documentation: Forms
• Assignment 4 (due 10/2 at 11:59pm)
• Assignment 4 Solution

(9/18) Week 5 - Quiz 1, Promises, Component props (REMOTE)

• Quiz 1
• Callbacks, Promises, and fetch
• Demo 1: Refactoring the Pokemon demo from Week 4 to use components with props
• Demo 2: SaveButton
• React documentation: Passing Props to a Component
• No assignment. For extra practice, try refactoring assignment 3 to use components with props.

(9/11) Week 4 - Working with arrays, primitive vs. reference values, rendering lists, Surge

• Working with Arrays
• Demo 1: Rendering a list of groceries in React
• Demo 2: Rendering a list of Pokemons from the Pokemon API
• Deploying React projects to Surge
• React documentation: Lists and Keys
• React documentation: Inline If with Logical && Operator
• Assignment 3 (due 9/18 at 11:59pm)
• Assignment 3 Solution
• Upcoming: Quiz 1 on 9/18
• Optional: Overview of the command line interface (CLI), Terminal, Git, GitHub, and GitHub Classroom

(9/3) Week 3 - Labor Day (No class)

• No class

(8/28) Week 2 - Introduction to JavaScript Frameworks (React)

• Slides: An Introduction to JavaScript Frameworks
• Demo 1: Working with state
• Exercise: Adding a decrement button
• Demo 2: Creating components
• Download RunJS - The JavaScript playground for your desktop
• Classes and objects in JavaScript
• Demo 3: Class components
• Assignment 2 (due 9/11 at 11:59pm)
• Assignment 2 solution (available 5 days after the due date)

(8/21) Week 1 - Course Introduction, Asynchronous vs. Synchronous, JSON, AJAX, Promises (Part 1), XSS (REMOTE)

• Slides: Course Introduction
• Demo: Submitting assignments on GitHub Classroom with GitHub Desktop
• Slides: Asynchronous vs. Synchronous, AJAX, JSON, Promises
• Demo starter
• Demo 1: Fetching and rendering JSON from an AJAX request
• Exercise 1
• Demo 2: Sanitize HTML with DOMPurify to prevent XSS attacks
• Demo 3: Rendering using DOM nodes
• Exercise 2
• Assignment 1 (due 8/28 at 11:59pm)
• Recommended reading: Understanding JavaScript Promises (free version)
• Recommended reading: Understanding JavaScript Promises (full version)

Week 0 - Course Prerequisite

• Technical skills assessment