Water/Earth - Beatrice/Emily

[emirry]

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 handlers and 'useState' are connected because of the way React works asynchronously-- useState will change data once an event/event handler is called.
What are two ways to do "dynamic styling" with React? When should they be used?	We can inline style or use className variables to style in a .css file to indicate that something was changed. In the student example, a student that's present changes to green.
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.	Using the student absent/present example, once a student is marked present in the browser, React will refer to that corresponding event handler, change that initialized value to the opposite, and re-render the element that has been changed in the browser.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	O(n)?-where n is the size of the n x n square. It checks each row and column once.
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.	The data structure the components in the DOM are stored in is a tree. It will have to traverse the tree to find out which elements have changed. It can eliminate branches of the tree that it knows have nothing to do with the state that was changed. The time complexity of this could be O(nlogn).

[beccaelenzil]

Nice work implementing this algorithm with a 2D array.

[beccaelenzil]

Note the following warning. Make sure to include a key prop key={square.id}:

    console.error
      Warning: Each child in a list should have a unique "key" prop.
      
      Check the render method of `Board`. See https://reactjs.org/link/warning-keys for more information.
          at Square (/app/src/components/Square.js:30:12)
          at Board (/app/src/components/Board.js:30:18)