React Tic-Tac-Toe: Function & hooks implementation

Hey. This page is more than 3 years old! The content here is probably outdated, so bear that in mind. If this post is part of a series, there may be a more recent post that supersedes this one.

I have been trying to do …something… using React and Three.js (via the react-three-fiber project). I kind of jumped straight into it but keep on getting tripped up by my just not quite ‘getting’ some of the fundamentals of React. So I decided to do the official ‘React-101’ tutorial hoping it might help.

Unfortunately, the official tutorial uses classes (which subclass the React.Component) whereas I have been leaning towards the alternate function/hooks approach to React.

My repo here is the result. Might be useful for someone.

Thoughts

I feel I could as easily code my Three.js heavy app in vanilla javascript (or Typescript). Using React just seems to just add bother.

I am sure the advantages of React are plainly obvious (to someone!) but the cognitive penny still has not dropped with me yet. I will keep going with it purely out of respect for this paragraph from the tutorial:

…er.. Ok Sensai 🥋