Skip to content

Conversation

@codesrobertson
Copy link

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 call the useState and change it whenever an event triggers the event handler.
What are two ways to do "dynamic styling" with React? When should they be used? If this question is referring to what I think it is, you can change the dynamic styling with inline-CSS and also through stylesheets.
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 example that comes to mind is uncontrolled vs. controlled forms, in which case the answer is different for each because their source-of-truth points are different. However, more broadly, React's response is re-rendered (presumably via a callback function) whenever an event occurs on a page (because an event listener was triggered by the event.)

CS Fundamentals Questions

Question Answer
What do you think is the BigO complexity of the method you use to compute a winner? N/A. Other coursework demands prevented completion of this portion.
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'd imagine it depends on how many components are in question, but I'd say that the complexity accelerates very quickly once that data set gets past a certain threshold. On the lower end, I'd estimate O(n2); on the higher end, I'd hazard an estimate of O(2^N).

@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. ⚠ It maintains the player turns and square status, but doesn't determine a winner or reset the game.
Practices git with at least 6 small commits and meaningful commit messages ⚠, only 3 commits Also avoid just using waves for commit messages. Instead describe functionality.
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 ✔️, even through you didn't get the entire game running you were able to work with multi-level callbacks and used state.

Code Style Bonus Awards

Was the code particularly impressive in code style for any of these reasons (or more...?)

Quality Yes?
Perfect Indentation
Descriptive/Readable
Concise
Logical/Organized

Summary

Not bad, you hit the major learning goals here. Like I noted above, you didn't complete all waves, but did manage to get the basic game working and demonstrated an ability to maintain and update state.




const checkForWinner = () => {

Choose a reason for hiding this comment

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

Just noting that checkForWinner isn't done.

// When it is clicked on.
// Then pass it into the squares as a callback

const onClickCallback = (click) => {

Choose a reason for hiding this comment

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

👍 well done

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