Space - Lak

[easternwashingaden]

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?	The useState is part of the hook that is used to keep track the state changes when a certain event occurs. In this project, when the event handler 'onclick' happened, it invoked the {onButtonClick} which is an event handling function that lives in the Square component. the {onButtonClick} triggered the callback function props.onClickCallback(props.id) that the Square component got from the Board where the Board component got from the App component. When the {onButtonClick} triggered the callback function props.onClickCallback(props.id), the updateSquare(id) is executed. updateSquare(id) used the useState/hook to setSquares. Here, the useState take the initial value as a 2D of square objects. The setSquares(newSquareList) is used to change the state. So when there is an updating state, it will cause the App to re-render with the new value. The App passes the updated data to Board and Board passes those updated information to Square via props.
What are two ways to do "dynamic styling" with React? When should they be used?	Inline (CSS using the style attribute) and external stylesheet and setting it in the className attribute. I remember from the Ada lecture reading that inline styling is particularly used in documentation and tutorials because it's convenient to condense the code in this way. Ada recommends using CSS defined in external stylesheets and always create a new .css file per Component.
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.	what I have learned so far is that App is the main component that passes information to the child components through props. Each child component will use those given information to structure the display on the browser. The App is also responsible for managing the state changes. If there is an event that happened on the child component, there will be an event handler function that triggers the callback function where the callback function is given to the child component via props. When the callback function is executed, it may use the 'useState' to change to state. When there is an updated state, it will cause the App to re-render, so the App will send the updated information to their child components via props again...

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	Time complexity is O(1) because the given square is always 2D array of squares. Space Complexity is O(1) because I didn't create any new array as part of my function.
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.	maybe Hash table?Each array contains a linked list. Each time want make an action with an item it returns the index of the bucket where the item should be. We will save a lot of iterations.

[kaidamasaki]

Incorrect indentation:

Suggested change

	const onButtonClick = () =>{ // invoking the onClickCallback. onClickCallback is from updateSquare in App component
	props.onClickCallback(props.id) // it is also passing id as an agurment
	}
	const onButtonClick = () =>{ // invoking the onClickCallback. onClickCallback is from updateSquare in App component
	props.onClickCallback(props.id) // it is also passing id as an agurment
	}

[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	(Only three commits. In the future try to commit more often.)
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	✅