India & Olga

[indiakato]

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?	useState allows us to change data, which is not possible with props. The state is changed by calling an event handler function which updates the data on a user action.
What are two ways to do "dynamic styling" with React? When should they be used?	The two ways to do dynamic styling in React is to do inline styling or to use an external css file for each component. Inline styling should be used when you want to style a very specific/unique element. You should use a css file when you have styling that pertains to a broad section of your 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.	The user makes an action, the action triggers a function and re-renders the component, the component outputs JSX which will be rendered in HTML in the browser.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Compute winner is constant time (O(1)).
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.	Components are usually in arrays. To traverse these components we would use an iteration algorithm. Traversing an array of components would be O(n) time. If components are nested the time complexity would then be O(nm). n represents the outer component and m is the nested component.

[CheezItMan]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function. Both functions look good and do what's required. BTW I unskipped the reset button tests and they worked as well.

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

[CheezItMan]

You should include a key={someUniqueValue} attribute in any React component returned from .map. That's why you're getting the warning the tests show.

Suggested change

	return <Square value={square.value} id={square.id} onClickCallback={onClickCallback}/>
	return <Square value={square.value} id={square.id} onClickCallback={onClickCallback} key={square.id} />