Space - Sara Nilsen

[sarabrandao21]

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?	the way the user interact with the browser it creates an event, useState keeps update of all actions in the program, making it easier to know what is happening.
What are two ways to do "dynamic styling" with React? When should they be used?	inline: CSS using style and external style sheet using className.
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 components of our program are going to get updated when an event happens in the browser, such as clicking a button, a callback function from the parent keep track of all the events with setState and giving that info to the children.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	time complexity is O(n) and space complexity 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. Speculate wildly about what the Big-O time complexity of that code might be.	DOM structure as we insert each component in JSX, Whenever data changes, the entire UI will re-render in a virtual DOM, and the difference between the previous virtual DOM and new one will be calculated. Time complexity is O (n).

[jmaddox19]

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	✔️
Yellow (Approaches Standards)	4+ in Code Review && 2+ in Functional Requirements, or the instructor judges that this project needs special attention
Red (Not at Standard)	0-3 in Code Review or 0,1 in Functional Reqs, or assignment is breaking/doesn’t run with less than 5 minutes of debugging, or the instructor judges that this project needs special attention

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	✅

[jmaddox19]

clever!

[jmaddox19]

I like that you pulled this out into a helper method!
Given that your solution lends itself to wanting to check the winner by looking at a 1-dimensional array, it would be an appropriate optimization to change the generateSquares function to just create a 1-D array from the beginning and use that as your state.
Truth be told, the main reason we set it up as a 2-D array is because we believed it would help many people with writing code to determine the winner.
But that's just an optimization! Not a significant problem with your code :)