- Syllabus
- TA: Zhuojun (Josh) Chen
- Midterm (10/18 at 5pm)
- Final Project Requirements (due 12/9 at 11:59pm)
(11/29) Week 15 - Higher-Order Functions and Components, Authentication (Recorded)
- Higher-Order Functions and Components
- Demo: Authentication with Auth0
- Documentation: Create React App Environment Variables
- Lecture Recording coming soon
(11/22) Week 14 - Careers in Tech, Quiz 2 (Zoom)
- Careers in Tech
- Quiz 2
(11/15) Week 13 - Testing Components (Recorded)
- Slides: Testing
- Demo: Testing our Rating component
- Documentation: Jest JavaScript Testing Framework
- Documentation: React Testing Library
- Assignment 9 (due 11/22 at 11:59pm)
- Upcoming: Quiz 2 on 11/22 (Week 14)
- Lecture Recording
(11/8) Week 12 - Patterns for Building Reusable Components
(11/1) Week 11 - Building Real-Time Web Applications with WebSockets, Class Components
- Slides: Building Real-Time Web Applications
- Live Demo
- Chat Demo: Frontend Code (Vanilla JS)
- Chat Demo: Backend Code (Node.js)
- Chat Demo: Frontend Code (React)
- Documentation: Blobs
(10/25) Week 10 - Client-side Routing (Part 3), Building Modals with Portals
- Demo: Client-side Routing (Part 3) / The UD in CRUD
- React Toastify Documentation
- Demo: Building a Modal with Portals
- React Portals Documentation
- Considerations for Styling a Modal
(10/18) Week 9 - Midterm
(10/11) Week 8 - REST APIs, JSON Server, fetch (Part 2), Client-side Routing (Part 2)
- Slides: REST APIs
- Demo: Mocking an API with JSON Server,
fetchwith POST, DELETE, PATCH, and PUT - Demo: Client-side Routing (Part 2) / The C in CRUD
- Upcoming: Midterm
- Assignment 7 (due in 2 weeks on 10/25 at 11:59pm)
(10/4) Week 7 - Client-side Routing (Part 1)
- Demo: Client-side Routing (Part 1) / The R in CRUD
- React Router Documentation
- JSON Placeholder
- Assignment 6 (due 10/11 at 11:59pm)
- Assignment 6 Solution
- Upcoming: Midterm in Week 9
(9/27) Week 6 - Form Controls and Data Flow (Recorded)
- Demo: Form Controls
- Bootstrap Documentation: Forms
- React Documentation: Forms
- React Documentation: Props
- Assignment 5 (due 10/4 at 11:59pm)
- Assignment 5 Solution
- Lecture Recording
(9/20) Week 5 - Quiz 1, Rendering Lists, Conditional Rendering, Deploying to Surge (Recorded)
- Quiz 1
- Demo 1: Rendering Lists
- Demo 2: Deploying React projects to Surge
- React Documentation: Lists and Keys
- React Documentation: Inline If with Logical && Operator
- Assignment 4 (due 9/27 at 11:59pm)
- Assignment 4 Solution
- Lecture Recording
(9/13) Week 4 - Running React Locally, useEffect, Working with Arrays
- Demo 1: Running React Locally
- Demo 2: Managing Side Effects with
useEffect - Working with Arrays
- Assignment 3 (due Friday, 9/23 at 11:59pm)
- Assignment 3 Solution
- Upcoming: Quiz 1 in Week 5
(9/6) Week 3 - Promises (Part 3), Introduction to JavaScript Frameworks (React)
- Demo 1:
Promise.all(Starter) - Demo 1:
Promise.all(Final) - Slides: An Introduction to JavaScript Frameworks
- Upcoming: Quiz 1 in Week 5
(8/30) Week 2 - Promises (Part 2), fetch (Part 1), Client-side Templating, Event Delegation
- Download RunJS - The JavaScript playground for your desktop
- Callbacks, Promises, and
fetch - Demo starter
- Demo 1: Rendering with Handlebars
- Exercise: Fetch and render the current price of Bitcoin
- Demo 2: Event Delegation
- Assignment 2 (due 9/6 at 11:59pm)
- Assignment 2 Solution
(8/23) Week 1 - Course Intro, Asynchronous vs. Synchronous, JSON, AJAX, Promises (Part 1), XSS
- Slides: Course Intro, Asynchronous vs. Synchronous, AJAX, JSON, Promises
- JSON Viewer Chrome Extension
- 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/30 at 11:59pm)
- Recommended Reading: Understanding JavaScript Promises (free version)
- Recommended Reading: Understanding JavaScript Promises (full version)
- Lecture Recording
