Katherine Litter Patrol

[KatherineJF]

Litter Patrol

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
How are events / event handlers and this.state connected?	Events are user driven an event handler is typically a class method and this.state is the state of the object being watched by the event handler.
What are two ways to do "dynamic styling" with React? When should they be used?	Dynamic styling allows for conditional styling. You can create as style prop and pass it an array of options. You can also add a condition for a component to mount a specific stylesheet based on a set of conditions.
Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content.	React responds to user input that modifies a component when the virtual DOM running in the Browser reports a modification. The virtual DOM notifies the DOM to update with changes made to it. The DOM then renders the changes from the modified component.
Compare how React and Rails' views differ. Given different circumstances, these systems have different goals. How does this impact on their design and how we are supposed to use them?	Rails render view is controlled by the controller on the web server while React's view is controlled by the virtual DOM running in the client's Browser.
What was a challenge you were able to overcome on this assignment?	How to create an event handler method and what to send in a callback.

CS Fundamentals Questions

Question	Answer
Consider the code on the first few lines of App.render (it starts with this.state.items.map). What is the Big-O time complexity of this code, where n is the number of active game items?
What part of React might benefit most from the use of specific data structure and algorithms?
Consider what happens when React processes a state change from setState -- it must re-render all of the components that now have different content because of that change. What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components? Speculate wildly about what the Big-O time complexity of that code might be.

[CheezItMan]

Litter Patrol

What We're Looking For

Feature	Feedback
Core Requirements
Git hygiene	Only two commits, but this is a small project. Do not use waves in your commit messages, instead describe the functionality added.
Comprehension questions	Check, No CS Fun questions. The state really isn't being watched by the event handler. The event handler is updating the state, often. You're not quite accurate about the virtual DOM. An event listener is triggered by a user event on the DOM, it then updates the state. When the state changes, React redraws the component in the virtual DOM. React then compares the virtual DOM with the actual DOM and only makes the changes needed to align them.
Functionality
Clicking on litter or nature shows a check or X respectively	Check
Clicking on litter appropriately updates the score	Check
Under the Hood
JavaScript is well-organized and easy to read	Check, but I suggest naming your callback prop as such.
Functions are named appropriately	Check
Callback functions are passed to components appropriately	Check
Overall	Nice work, I found a few minor things like a missing propType, but overall very well done.

[CheezItMan]

You don't seem to be using this here.

[CheezItMan]

shouldn't the callback be included here

[CheezItMan]

It might be a good idea to name this with the term callback, just for readability.