Space - Diana

[dnguye2]

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 handlers are able to use the function within useState array that can change the state. This function is a setState function is a callback function meaning it won't be executed until the event occurs.
What are two ways to do "dynamic styling" with React? When should they be used?	(1) Inline CSS using style attribute (2) external CSS stylesheet using className Inline CSS is recommended to never be used (while quick and easy) and instead we should use an external CSS stylesheet as it is better for performance-- keeps code DRY and efficient
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.	Since editing the DOM is slow, React works with a virtual DOM aka a lightweight copy of the DOM. "Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house." When a JSX element is rendered, every virtual DOM object is updated and the cost is insignifcant since the virtual DOM updates quickly. Once that is done, React goes through a process called "diffing" where React compares the virtual DOM with the a snapshot taken before the update. This allows React to know which virtual DOM objects changed. The changed virtual objects then changes those objects on the real DOM and then the output of the screen changes. Source: [x]

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Time: O(1) since the for loops always run the same amount of times and the input size never changes (8 times for going through winningSolutions (plus 3 more times if a winner is not found) and 9 times for each square) Space: O(1)?(not sure since I'm creating a player variable within the for loop to determine a winner...)
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.	React like the DOM, has a tree structure. From good old Google seem like the best method would be a binary tree sort with a time complexity of O(n log n) assuming the tree is "balanced" Source [x]

[jmaddox19]

All the comments in here are great for readibility!

[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

Great work!

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	✅