Skip to content

Conversation

@leahwho
Copy link

@leahwho leahwho commented Apr 20, 2020

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 and useState are connected through the use of callback functions. When a particular event occurs, the callback function is called up through the controller to affect changes in the state of a particular component.
What are two ways to do "dynamic styling" with React? When should they be used? You can use inline style or a style sheet. You can create styles to appear dynamically based on user interaction and style the output differently/conditionally based on the user action/who the user is. We should be using style sheets rather than inline styling (although if it's just a few styles, inline is fine).
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. React is set up to listen for events. For example, when a user clicks or moves their mouse or hovers over a target element, event handlers make changes to component output/behavior/state.

CS Fundamentals Questions

Question Answer
What do you think is the BigO complexity of the method you use to compute a winner? I am going through a 2D Array, so my guess is that it is O(n*m), n being the number of arrays and m being the size of the longest array? And since n is equal to m in this case, we could also say O(n^2).
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 am wildly speculating that it's pretty efficient, otherwise React wouldn't be so popular. I think the components are in a tree structure (where components are made up of/have other components - when one needs to be updated, the algorithm can use a binary search to get that done - and that's an O(log n) time complexity and O(n) space complexity. I think. That's wildly speculative.

@CheezItMan
Copy link

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

Well done. You hit all the learning goals here. Great work!

Comment on lines +30 to +31
const [winner, setWinner] = useState(false);
const [whoWins, setWhoWins] = useState()

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you really need both of this?

@@ -1,16 +1,53 @@
.App {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new styling looks really good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants