Hey again!

So this week I got bored working with vanilla typescript and decided to contact my mentor at the bootcamp and get some permission to start building with react.

I basically slid into his dms on slack and was like "yo can I do some absolute overkill and...you know...build it with react"

And Matt was all for it! 

So that's what I've done!

This app uses react, typescript, react-router-dom, and material ui for the components and basically allows the users to play tic-tac-toe!

So how does the code work? Well that's actually really fun! 

First I start off by creating the initial board state. Which is really just an array of 9 "null" values, and save that into state for the board. Here's what that looks like: 

It should be noted that useState is a function that can normally only be run inside of a react functional component but for the purposes of this blog post, that's what you get to see! 

Then I pass that board over to a Board component in the app route component and map over that array to generate the board buttons!

Here's what that looks like: 

Each of those buttons uses a small check to see if the inside is going to have a "X" or "O" icon OR whether it will return null. 

Here's what that component actually looks like:

Whenever these buttons are clicked, they fire a onclick event that does 2 things:

1st it checks to see if there's either already a winner (this is a value I'll get to in a second) OR if there's already a value affiliated with this particular button on the board, and if there is then it just does nothing.

2nd It will update that original board state to reflect the value of the player that just clicked on it. 

Updating state like this actually causes the component to rerender which fires a check to see if there is a winner. 

This function loops through all the possible "win" scenarios to see if either player has met any of those conditions. It's basically just an array of arrays that says which positions would end in a win if all of those positions were the same value!

It also checks to see if the board is filled with values (that are not null) to see if there is a tie (assuming no winner has been determined). 

Whenever the "isThereAwinner" variable gets updated a useeffect is run that increments the player's score based on who won (or tied). 

And finally, if the player clicks on the reset board button OR clears out the alert that pops up telling them that they won(or tied) then a function is run that resets the turn order and the board state to the initial state! 

That's basically all of the functionality of this app, so how did I challenge myself? How did I make it more difficult...

Well I mean I did figure out that github pages HATES the regular react router dom stuff and had to go through the process of finding THIS article to figure that out. 

Other than that it was a full on web app to actually run this with client side routing and everything so I thought that was challenging in and of itself 🤔. 

Next time I'm building a full on CRUD app in React (probably) so we shall see how that goes! 

Err here's a link to the code and live site:

Code: https://github.com/barnettet31/promineo-week-11/tree/master

Live Site: https://barnettet31.github.io/promineo-week-11/#/ 

Anyways until next time,

Onwards and upwards!