Space - Faezeh

[faezeh-ashtiani]

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?	event handler is a function that is called by the event listener when an event happens. useState is a function on the React library that returns an array with two elements, first a variable that holds the value of (one of) the state(s) of the component, second a function that can be passes a variable, and assigns that to the state when called. the event handler function calls the function of useState (usually called setSomething) to change a state.
What are two ways to do "dynamic styling" with React? When should they be used?	I am not sure what is dynamic styling but we can do styling for react with inline CSS styling which is not recommended, and the second way is to use external stylsheets and import the css file into the js react component file.
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.	not sure.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	my program is making 21 new arrays or strings each time a button is clicked, but I think the time complexity is O(1) each time but since it runs each time a square is clicked, it becomes O(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.	I think it is better for the data structure to be a hash since searching a hash is an order of 1, unlike an array which is O(n) or O(logn)

[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	✔️
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 well done, you hit all the learning goals here. Nice work!

[CheezItMan]

👍 Nice!

[CheezItMan]

I see you saw the post in Slack. nice!

[CheezItMan]

That works, but you could also just do setSquares(generateSquares()); and set the player to player 1.

[CheezItMan]

This works, but you could also use the .flat function.