Sophie & Mona - tic-tac-toe

[MonaRahmani]

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?	When the browser detects an event from the user, an event handler is triggered in response. The code in the event handler can update the state of a functional component using React's useState hook, while the current state can be accessed with the state's variable name. In this game, a click event on the Square component alerts the App component's onClickCallback function with the square's id, and the onClickCallback updates the square's value to display x/o on the board.
What are two ways to do "dynamic styling" with React? When should they be used?	One is inline CSS using style(directly adds its style in JSX), and another is external stylesheets using className(adds className in JSX and leverages external stylesheets). when we need to conditionally set some styles, we can use Dynamic styling, ternary operators.
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.	when a user clicks on a button (input), a callback function is invoked to update states in a parent component(App.js. When we change a state (using setState), the component will automatically re-render with updated values (output).

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	We have not created new data structures, so the space complexity would be constant O(1). the time complexity is also O(1) because we are only looping through 8 squares.
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 'hash' / object data structure and React would use a 'look up by key' algorithm to find a particular item. Depending on how many objects are nested inside of each other it should be a O(1) in the best case

[CheezItMan]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function. Both functions look good and do what's required.

Good work implementing a React project using state and callback functions!

[CheezItMan]

👍