• Syllabus
• TA: Shreesh Yadav
• Final project requirements (due Sunday 12/8 at 11:59pm)

(12/2) Week 15 - Quiz 2, Real-time Web Applications with WebSockets (Recording)

1. Quiz 2
2. Slides
3. Chat demo: Frontend code (plain JS)
4. Chat demo: Backend code (Node.js)
5. Chat demo: Frontend code (React)
6. Documentation: Blobs
7. Final project (due Sunday 12/8 at 11:59pm)

(11/25) Week 14 - Testing Components (Recorded)

1. Upcoming next week: Quiz 2
2. Slides
3. Completed demo: Writing tests for the StarRating component (see commits on 11/20)
4. Documentation: Jest JavaScript Testing Framework
5. Documentation: React Testing Library
6. Extra credit assignment (due Monday 12/2 Tuesday 12/3 at 5pm)

(11/18) Week 13 - Pessimistic vs. Optimistic UI, Reusable Component Patterns

1. Upcoming on 12/2: Quiz 2
2. Review final project requirements
3. Slides
4. Completed demo: Pessimistic vs. Optimistic UI
5. Completed demo: Building a reusable StarRating component (see commits on 11/13)
6. Documentation: Font Awesome with React
7. Assignment 8 (due 11/25 at 5pm)

(11/11) Week 12 - Veteran's Day

1. No class

(11/4) Week 11 - Building a CRUD application

1. Completed demo (see commits after 10/14/2024)
2. Review practical exam
3. Documentation: Proxying API Requests in Development
4. Documentation: React Router useNavigate()
5. Documentation: React Toastify
6. Assignment 7 (due 11/11 at 5pm)

(10/28) Week 10 - Practical Exam

1. Practical Exam

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

1. Review Assignment 6 solution
2. Slides: REST APIs
3. Make sure you install JSON Server version 0.17.4 via npm install --global json-server@0.17.4
4. Demo: JSON Server
5. Documentation: JSON Server
6. Making requests to static JSON files in Create React App
7. Practical Exam (Week 10, 10/28 at 5pm)

(10/14) Week 8 - Client-side routing (part 1)

1. Completed demo
2. Documentation: React Router
3. Assignment 6 (due 10/21 at 5pm)
4. Practical Exam (Week 10, 10/28 at 5pm)
5. Review Quiz 1

(10/7) Week 7 - Building an autocomplete input with debouncing

1. Review Assignment 4 solution
2. Demo 1: Static autocomplete input
3. Demo 2: The useRef() hook
4. Demo 3: Building an autocomplete input with debouncing
5. React documentation: useRef()
6. Create React App environment variables
7. Assignment 5 (due 10/14 at 5pm)

(9/30) Week 6 - Quiz 1, Forms, controlled components

1. Quiz 1
2. Completed demo
3. Bootstrap documentation: Forms
4. Assignment 4 (due 10/7 at 5pm)

(9/23) Week 5 - Component props and data flow, Promises (Part 2), fetch()

1. No class. Link to a pre-recorded lecture will be sent out via email.
2. Review Assignment 3 solution
3. Demo: Refactoring the Pokemon demo from Week 4 to use components and fetch()
4. Callbacks, Promises, and fetch
5. Making AJAX requests with fetch()
6. Completed demo
7. React documentation: Passing Props to a Component
8. Upcoming: Quiz 1 on 9/23 9/30
9. No assignment. For extra practice, try refactoring assignment 3 to use fetch() and components with props.

(9/16) Week 4 - Working with arrays, rendering lists, conditional rendering, Surge

1. Review Assignment 2 solution
2. Working with arrays
3. Demo 1: Rendering a list of groceries in React
4. Demo 2: Rendering a list of Pokemons from the Pokemon API
5. Completed demo
6. Deploying React apps made with Create React App to Surge
7. React documentation: Rendering Lists
8. React documentation: Conditional Rendering
9. Assignment 3 (due 9/23 at 5pm)
10. Upcoming: Quiz 1 on 9/23 9/30

(9/9) Week 3 - Introduction to JavaScript Frameworks with React

1. Class will be held exclusively over Zoom
2. TA introduction
3. Slack overview
4. Review Assignment 1 solution
5. Slides: An Introduction to JavaScript Frameworks
6. Completed demo
7. Download RunJS - The JavaScript playground for your desktop
8. Classes and objects in JavaScript
9. Assignment 2 (due 9/16 at 5pm)

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

• No class

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

1. Slides: Course Introduction
2. Slides: Asynchronous vs. Synchronous, AJAX, JSON, Promises
3. Install Prettier
4. Install JSON Viewer Chrome extension
5. Demo starter
6. Demo 1: Fetching and rendering JSON from an AJAX request
7. Exercise 1: When the Repos button is clicked, fetch the JSON from https://api.github.com/orgs/jquery/repos, which contains a list of repositories from the jquery account. Render the name and description of each repository in an unordered list within #results.
8. Demo 2: Sanitize HTML with DOMPurify to prevent XSS attacks
9. Demo 3: Rendering using DOM nodes
10. Exercise 2: Update the Repos button functionality to render using DOM nodes instead of DOMPurify, as this is a more effective means of preventing XSS attacks. Instead of using a document fragment, your container element can be let ul = document.createElement("ul");. To set the text of a node, you can use the textContent property (e.g. node.textContent = 'something').
11. Completed demo
12. Assignment 1 (due 9/9 at 5pm)
13. Demo: Submitting assignments on GitHub Classroom
14. Overview of Git and GitHub
15. Recommended reading: Understanding JavaScript Promises (free version)
16. Recommended reading: Understanding JavaScript Promises (full version)

Week 0 - Course Prerequisite

1. Technical skills assessment