EECS 485 Lab

EECS 485 Lab 5 and 6: Project 3 Setup

Note: Lab 5 has been combined with Lab 6. There is no lab quiz due on Sunday, 21st February, 2021.

Due: 8:00pm EST February 28th, 2021. Complete the lab quiz on Gradescope.

This lab involves going through the entirety of the setup for Project 3. Part 1 explores the REST API portion of the project while Part 2 deals with setting up and debugging a React program.

Part 1 - Project 3 Setup: Flask + REST APIs

Goals

Setup

Part 1 is a portion of the Project 3 setup tutorial. Complete all sections up to and including REST API Tools.

Completion Criteria


Part 2 - Project 3 Setup: React Debugging Tutorial

Goals

Finish P3 Setup

This part involved completing the project 3 setup tutorial, starting from the React/JS section.

JavaScript Debugger

The next part of this lab is learning how to debug JavaScript. In this next JavaScript debugger tutorial, we’ll discuss how to use browser tools to debug without having to add console.log() statements everywhere.

Remember that static pages and server-side dynamic pages tools still apply!

React Debugging

Debugging React code can be tricky if you try to apply the JavaScript debugging tools on the JavaScript code that was transpiled from your React code. Instead, we can use the React Dev Tools browser extension, which allows you to view your React components as HTML DOM elements in the Developer Tools and see the props and state for each component. In the following section, we will walk through how to debug code for a React component. While the following tutorial is for a basic Likes widget, you should walk through the debugging process at a high level using your Posts widget to get more comfortable using this browser extension.

Note: The following debugging tutorial is meant to serve as a general guide on how to use the basics of the React Dev Tools browser extension to debug React code

First, add the React Dev Tools Extension to Chrome or Firefox.

Pro-tip: Use Webpack’s --watch option in a separate terminal to automatically update your bundle.js when a file changes.

$ npx webpack --watch

For the purpose of this lab, let’s say there is a bug somewhere in a React component that is causing 13 likes to be displayed instead of 3 likes.

Open up the Chrome Developers tools, click on the arrow to see more tabs, and click on the Components tab, and click on the component in question (the Likes component in this case). You should see the component like a DOM element, along with its props and state. As you can see, the state of numLikes is 3, so most likely the bug is introduced when the component is being rendered.

To view the source code associated with a particular component, click on the “View source for this element” button in the top right corner (looks like < >). You should now see the React code associated with the component in a relatively readable format unlike your bundle.js.

Since we think the bug is being introduced in the render() call, let’s set a breakpoint there, and add the variables of interest to the watch section, and refresh the page. You should see that the page is not fully loaded and the execution stopped on your breakpoint. Note that the this.state.numLikes is 0 because the component has not yet mounted. So click on the “Resume script execution” button to stop the execution again after componentDidMount() has completed. Now notice that this.state.numLikes is 3.

Since the we are using the local variable numLikes in our render call to display the number of likes, the bug most likely involves numLikes. As you step through the lines of code, you notice that you are rendering numLikes + 10 instead of just numLikes. You have now caught your bug!

Debugging React code is not as simple as debugging single-threaded C++ programs in an IDE because of the asynchronous nature of JavaScript. Make sure you understand what part of the execution you are in (after constructor() ran, before componentDidMount() ran, etc.) as that will help you diagnose the root cause of bugs much faster.

Completion criteria

Lab Quiz

Complete the lab quiz by the due date.