Time - Jocelyn

[wangjoc]

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/event handlers and useState are connected through the callback function. When an event is triggered, you can use useState to change to update the state and therefore change the data within the App.
What are two ways to do "dynamic styling" with React? When should they be used?	React has inline CSS styling and external style sheets. This can be useful when you want to conditionally change the format of a component. For instance, one enhancement to the tic-tac-toe project is to have the square change color after it has been clicked (in addition to have the X or O).
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.	Events are related to JSX elements. When a event is called and a callback function triggered, the state within the parent component can be updated. React automatically renders the updated values whenever a state is changed).

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	I think O(n^2) + O(1) for Time and and O(n) for Space? For Time, the actual part that checks to see if there is a winner might be O(1) because it checks it uses an object to check to see if the solution is within any of the winning combos. It will always run three searches for each potential combo regardless of the number of turns that have passed. On the other hand, I run a loop within a loop to create the array to format the data into an object which is O(n^2). For Space, I update the states of the scores for each turn so the more turns there are, the more space it takes, linearly.
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.	Not sure... maybe O(n^m), where m depends on how many componenets there are? It seems to rund pretty fast though, so that's probably not it...

[kaidamasaki]

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	✔️
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	✅

[kaidamasaki]

Great job! Your code was very clean made excellent use of map and ternaries!

[kaidamasaki]

It looks like you used a == by accident here. Remember to pay attention to the warnings that you get in the terminal.

./src/App.js
  Line 44:21:  Expected '===' and instead saw '=='  eqeqeq

Suggested change

	square.id == [event.target.id] && square.value === '' ?
	square.id === [event.target.id] && square.value === '' ?

[kaidamasaki]

This is a really elegant way to solve this! Good job!

[kaidamasaki]

Excellent use of map here!