Time - Sharon Cheung

[sharonkeikei]

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 event handler "onClickCallback" helps pass the function from the parent (App) to the child component board and then square in order to manipulate and access the data from square to add "x" or "o".
What are two ways to do "dynamic styling" with React? When should they be used?	There are Inline CSS style - to define CSS styles inline using the built in style attribute, or External Stylesheets in React using className, which is more recommended to use, having the style in a new .css file for each Component.
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.	Instead of reloading the whole page, React will compare virtual DOM and DOM to figure out which specific component to be change.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Time Complexity should be O(n), since my checkForWinner only have a for loop and an if statement inside. Space Complexity should also be O(n), I created a new array to store the square.flat().
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 DOM is represented as a tree data structure. In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”.React uses an efficient diff algorithm to compare the versions of virtual DOM. React implements a heuristic O(n) algorithm based on two assumptions: 1. Two elements of different types will produce different trees. 2.The developer can hint at which child elements may be stable across different renders with a key prop. (so that's why the unique key is very important!) (Answer above is from https://medium.com/@adhithiravi/react-virtual-dom-explained-in-simple-english-fc2d0b277bc5 & https://reactjs.org/docs/reconciliation.html) Very interesting and complicated concepts, hope we get to talk about it more in class :)

https://sharonkeikei.github.io/react-tic-tac-toe/

[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	✔️, however avoid talking about waves in commit messages, just describe 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

Well done, you hit all the learning goals here and the app works well. Nice work!

[CheezItMan]

Do you really need all these as state? I think you could derive status from currentPlayer.

[CheezItMan]

This is a pretty clever solution