Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shelan's Litter-Patrol #43

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Shelan's Litter-Patrol #43

wants to merge 3 commits into from

Conversation

sheland
Copy link

@sheland sheland commented Dec 2, 2018

Litter Patrol

Congratulations! You're submitting your assignment!

Comprehension Questions

Question Answer
How are events / event handlers and this.state connected? Updating 'this state' is depended on an event/the player's interaction. That interaction interpreted by the event handler which then modifies the state of a component.
What are two ways to do "dynamic styling" with React? When should they be used? Inline styles and using CSS defined in an external stylesheet and setting it in the className attribute. In Ada, we should always use CSS classes.
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. index.js --> Dom --> App --> Parent-Component --> Child-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? In react, the views and logic are contained in the components and in rails, the views are separate from the controllers and models. Most of the logic is kept in models whereas in react, logic is kept in components which is similar to Metz's single responsibility principle.
What was a challenge you were able to overcome on this assignment? Going through the code, I was trying to understand what the code was doing, I looked at functions and variables one by one to understand its roles and how they communicated with on another.

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)
What part of React might benefit most from the use of specific data structure and algorithms? It depends, for example, for passing props from parent to child components, maybe it would be sense to use hashes.
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.
Hashes. To transverse those components, you would need to go through hash-key lookups...maybe O(1).

@CheezItMan
Copy link

Litter Patrol

What We're Looking For

Feature Feedback
Core Requirements
Git hygiene Good number of commits and good commit messages
Comprehension questions Check
Functionality
Clicking on litter or nature shows a check or X respectively Check
Clicking on litter appropriately updates the score Not quite, I can run up the score by clicking a bunch on the same piece of litter.
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 Nice work, two issues, one you need to add type and the callback to your list of propTypes. Second, you need to fix the problem of multiple clicks on the same piece of litter.

let totalPoints = this.state.points + 1;

if (type === "litter") {
this.setState({ points: totalPoints });

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One issue, if I click on the same piece of litter multiple times, I can run up the score!

//when player clicks, modifies state of displayTick
onIconClick = () => {
this.setState({ displayTick: true });
this.props.onItemClickedCallback(this.props.type);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should only call this function if this.statedisplayTick is false.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants