Fire-Kalki & Water-Mackenzie

[KayKay-git]

React Tic Tac Toe

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

Prompt	Response
How are events / event handlers and useState connected?	Events are what happens when a user interacts with an html element like 'button' by clicking on it. The event handler is a function associated with the onClick event attribute. This event handler will invoke the callback function whenever the event occurs. Once the callback function is called, the state is changed via the update state function. This update state function is created using the useState hook function.
What are two ways to do "dynamic styling" with React? When should they be used?	You can use dynamic styling in two ways: In line CSS using the style attribute and external CSS using the className keyword. Which to use depends on how much styling you want to do. If it is just a few lines of code, use in line. If it is more than that use an external CSS style sheet for cleaner code.
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 moment a user interacts with a dynamic html element, the onClick attribute which is the event listener gets triggered and calls the event handler which then calls the callback function and passes it the argument that references what the user interacted with. The callback function will update the state using the useState update function rendering the App. Which will then output and display different page content.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	O(1) Time because we have a finite number of squares(9) for a traditional Tic Tac Toe game. O(1) space.
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.	’setState’ is an object and if we want to traverse it, we can use a for in loop with a nested if/else statement to check for changes. With this method, Time complexity will likely be O(n) since it will depend on the number of object properties.

[kaidamasaki]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function.

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

[kaidamasaki]

Nice job getting this loop working! It's a tricky one to debug!