Time - Hannah T

[stpatrickschild]

React Tic Tac Toe

homepage: https://stpatrickschild.github.io/react-tic-tac-toe

1.) How are events / event handlers and useState connected?

• They are connected to change in useState and can be used to change the state of
  Components. As events happen, the useState is used to handle that event.

2.) What are two ways to do "dynamic styling" with React? When should they be used?

• Dynamic styling is achieved in React by attaching an event handler function and/or a
  variable to JSX tag element or to update the component. They should be used when we want to
  change the user interface based on the events.

3.) 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.

• As a user enters an input or clickOn a button, a callback method is called when any of the events take place, it modifies state, react then sees the state has been changed and it re-render the components.
  Pretty much, when it’s clickedOn, the component sends the response to the app then the app.
  Changes the output by whatever the inner method is defined.

CS Fundamentals Questions

1.) What do you think is the BigO complexity of the method you use to compute a winner?

• The bigO of winner computation is constant, there are 2 for loops so that makes it 6
  computation.

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. |

• Ah this is actually what I have experience in the dev tool, the rendering, and re-rendering of the components. Since the components are nested, for loop(double) should be used to iterate over the nested arrays. Since the react is re-rendering the components, the best algorithm should be the smallest possible BigO complexity.

[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.	It looks like you removed a lot of semi colons. It looks intentional enough that I assume there's a reason why did that. But it's generally considered good coding style to have semicolons in a lot of places even if their absence doesn't cause an error. https://javascript.info/coding-style#semicolons
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

Additional Feedback

Great work! See my inline comments for a couple additional notes.

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]

This is minor but this is one of several places where your indentation is just slightly off. I use a VSCode plugin called indent-rainbow to help me catch indentation weirdness like this.

[jmaddox19]

I appreciate that you separated this logic into different functions! It definitely helps make it easier to read.