Skip to content

Conversation

@SoCodeDo
Copy link

@SoCodeDo SoCodeDo commented Jan 1, 2021

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? gives initial state with a function to change the state. useState allows us to use events to change the state.
What are two ways to do "dynamic styling" with React? When should they be used? deconstructing/spread. deconstructing is used peel an individual element from a collection, and spread is used to split a collection.
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. by using useState, we know the original state of the program. So when we click on a square, event handler is invoked and the program updates accordingly.

CS Fundamentals Questions

Question Answer
What do you think is the BigO complexity of the method you use to compute a winner?
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.

Copy link

@spitsfire spitsfire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Additional Feedback

You have one test that is erroring out; however, that test is optional. If you wish, you can put it back as a skip should you so choose! So, don't worry that one of these tests is erroring out on Learn. I won't hold that against this assignment 👍

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

const Board = ({ squares, onClickCallback }) => {
const squareList = generateSquareComponents(squares, onClickCallback);
console.log(squareList);
// console.log(squareList);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make sure you get rid of any and all console.log statements before submitting, not just commenting them out

Comment on lines +8 to +16
const onClickCallback = () => {
const updatedSquare = {
value: props.value,
id: props.id,
onClickCallback: props.onClickCallback
}

props.onUpdateSquare(updatedSquare);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like this was a function that was never used. it can be deleted.

Copy link

@kaidamasaki kaidamasaki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't notice Claire had already graded this. Good job!

for (let i = 0; i < squares.length; i += 1) {
for (let j = 0; j < squares.length; j += 1) {
if(event === squares[i][j].id){
// need conditional to stop user from playing square if it is not an empty stringq

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This missing conditional is why you have a failing test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants