kay-litter-patrol

[kayxn23]

Litter Patrol

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
How are events / event handlers and this.state connected?	They're used to modify the this.state of the components so they go hand in hand to change the components.
What are two ways to do "dynamic styling" with React? When should they be used?	In line or in style-sheet. In-line is discouraged so we shall aim to put them in the style-sheet.
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.	Input is received in the user and rendered in the view but nothing is saved in a model or database, all changes that are made. React allows us to do dynamic changes, whereas Rails if you make a change in the view you need to save and refresh each time.
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?	React does JSX, Rails does ERB. JSX has a render function that can only return one parent element, Rails is more flexible.
What was a challenge you were able to overcome on this assignment?	Figuring out how to get the callback function to work between the GameItem and the App.

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?	O(n) because .map will iterate through the entire array n number of times.
What part of React might benefit most from the use of specific data structure and algorithms?	The parts where there is a button and then callback function from the button needs to be efficient. Anything that is reacting needs to be efficient and something that is controlling the data needs to be structured. In asynchronous programs where its less important to get the data back right away we can prioritize using more space efficient algorithms over time efficient.
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.	Its structured as a tree. How is the tree traversed so it catches everything that changed is the question. The goal is to do it as quickly as possible so...Why is the DOM structured like a tree? Tree is defined by a parent have a one to many relationship with children. Wrapping tags with things inside of them and more nested things inside them which drills down further and makes a big nested thing. What algoriths do we use to traverse trees? There are multiple ways. If the change is radical enough it changes the whole thing but if its more subtle it goes into specific branches to change them.

[CheezItMan]

Litter Patrol

What We're Looking For

Feature	Feedback
Core Requirements
Git hygiene	Only 2 commits, but it was a small project. You should not however focus on waves in your commit messages. Instead describe functionality added.
Comprehension questions	Check, although I would say that React is much more flexible than Rails.
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
Functions are named appropriately	Check
Callback functions are passed to components appropriately	Check, well done
Overall	Great work, you hit all the learning goals. One minor issue that you didn't add the type or callback to the list of proptypes, but otherwise excellent work.

[CheezItMan]

Technically Charles did propTypes wrong below (it should be a static or class property). And you need to add type and the callback to proptypes.