Space - Kate

[katemyer]

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?	Events tracks a user's behavior, whether that be clicking on a field, hovering, or typing into a field, these events are written using camel case, e.g., checkForWinner. Event handlers are functions that determine what to do with the event and with good practice, indicated by the word on before the event, e.g., onClick.
What are two ways to do "dynamic styling" with React? When should they be used?	One can add CSS inline as an attribute and passed to elements. Another way is in the App, togging between Player 1 and Player 2 and displaying this in the header.
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 process is, 1. click on a square, 2. this square/button has a callback, 4. updates the state of the squares (setSquares), 5. the setSquares rerenders the board.
Deployed App link:	https://katemyer.github.io/react-tic-tac-toe/

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	O(n) because my worst case is for loop checking for row winners, if this grows, then n grows. I have another check for colum winners, if columns grows, then n grows. Essentially, it's n (for rows) + n (for columns) = 2n, dropping the coefficient gives me n.
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.	My assumption is that React is efficient and adopts a tree structure because App contains Board and Squares which would have different parent-child interactions. Every time it rerenders, it possibly does recursion by calling itself.

[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	⚠ I highly suggest that you use commit messages that describe functionality added and not wave numbers.
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

Very nicely done, the app works well and you got it deployed on Github pages! Sweet! You really demonstrated an understanding of state here and how to manage it in a React app. You met all the learning goals here.

[CheezItMan]

👍

[CheezItMan]

Just a suggestion

Suggested change

	if (currentPlayer===PLAYER_1) {
	setCurrentPlayer(PLAYER_2)
	}
	else {
	setCurrentPlayer(PLAYER_1)
	}
	const next_player = currentPlayer === PLAYER_1 ? PLAYER_2: Player_1
	setCurrentPlayer(next_player)

[CheezItMan]

👍

[CheezItMan]

you can also do:

Suggested change

	let squaresflat = [].concat(...squares);
	let squaresflat = squares.flat()