• Syllabus
• TA: Sharanya Rai
• Final project requirements (due Sunday 12/7)

(12/1) Week 15 - Real-time Web Applications with WebSockets (Zoom)

1. Slides
2. Chat demo: Backend code (Node.js)
3. Chat demo: Frontend code (React)
4. Documentation: Blobs
5. Final project (due Sunday 12/6)

(11/24) Week 14 - Class Cancelled

1. Thanksgiving

(11/17) Week 13 - Written Exam, Tech, Money, and the Path to Freedom: Ask Me Anything

1. Written Exam
2. Slides

(11/10) Week 12 - Testing Components, Pessimistic vs. Optimistic UI (Zoom)

1. Slides: Testing
2. Completed demo: Writing tests for the StarRating component (see commits on 11/20)
3. Documentation: Jest JavaScript Testing Framework
4. Documentation: React Testing Library
5. Slides: Pessimistic vs. Optimistic UI
6. Completed demo: Pessimistic vs. Optimistic UI
7. Assignment 9 (due in 2 weeks on 11/24)
8. Written Exam (next week, Week 13, 11/17)
9. Next week: Written Exam
10. Next week: AMA: Submit any questions through this anonymous Google Form

(11/3) Week 11 - Reusable Component Patterns

1. Demo: Building a reusable StarRating component (see commits on 11/13)
2. Documentation: Font Awesome with React
3. Deploying to Netlify
4. Assignment 8 (due 11/10)
5. Written Exam (Week 13, 11/17)

(10/27) Week 10 - Practical Exam

1. Practical Exam

(10/20) Week 9 - REST APIs, JSON Server, fetch() (part 2), CRUD (part 2)

1. Slides: REST APIs
2. Make sure you install JSON Server version 0.17.4 via npm install --global json-server@0.17.4
3. Demo: JSON Server
4. CRUD demo (see commits on 10/19 and 10/20)
5. Documentation: JSON Server
6. Documentation: Proxying API Requests in Development
7. Documentation: React Toastify
8. Assignment 7 (due 10/27)

(10/13) Week 8 - Client-side routing (part 1), CRUD (part 1)

1. Completed demo (see commits on 10/12)
2. Deploying a React app with React Router to Surge
3. Documentation: React Router
4. Assignment 6 (due 10/20)
5. Practical Exam (Week 10, 10/27)

(10/6) Week 7 - Forms, Controlled Components, Building an autocomplete input with debouncing

1. Completed forms demo
2. Bootstrap documentation: Forms
3. Assignment 4 (due 10/13)
4. Demo 1: Static autocomplete input
5. Demo 2: The useRef() hook
6. Demo 3: Building an autocomplete input with debouncing
7. React documentation: useRef()
8. Create React App environment variables
9. Week 7 summary
10. Assignment 5 (due 10/13)

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

1. Demo: Refactoring the Pokemon demo from Week 4 to use components and fetch()
2. Callbacks, Promises, and fetch()
3. Completed demo
4. React documentation: Passing Props to a Component
5. Mini Assignment 1 (due 10/6)

(9/22) Week 5 - Working with arrays, rendering lists, conditional rendering, Surge

1. Working with arrays
2. Demo 1: Rendering a list of groceries in React
3. Demo 2: Rendering a list of Pokemons from the Pokemon API
4. Completed demo
5. Deploying React apps made with Create React App to Surge
6. React documentation: Rendering Lists
7. React documentation: Conditional Rendering
8. Week 5 summary
9. Assignment 3 (due 9/29)

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

1. Slides: An Introduction to JavaScript Frameworks
2. Completed demo (see commits)
3. Download RunJS - The JavaScript playground for your desktop
4. Classes and objects in JavaScript
5. Week 4 summary
6. Assignment 2 (due 9/22)

(9/8) Week 3 - JSON, AJAX, Promises (Part 1), XSS

1. Demo starter
2. Demo 1: Fetching and rendering JSON from an AJAX request
3. 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.
4. Demo 2: Sanitize HTML with DOMPurify to prevent XSS attacks
5. Demo 3: Rendering using DOM nodes
6. 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 const ul = document.createElement("ul");. To set the text of a node, you can use the textContent property (e.g. node.textContent = 'something').
7. Completed demo
8. Week 3 summary
9. Assignment 1 (due 9/15)

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

• No class

(8/25) Week 1 - Course Introduction, Synchronous vs. Asynchronous

1. Slides: Course Introduction
2. Technical skills assessment
3. Slides: Asynchronous vs. Synchronous, AJAX, JSON, Promises
4. Install Prettier
5. Install JSON Formatter Chrome extension
6. Overview of Git and GitHub
7. Demo: Submitting assignments on GitHub Classroom
8. Recommended reading: Understanding JavaScript Promises (free version)
9. Recommended reading: Understanding JavaScript Promises (full version)