Space- Yieni

[yieknee]

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?	Event handlers and useState are connected via callback functions. The callback function use the hooks that are set using UseStates toggle between states when an event happens.
What are two ways to do "dynamic styling" with React? When should they be used?	The two ways to do "dynamic styling" in react are through inline css and using style sheets. In line css is useful for directly styling JSX, whereas stylesheets are useful for styling the classes added to the JSX.
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.	Reacts cycle is triggered by an event. An event can be whatever the event listener is set to. Whether it be a click, hover, etc. When the event happens it then triggers react to run code, generally a call back function, that will adjust the state.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	The time complexity of my compute winner method is O(n) where n is the size of the flattened square array ( which is just he number or squares on the board). The space complexity is also O(n) Because I am creating two arrays, newSquare and flatSquare.
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.	The components are in a tree. You can use recursion to traverse it.

[CheezItMan]

👍

[CheezItMan]

I'm just pointing out that you don't need to do this type of math if you keep the array 2 dimensional.

[CheezItMan]

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	✔️, yes, but I strongly suggest you don't use waves as commit messages and instead just describe the functionality added.
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

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	✅

Summary

Nicely done, you hit all the learning goals here. You nailed all the functionality. I do think that checkForWinner can be done more compactly and readably, but your solution works.