Ha jól ismeri a HTML-t, a CSS-t, a JavaScript-et és a React-et, elgondolkodhat azon, hogy merre induljon tovább a tanulási út során. Akkor miért nem nézi meg a Scrimba vadonatúj, ingyenes bemutatóját a klasszikus tic-tac-toe játék felépítéséről a React-ben?
Kattintson a fenti gombra az oktatóanyag megnyitásához.
A példa játék a React hivatalos oktatóanyagaiból származik, de a React horgok segítségével frissül - ez a legújabb téma a React világban.
Ez a cikk áttekintést nyújt az oktatóanyagról, és lehetővé teszi, hogy bármikor átkattints a képernyőképernyőkre, és bármikor játszhasson a kóddal.
Ha HTML-, CSS-, JavaScript- vagy React-készségei ingatagnak érzik magukat, soha ne féljen - a Scrimba oktatóanyagok széles skáláját kínálja, hogy felgyorsuljon. A következő tanfolyamokat javasoljuk, hogy felkészülhessen a tic-tac-toe bemutatóra:
- HTML és CSS összeomlási tanfolyam Kevin Powell-lel
- Bevezetés a Javascript-be Dylan C. Izraellel
- Tanulj meg reagálni ingyen Bob Zirollal
Igazi Scrimba stílusban a Build Tic-Tac-Toe with React Hooks oktatóanyag rengeteg interaktív kihívást tartalmaz útközben, így beágyazza a tanulást, és a végén horogvarázslónak érzi magát.
A tanfolyamot Thomas Weibenfalk, szenvedélyes fejlesztő, tervező és kódolási oktató vezeti Svédországból. Thomas szereti az embereket tanítani a front-end fejlesztésről, különösen a React-ről, így ő ideális tanár, aki végigvezeti Önt ezen a tanulási tapasztalaton.
Feltéve, hogy készen állsz a tic-tac-toe használatára, kezdjük!
Bevezetés
Az első áttekintésben Thomas elmondja nekünk az oktatóprogram terveit, és megosztja a Official React Documentation-t, amelyre hivatkozhatunk a játék felépítéséhez használt funkciók részletesebb ismertetésére.
Amellett, hogy átbeszél minket az alkalmazás számára létrehozott fájlstruktúrán keresztül, Thomas első pillantást vet a késztermékre is. A stáb megtekintéséhez kattintson a fenti képre.
Állvány alkatrészek
Ezután Thomas beszél a játék létrehozásához szükséges Board.js, Game.js és Square.js fájlok beállításával. Azt is látjuk, hogyan kell importálni a Game.js fájlt az App.js fájlba.
import React from "react"; import Game from "./components/Game"; const App = () => ; export default App; Négyzet alakú alkatrész és szerkezetátalakítási kellékek
A következő áttekintésben létrehozzuk a négyzetkomponensünket a JSX segítségével egy gomb hozzáadásához:
const Square = (props) => ( {props.value} ); Első kihívásunkra Thomas arra ösztönöz minket, hogy az alkotóelemekben lévő kellékeket romboljuk le. Kattintson a szereplőkre, hogy kipróbálja a kihívást.
Fedélzeti alkatrészek és állványok funkciói
Itt az ideje, hogy létrehozzuk a tábla összetevőt a négyzet alakú összetevő importálásával és kilenc példányának hozzáadásával a táblára (vegye figyelembe, hogy ezt egy hurokkal átdolgozzuk a kód későbbi javítása érdekében):
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 állványozza a Game.js-ben szükséges funkciókat is, amelyeket később teljesítünk.
Négyzet alakú stílus
Kattintson a képre a stáb eléréséhez.
Ezután a négyzeteinket az stylealapértelmezett támasz segítségével alakítjuk ki :
const style = { background: "lightblue", border: "2px solid darkblue", fontSize: "30px", fontWeight: "800", cursor: "pointer", outline: "none", }; const Square = ({ value, onClick }) => ( {value} ); Board Styling
Kattintson a képre a scrim eléréséhez.
Most, hogy a négyzeteink készen állnak, itt az ideje a tábla megformálásának. Thomas azzal indít minket, hogy ismét létrehoz egy stílusobjektumot, ezúttal a CSS rács segítségével:
const style = { border: "4px solid darkblue", borderRadius: "10px", width: "250px", height: "250px", margin: "0 auto", display: "grid", gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)", }; Most az a kihívásunk, hogy a stílus objektumot alkalmazzuk a táblára. Irány a fejes, hogy próbálja ki.
Ne felejtsd el, hogy miközben Thomas remek stíluslehetőségeket kínált, a Scrimba teljes mértékben interaktív, így szabadon testre szabhatod a játékodat tetszés szerint - engedd szabadjára fantáziád!
A calcWinner magyarázata
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; } Ezután Thomas elmagyarázza az összes fontos calculateWinner()funkciót, amelyet az eredeti oktatóanyagból vettünk át a reakjs.org webhelyről. Menjen át a stábhoz, hogy felfedezze a funkciót és hallja, hogyan működik.
Állapot létrehozása és kitöltés kezdeti adatokkal
A következő áttekintésben elkezdjük létrehozni a játék logikáját.
Először hozzátesszük a usedStateGame.js nevű horgot, és állapotokat hozunk létre egy üres tábla beállításához és a következő játékos megadásához. Végül hozzátesszük const winner, amely megmondja, hogy a legújabb lépés nyerő volt-e:
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
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
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.
Tehát itt van - egy teljesen működő tic-tac-toe játék a React horgokkal! Remélem, hasznosnak találta ezt az oktatóanyagot. Ne felejtsd el, bármikor visszaválaszthatsz rá, hogy felfrissítsd a memóriát a lefedett témákról, vagy kijátszhatod az interaktív képernyőkódban található kódot.
Ezután miért nem nézi meg a Scrimba számos más oktatóanyagát? Hatalmas témakörrel mindenki számára megtalálható valami.
Boldog tanulást :)