Space - Hala

[halahaddad1]

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?	UseState is a react hook that is used to change the state of the event through a call back function that is considered to be the change handler, use state has a function within that can be used in the call back function to handle the state of the event, so when an event is triggered "like clicking a button" the event handler "call back function" changes the state of the event.
What are two ways to do "dynamic styling" with React? When should they be used?	dynamic styling refers to consolidating styles in an object that can be used dynamically or according to certain conditions in your components.
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.	When the user clicks on the input field and starts typing, or triggers any change in the state of the designed object. each keystroke or click triggers the event handler. The call back function is then called and the current value or state saved to state using setState(). setState() causes the component to rerender and the output in visible on the web page.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	I think the complexity of of my compute a winner function is O(n) n being the winning combinations array, and I would think the space complexity is O(n^2) since I flatten the board then create a new array of the winning combinations.
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 suspecting the time complexity of the rerender function is more O(logn) since is probably cuts the tree in half every time it traverses through the DOM.

[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	Friendly reminder to remember to make commits more often. Every time you add a new feature that is functional is a great time to commit, but at least completing every wave of a project is a good reminder to commit.
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

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]

clever!