react 000 tic tac toe

Wherein we begin the journey to learn / improve in different technologies. This first effort is simply the default tutorial from the ReactJS site. I will walk through the tutorial learning as I go. At the end there are six enhancements recommended for the tutorial code; I'll do those too.

                                                                                                                                                                                                                                                                                                                                

Context

The one from the ReactJS site.

Instruction/Tutorial Link

https://reactjs.org/tutorial/tutorial.html

Code Link

https://github.com/dvjc/react_000_tictactoe

Challenges

I'm not quite used to the way in which React apps are broken out. I ultimately hope to build some more robust things - so failing in this controlled way (within the context of a working app) is very helpful.

Notes / thoughts

At the end of the tutorial, they mention adding six features; I tried the first and failed to get it to reliably do so. Action created below.

Actions

01. Walk through the tutorial.

02. Implement the six improvements mentioned at the end of the tutorial (eventually):

[X] 1. Display the location for each move in the format (col, row) in the move history list.

[X] 2. Bold the currently selected item in the move list.

[X] 3. Rewrite Board to use two loops to make the squares instead of hardcoding them.

[X] 4. Add a toggle button that lets you sort the moves in either ascending or descending order.

[X] 5. When someone wins, highlight the three squares that caused the win.

[X] 6. When no one wins, display a message about the result being a draw.

Lessons Learned

I find the render/templating for ReactJS frustrating - but it's likely because I'm simply used to VueJS. With VueJS you have components that are actually shaped like markup, you have this weird enforced single-element thing; however, I can see how there is a direct mapping between classes and components - and I'm clearly used to the VueJS syntax.

I think, in future, I'll put more methods in their own file - it feels like I'm cluttering up the view / class definition when everything is in one place. This also might be the fact I started with a tutorial - or it might be an artifact of javascript I'd not previously done. I haven't used javascript classes much and this simply might be their syntax - if this is the case, it will be trivial to migrate them out; just gotta make sure I call them correctly and it should clean things up nicely.

All in all, I found these six enhancements difficult for the right reason and I feel stronger at ReactJS as a result. Awesome.

Now to pick my next victim.