loading words...

Jun 06, 2019 22:37:37

DevJournal: ReactJS - TicTacToe

by @chrisdeuda PATRON | 472 words | ๐Ÿฃ | 130๐Ÿ’Œ

Chris ๐Ÿค”๐Ÿ‡ต๐Ÿ‡ญ

Current day streak: 0๐Ÿฃ
Total posts: 130๐Ÿ’Œ
Total words: 51458 (205 pages ๐Ÿ“„)

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.

Thoughts:

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.

ยจNBSP;

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

Finally:
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.

  • 1

    @chrisdeuda - this is fun to read. I'm also playing with react these days. I thought it'd be good to do the highlighting in the check for the winner - which is where you'll know which squares caused the win and thus which need their className toggled.

    Brian Ball avatar Brian Ball | Jun 06, 2019 08:00:47
    • 1

      @brianball I've done something similar before in VueJS on toggling class, but it seems I forgot to use the solution and revert back on jQuery thinking on how to select element with specific index and eventually add/remove class. When I didn't find a way to do it JSX on filter DOM, then it finally clicks to me on why not just toggle the className.

      Chris ๐Ÿค”๐Ÿ‡ต๐Ÿ‡ญ avatar Chris ๐Ÿค”๐Ÿ‡ต๐Ÿ‡ญ | Jun 07, 2019 23:24:05
contact: email - twitter / Terms / Privacy