Lær hvordan man bygger Tic-Tac-Toe med React Hooks

Hvis du har en god forståelse af HTML, CSS, JavaScript og React, undrer du dig måske over, hvor du skal gå videre på din læringsrejse. Så hvorfor ikke tjekke Scrimbas helt nye, gratis tutorial om, hvordan man bygger det klassiske tic-tac-toe-spil i React?

Fuldt fungerende spil

Klik ovenfor for at gå til vejledningen.

Eksempelspillet er hentet fra React's officielle tutorials, men er opdateret ved hjælp af React hooks - det seneste hotte emne i React-verdenen.

Denne artikel giver dig et overblik over selvstudiet og lader dig klikke dig igennem til screencasts og spille med koden til enhver tid.

Hvis dine HTML-, CSS-, JavaScript- eller React-færdigheder føles rystende, skal du aldrig være bange - Scrimba tilbyder et stort udvalg af tutorials, der bringer dig op til hastighed. Vi anbefaler følgende kurser for at gøre dig klar til tic-tac-toe tutorial:

  • HTML & CSS Crash Course med Kevin Powell
  • Introduktion til Javascript med Dylan C. Israel
  • Lær Reager gratis med Bob Ziroll

I ægte Scrimba-stil indeholder Build Tic-Tac-Toe med React Hooks-vejledningen masser af interaktive udfordringer undervejs, så du vil integrere din læring og føle dig som en kroge-guide i slutningen af ​​den.

Kurset ledes af Thomas Weibenfalk, en lidenskabelig udvikler, designer og kodningsinstruktør fra Sverige. Thomas elsker at lære folk om frontend-udvikling, især React, hvilket gør ham til den ideelle lærer til at tage dig gennem denne læringsoplevelse.

Forudsat at du er klar til at gå med tic-tac-toe, lad os komme i gang!

Introduktion

Tic-tac-toe med React kroge glider

I den første scrim fortæller Thomas os om sine planer for vejledningen og deler den officielle reaktionsdokumentation, som vi kan henvise til for en mere detaljeret forklaring af de funktioner, der bruges til at opbygge spillet.

Udover at tale os gennem den filstruktur, han har implementeret til appen, giver Thomas os også vores første glimt af det færdige produkt. Klik på billedet ovenfor for at besøge rollebesætningen.

Komponenter til stilladser

Derefter taler Thomas os gennem opsætning af de Board.js-, Game.js- og Square.js-filer, der er nødvendige for at oprette spillet. Vi ser også, hvordan du importerer Game.js til App.js-filen.

import React from "react"; import Game from "./components/Game"; const App = () => ; export default App; 

Firkantede komponenter og destruktureringsudstyr

I den næste scrim opretter vi vores firkantede komponent ved hjælp af JSX for at tilføje en knap:

const Square = (props) => ( {props.value} ); 

Til vores første udfordring opfordrer Thomas os til at destruere rekvisitterne i vores komponent. Klik igennem til rollebesætningen for at prøve udfordringen.

Board Komponent- og stilladsfunktioner

Nu er det tid til at oprette bestyrelseskomponenten ved at importere den firkantede komponent og tilføje ni forekomster af den til tavlen (bemærk, at vi omlægger dette med en løkke for at forbedre koden senere):

 onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />  onClick("dummy value")} />

Thomas stilladser også ud af de funktioner, vi har brug for i Game.js, som vi gennemfører senere.

Firkantet styling

app med stylede firkanter

Klik på billedet for at få adgang til rollebesætningen.

Derefter styler vi vores firkanter ved hjælp af stylestandardstøtten:

const style = { background: "lightblue", border: "2px solid darkblue", fontSize: "30px", fontWeight: "800", cursor: "pointer", outline: "none", }; const Square = ({ value, onClick }) => (  {value}  ); 

Board Styling

app med stylet bord

Klik på billedet for at få adgang til scrim.

Nu hvor vores firkanter er klar, er det tid til at style tavlen. Thomas starter os ved igen at oprette et stilobjekt, denne gang med CSS-gitter:

const style = { border: "4px solid darkblue", borderRadius: "10px", width: "250px", height: "250px", margin: "0 auto", display: "grid", gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)", }; 

Vores udfordring er nu at anvende stilobjektet på tavlen. Gå over til scrim for at prøve det.

Glem ikke, mens Thomas har leveret nogle gode stylingmuligheder, er Scrimba fuldt interaktiv, så du er fri til at tilpasse dit spil, uanset hvad du foretrækker - lad din fantasi løbe vild!

CalcWinner-funktionen forklaret

export function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; } 

Dernæst forklarer Thomas den meget vigtige calculateWinner()funktion, som er taget fra den originale tutorial fra reactjs.org. Gå over til rollebesætningen for at udforske funktionen og høre, hvordan den fungerer.

Opret stater og udfyld med startdata

I den næste scrim begynder vi at skabe logikken for spillet.

Vi begynder med at tilføje en krog kaldet usedStateGame.js og oprette stater for at indstille et tomt bord og angive den næste spiller. Endelig tilføjer vi const winner, hvilket fortæller os, om det sidste træk var en vindende:

const [board, setBoard] = useState(Array(9).fill(null)); const [xIsNext, setXisNext] = useState(true); const winner = calculateWinner(board); 

Over in Board.js, we delete our manually-rendered squares and replace them with mapped squares as promised earlier. Click through to see this in detail:

const Board = ({ squares, onClick }) => ( {squares.map((square, i) => (  onClick(i)} /> ))} ); 

Create the handleClick Function

Next, we create the handleClick() function, which carries out the calculations when we make a move:

const handleClick = (i) =>  const boardCopy = [...board]; // If user click an occupied square or if game is won, return if (winner ; 

renderMoves Function and the Last JSX

Fuldt fungerende spil

Click above to go to the tutorial.

In this scrim, we create the JSX which makes the game playable.

{winner ? "Winner: " + winner : "Next Player: " + (xIsNext ? "X" : "O")}

We now have the all knowledge needed to create a fully working tic-tac-toe game with React hooks!

BONUS: Implement Time Travel

Tidsrejse-funktion i aktion

Click the image to go to the bonus tutorial.

In the bonus scrim, we take our game to the next level by implementing time travel to review the moves made throughout the game. Click through to get the goodies in this bonus tutorial.

Så der har vi det - et fuldt fungerende tic-tac-toe spil ved hjælp af React kroge! Jeg håber, du fandt denne tutorial nyttig. Glem ikke, du kan til enhver tid henvise til det for at opdatere din hukommelse af de emner, der er dækket, eller lege med koden i de interaktive screencasts.

Næste op, hvorfor ikke tjekke nogle af mange andre tutorials tilgængelige på Scrimba? Med et stort udvalg af emner er der noget for enhver smag.

Glad læring :)