R1D21, June 06, 2019
Currently Learning React JS and playing around with Tic-Tac-Toe
Progress: on Tictactoe
- Read some documentation of ReactJS focuses on states and passing of data
- Get stuck on manipulating existing DOM elements render in JSX
- Completed the task: When someone wins, highlight the three squares that caused the win.
- Display the location for each move in the format (col, row) in the move history list.
Trying to select existing DOM Rendered by JSX
I was stuck on finding solutions in how I could select specific keys of squares that are generated dynamically. Kind the same way in jQuery where you can select and filter specific
<li> with specific id or class. I was redirected to Forwarding refs to DOM components but it was not the one that I'm looking for.
I need to do it so that I could mark the specific square that is completed the winning moves of the user. It's for the extra task on the Tic-Tac-Toe
When someone wins, highlight the three squares that caused the win..
Since I could find how to do it in JSX syntax. I just created an array to store the state of a square if it's marked as active or not. In this way, I don't need to manually select the DOM. Since it can automatically toggle the DOM on-off since it was doing the reactive thing.
Encountered Infinite Loop when I added set updates in render method
On related notes about, I've encountered an infinite loop while I was trying to debug the States value. I was wondering why it was still printing values in the console log even the match is already finished.
Then I found that it was a bad idea to put a setState in the render function. 'cause every time the States values getting the update it always renders the UI. So basically it creates an infinite loop. I didn't notice it immediately until my laptop slowly creating noise because of a fan. And my chrome browser was lagging.
Here is the post about 'Calling setState in render causes infinite loop' in react
I've finished the Tic-Tac-Toe additional task. I just have an idea: Maybe I could make it playable online by two players where it will use some sort of socket so that it will automatically be updated in real time. If I pursue this probably I need some backend to do it. Maybe node js.
The way I imagine it, it will work like a chat where it will be waiting for another user to send their shot. If I got more time, maybe I'll try this.
P.S. It was nice to slow down and just log what happen in your learning. It might not make sense to other people at least I've write down on how I tackle specific problem that might be good referrence at some time in the future.