Innovating Skills
Introduction
For this project, I challenged myself into the unventured territory that is React. React is a JavaScript library crafted together by Meta (a.k.a. Facebook) for the purpose of app creation. I took their official "Tic-Tac-Toe" tutorial (link can be found in the sources) and altered it so that instead of X's and O's, you'd see Bugs Bunny and Daffy Duck's heads as images. This is meant to envoke their whole "Wabbit Season - Duck Season" rivalry from the cartoons. As you continue on this page, you'll learn all the steps I needed to take to compile this marvel together!
To see the final app in action, click here!
React-Specific Setup
For starters, a React app has a unique starting lineup compared to just plain JavaScript. The key difference is the precense of an "index.js" file. This JavaScript file acts as a bridge between the main app script and the HTML page. It imports React's library of scripts, as well as other files necessary for your app to function. These include CSS stylesheets, the main app script, image files, etc. Additionally, it will render the app by using the variable "root," which is equal to a class named root on the HTML page. This tells the browser where to load the app.
You'll also notice the precense of a "package.json" file. This works similarly to a manifest, except that it catalogs the React scripts and their dependencies in order for the browser to utilize them upon loading the app.
Square Function
Now, we get into the actual "App.js" file itself. Two key features of React are "components" and "props." Components act like functions, encompassing other functions and variables. Props are like variables for components, in that they are passed between differen components. The first component or function in my script is the "Square" component. It eventually tells the browser to render HTML buttons as squares. It also holds two props called "value" and "onSquareClick." The purpose of these props is to pass on outputs or functions to other components of the app.
Board Function
The "Board" function, or component, largely handles the actual gameplay of "Tic-Tac-Toe." It gets the props "xIsNext," "squares," and "onPlay," which will be passed onto the "Game" component (which we'll come back to shortly). A function called "handleClick" is called to handle the main gameplay. Using an if statement and the afforementioned "xIsNext," it determines whether to place Bugs' face or Daffy's face into the square. It then sets up a variable to calculate the winner, which will eventually call another function.
Another if statement is used to determine who goes next (in this case, the phrases "Wabbit Season!" (in place of X) and "Duck Season!" (in place of O) alternate between each other. After all of that, a return statement is called to generate the game board, with each square having its own separate index number in the "value" array. It also calls back to the "onSquareClick" prop to help in the game board's generation, defining it as a part of the handleClick function from earier. This render uses a mix of HTML and JS called "JSX," grouped together by another React feature, fragments (i.e. "<>" and "</>").
To calculate the winner, as mentioned above, a function titled "calculateWinner" is involved. It takes all the possible number index combinations that would result in a winner and uses a combination of if statements and mathmateical calculations to spit out a return. If the win conditions are not met, it will return "null," or no winner.
Game Function
Finally, we have the main "Game" component. This is indicated by a React-specific label called "explore default." Its main job is to default all of the squares to a blank state at the beginning of each game. It also keeps track of the history of the game throughout its duration.
First, we utilize the "useState" function as our "history" and "setHistory" variables (this was imported from React's library at the beginning of our script). It then defines the "xIsNext" variable and another called "currentSquares." A function titled "handlePlay" makes a copy of the history variable's array in order to envoke the ability to "time travel," or go back to previous moves made by the end user throughout the game. This is demonstrated by the "Go to" buttons on the final app.
It then tells the browser to keep track of the current move that the game is on. A function called "jumpTo" will help facilitate the jump to other moves in the game. Lastly, it determines the text each button will say based on the position of the play and then creates the buttons using the "jumpTo" function as its aid. After that, a return statement generates some additional code for the game board so that it utilizes the "xIsNext" and "currentSquares" variables and the "handlePlay" function during gameplay.
Conclusion
Overall, React offers unique abilities to handcode applications compared to regular JavaScript. It, alongside many other factors, come together to create cool experiences for others to interact with.