Time - Angela

[angethuy]

React Tic Tac Toe

Congratulations! You're submitting your assignment. Please reflect on the assignment with these questions.

Reflection

Prompt	Response
How are events / event handlers and useState connected?	The useState hook supplies a function to change the state, which can be leveraged by events/event handlers to log a state change as part of the event handling function.
What are two ways to do "dynamic styling" with React? When should they be used?	We can implement dynamic styling via passing inline CSS to the style attribute of an element. Alternatively and preferably, it is also common to conditionally set classes on elements using a className prop, and then style the classes in an external stylesheet.
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 detects input via user events, which then trigger event handlers and their subsequent functions that modify state and determine what the output looks like.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Time complexity in the worst case is O(n^2), because I'm looping through n potential win conditions, and then looping through each index inside a valid win condition to update the victorious squares. Space complexity is O(1) because even though I'm creating an array for my .forEach loop, the array is of a fixed size (3 elements) every time.
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.	Since components can be (and most likely will be) nested inside other components to a depth of n, the data structure could be a tree. This leads to wild speculation that traversal might happen recursively to check which components within the tree are now changed to reflect the setState change. If I think about it in terms of # of components, I feel like traversing all nodes should be O(n) where n is the number of components that we're checking once each, but if I think about recursively, then it could be O(n + m) to account for the depth of the nesting as well as the breadth of the components at each level.

[jmaddox19]

Such a fun little things to add! I love it!

[jmaddox19]

Very concise!

[jmaddox19]

React Tic Tac Toe

Major Learning Goals/Code Review

Criteria	yes/no, and optionally any details/lines of code to reference
Demonstrates proper JavaScript coding style.	✔️
Correctly passes props to child components.	✔️
Correctly passes callback functions to child components and calls them to respond to user events.)	✔️
Maintains the status of the game in state.	✔️
Practices git with at least 6 small commits and meaningful commit messages	✔️
Uses existing stylesheets to render components	✔️

Functional Requirements

Functional Requirement	yes/no
The Square component renders properly and executes the callback on a click event.	✔️
The Board component renders a collection of squares	✔️
The App component renders a board and uses state to maintain the status of the game.	✔️
Utilizes callbacks to UI events to update state	✔️

Overall Feedback

Overall Feedback	Criteria	yes/no
Green (Meets/Exceeds Standards)	5+ in Code Review && 3+ in Functional Requirements	✔️
Yellow (Approaches Standards)	4+ in Code Review && 2+ in Functional Requirements, or the instructor judges that this project needs special attention
Red (Not at Standard)	0-3 in Code Review or 0,1 in Functional Reqs, or assignment is breaking/doesn’t run with less than 5 minutes of debugging, or the instructor judges that this project needs special attention

Great work!!!

Code Style Bonus Awards

Was the code particularly impressive in code style for any of these reasons (or more...?)

Quality	Yes?
Perfect Indentation	✅
Elegant/Clever	✅
Descriptive/Readable	✅
Concise	✅
Logical/Organized	✅