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

Sockets Tatiana #43

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

Sockets Tatiana #43

wants to merge 3 commits into from

Conversation

tatsqui
Copy link

@tatsqui tatsqui commented Jun 14, 2019

Litter Patrol

Congratulations! You're submitting your assignment!

Comprehension Questions

Question Answer
How are events / event handlers and this.state connected? Events can be used to indicate when to modify state.
What are two ways to do "dynamic styling" with React? When should they be used? One way was for deciding to give a green check-mark or a red x.
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. The Dom receives input which the virtual Dom created by React mimics, and then whatever event handlers you have in place will communicate that change to React and then you can modify state or just CSS components or whatever components you have "listening" to events happening in the browser.
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 is very interactive and also follows many conventions like Rails. Rails makes creating a CRUD style static website very easy. React makes creating components/nested components and SPA/ interactive websites very achievable within their framework.
What was a challenge you were able to overcome on this assignment? It was difficult for me to figure out how to pass in the callback function properly from App to GameItem.

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? I am not sure how to answer this question. But my guess is that whatever part of React that keeps track of how things change between events and how React manages the response to those changes, would benefit from being very 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.
I think the components are objects, and if you give React a key then it can re-render just the specific object given that key instead of re-rendering all the elements.

onNatureItemClick = () => {
this.setState(
{
addClickCss: this.props.iconName === "litter" ?

Choose a reason for hiding this comment

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

I think there is some room for improvement around your naming here.

onNatureItemClick is close to the convention, but not all of the game items are nature items (some are litter). Since we don't have any other click handlers to worry about, I might shorten the name of this to just onClick.

addClickCss isn't a great name for a piece of state. The word "add" makes it a verb phrase, which we usually reserve for functions. Something like overlayClass or clickedClass might be a better choice.

@droberts-sea
Copy link

Litter Patrol

What We're Looking For

Feature Feedback
Core Requirements
Git hygiene This could be better. Remember that your commit history should tell the reader a story about what changed when and why, without having to refer to the code or project requirements.
Comprehension questions yes
Functionality
Clicking on litter or nature shows a check or X respectively yes
Clicking on litter appropriately updates the score yes - clicking on the same litter twice scores multiple points
Under the Hood
JavaScript is well-organized and easy to read yes
Functions are named appropriately see inline
Callback functions are passed to components appropriately yes
Overall Good work overall! I see a bit of room for improvement around naming things, but I am convinced that the learning goals around coordinating nested components through props, state and events were met.

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