Time - Yesenia

[yesentorres]

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?	Events are interactions that a user might have with a web app, like clicks on a button or text entered into an input box. Event handlers are functions that run and do certain things in response to an event. The event handler function is called by an event listener. An event handler in a sub-component can alert back to a parent component about certain changes that need to be re-rendered. The useState hook allows the state of this changed data to be updated and re-rendered by the parent component.
What are two ways to do "dynamic styling" with React? When should they be used?	One way you can apply dynamic styling is by using inline styles. This is done by defining the style in a variable before the return statement and then assigning that variable to the specific element you want styled in the return statement. Or you can also set a className property to the element and define those styles in an external CSS document. The latter method is almost always preferred.
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.	In this program: a user clicks on a square > event listener onClick notices this and calls the onSquareClick event handler > event handler calls a function onClickCallback passed down to it from Board.js and gives it an argument of the id of the square that has been clicked on > back in App.js, the function that onClickCallback has passed is called updateSquare > updateSquare is passed the id of the square that has been clicked on > depending on the value of the square and depending on the state of xTurn, the value of the square changes to 'X' or 'O" > a new data structure is created to represent the update to the board > this new board replaces the old state of the board > the board is re-rendered to show the value of the square that has been clicked

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	I think it is O(n), where n is the number of winning possibilities.
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.	Each component in React is either a Javascript function or a class, therefore a React component's data structure must be a Javascript object. The types of algorithms must be able to traverse large objects, which might warrant the use of a hash table/hash function. With that hypothesis, the time complexity of that code might also be 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	✔️Yes, though it looks like you forgot to commit for a while in the middle there :)
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	✅