Build a Multiplayer Tic-Tac-Toe Game in React (2022)

Tic tac toe is a quintessential childhood game. All it requires is something to write on and something to write with. But what if you want to play with someone that’s in another location? In this case, you would need to use an application that connects you and another player to the game.

The application needs to provide a real-time experience so every move you make is seen instantly by the other player and vice versa. If the application does not provide this experience, then you and many people, won’t probably use it anymore.

So how does a developer provide a connected experience where the players can play tic tac toe, or any game, no matter where they are in the world?

Real-time Multiplayer Game Concepts

There are several ways to provide the real-time infrastructure for multiplayer games. You can go the route of building your own infrastructure from the ground up by using technologies and open-source protocols like Socket.IO, SignalR, or WebSockets.

While this may seem like an appealing route to take, you will encounter several issues; one such issue being scalability. It’s not hard to handle 100 users, but how do you handle 100,000+ users? Besides infrastructure issues, you still have to worry about maintaining your game.

At the end of the day, the only thing that matters is providing a great experience for the players of your game. But how do you do solve the infrastructure problem? This is where PubNub comes in.

PubNub provides the real-time infrastructure to power any application through its global Data Stream Network. With over 70+ SDKs, including the most popular programming languages, PubNub simplifies sending and receiving messages to any device in under 100 ms. It is secure, scalable and reliable so you don’t have to worry about creating and maintaining your own infrastructure.

In order to show how easy it is to develop a multiplayer game using PubNub, we will build a simple React tic tac toe game using the PubNub React SDK. In this game, two players will connect to a unique game channel where they will play against each other. Every move a player makes will be published to the channel to update the other player’s board in real time.

App Overview

Here is what our app will look like once we finish. Click here to try out our live version of the game.

Build a Multiplayer Tic-Tac-Toe Game in React (1)Players first join the lobby where they can create a channel or join a channel. If the player creates a channel, they get a room id to share with another player. The player that created the channel becomes Player X and will make the first move when the game starts.

Build a Multiplayer Tic-Tac-Toe Game in React (2)

The player that joins a channel with theroom id they were given becomesPlayer O. Players can only join channels when there is one other person in the channel. If there is more than one person, then a game is in progress for that channel and the player won’t be able to join. The game starts once there are two players in the channel.

Build a Multiplayer Tic-Tac-Toe Game in React (3)

At the end of the game, the winner’s score is incremented by one point. If the game ends in a tie, then neither player is awarded a point. A modal is displayed to Player X asking them to start a new round or to end the game. If Player X continues the game, the board resets for the new round. Otherwise, the game ends and both players go back to the lobby.

Build a Multiplayer Tic-Tac-Toe Game in React (4)

Set Up the Lobby

Before we set up the lobby, sign up for a free PubNub account to get your free Pub/Sub API keys. Sign up and log in using the form below:

Once you get your keys, insert them into the constructor of App.js.

(Video) Build a Full Stack Multiplayer Tic Tac Toe with a Realtime Chat + Authentication - ReactJS

// App.jsimport React, { Component } from 'react';import Game from './Game';import Board from './Board';import PubNubReact from 'pubnub-react';import Swal from "sweetalert2";import shortid from 'shortid';import './Game.css';class App extends Component { constructor(props) { super(props); // REPLACE with your keys this.pubnub = new PubNubReact({ publishKey: "YOUR_PUBLISH_KEY_HERE", subscribeKey: "YOUR_SUBSCRIBE_KEY_HERE" }); this.state = { piece: '', // X or O isPlaying: false, // Set to true when 2 players are in a channel isRoomCreator: false, isDisabled: false, myTurn: false, }; this.lobbyChannel = null; // Lobby channel this.gameChannel = null; // Game channel this.roomId = null; // Unique id when player creates a room this.pubnub.init(this); // Initialize PubNub } render() { return (); } } export default App;

Also in the constructor, the state objects and variables are initialized. We will go over the objects and the variables when they come up throughout the file. Finally, we initialized PubNub at the end of the constructor.

Inside of the render method and inside the return statement, we add the markup for the Lobby component.

return ( <div> <div className="title"> <p> React Tic Tac Toe </p> </div> { !this.state.isPlaying && <div className="game"> <div className="board"> <Board squares={0} onClick={index => null} /> <div className="button-container"> <button className="create-button " disabled={this.state.isDisabled} onClick={(e) => this.onPressCreate()} > Create </button> <button className="join-button" onClick={(e) => this.onPressJoin()} > Join </button> </div> </div> </div> } { this.state.isPlaying && <Game pubnub={this.pubnub} gameChannel={this.gameChannel} piece={this.state.piece} isRoomCreator={this.state.isRoomCreator} myTurn={this.state.myTurn} xUsername={this.state.xUsername} oUsername={this.state.oUsername} endGame={this.endGame} /> } </div>);

The Lobby component consists of a title, an empty tic tac toe board (nothing happens if the player presses the squares) and the ‘Createand ‘Joinbuttons. This component is displayed only if the state value isPlaying is false. If it’s set to true, then the game has begun and the component is changed to the Game component, which we will go over in the second part of the tutorial.

The Board component is part of the Lobby component as well. Within the Board component is the Square component. We won’t go into detail for these two components in order to focus on the Lobby and Game components.

When the player presses the ‘Create’ button, the button is disabled so the player can’t create multiple channels. The ‘Join’ button is not disabled, just in case the player decides to join a channel instead. Once the ‘Create’ button is pressed, the method onPressCreate() is called.

Create a Channel

The first thing we do in onPressCreate() is generate a random string id that’s truncated to 5 characters. We do so by using shortid(). We append the string to ‘tictactoelobby–‘, which will be the unique lobby channel players subscribe to.

// Create a room channelonPressCreate = (e) => { // Create a random name for the channel this.roomId = shortid.generate().substring(0,5); this.lobbyChannel = 'tictactoelobby--' + this.roomId; // Lobby channel name this.pubnub.subscribe({ channels: [this.lobbyChannel], withPresence: true // Checks the number of people in the channel });}

In order to prevent more than two players from joining a given channel, we use PubNub Presence. Later on, we will look at the logic for checking the occupancy of the channel.

Once the player subscribes to the lobby channel, a modal is displayed with the room id so another player can join that channel.

Build a Multiplayer Tic-Tac-Toe Game in React (5)

This modal, and all the modals used in this app, are created by SweetAlert2 to replace JavaScript’s default alert() popup boxes.

// Inside of onPressCreate()// ModalSwal.fire({ position: 'top', allowOutsideClick: false, title: 'Share this room ID with your friend', text: this.roomId, width: 275, padding: '0.7em', // Custom CSS to change the size of the modal customClass: { heightAuto: false, title: 'title-class', popup: 'popup-class', confirmButton: 'button-class' }})

At the end of onPressCreate(), we change the state values to reflect the new state of the app.

this.setState({ piece: 'X', isRoomCreator: true, isDisabled: true, // Disable the 'Create' button myTurn: true, // Player X makes the 1st move});

Once the player creates a room, they have to wait for another player to join that room. Let’s look at the logic for joining a room.

Join a Channel

When a player presses the ‘Join’ button, a call toonPressJoin() is called. A modal is displayed to the player asking them to enter the room id in the input field.

Build a Multiplayer Tic-Tac-Toe Game in React (6)

If the player types in the room id and presses the ‘OK’ button, then joinRoom(value) is called wherevalue is the room id. This method is not called if the input field is empty or if the player presses the ‘Cancel’ button.

// The 'Join' button was pressedonPressJoin = (e) => { Swal.fire({ position: 'top', input: 'text', allowOutsideClick: false, inputPlaceholder: 'Enter the room id', showCancelButton: true, confirmButtonColor: 'rgb(208,33,41)', confirmButtonText: 'OK', width: 275, padding: '0.7em', customClass: { heightAuto: false, popup: 'popup-class', confirmButton: 'join-button-class', cancelButton: 'join-button-class' } }).then((result) => { // Check if the user typed a value in the input field if(result.value){ this.joinRoom(result.value); } })}

The first thing we do injoinRoom() is appendvalue to ‘tictactoelobby–‘, similar to what we did in onPressCreate().

// Join a room channeljoinRoom = (value) => { this.roomId = value; this.lobbyChannel = 'tictactoelobby--' + this.roomId;}

Before the player subscribes to the lobby channel, we have to check the total occupancy of the channel by using hereNow(). If the total occupancy is less than 2, the player can successfully subscribe to the lobby channel.

(Video) Full Socket.io and React.js Online Multiplayer Tic-Tac-Toe Game | Socket.io From Zero To Hero

// Check the number of people in the channelthis.pubnub.hereNow({ channels: [this.lobbyChannel],}).then((response) => { if(response.totalOccupancy < 2){ this.pubnub.subscribe({ channels: [this.lobbyChannel], withPresence: true }); this.setState({ piece: 'O', // Player O }); this.pubnub.publish({ message: { notRoomCreator: true, }, channel: this.lobbyChannel }); }}).catch((error) => { console.log(error);});

After the player subscribes to the lobby channel, the state value of piece is changed to ‘O’ and a message is published to that lobby channel. This message notifies the Player Xthat another player has joined the channel. We set up the message listener in componentDidUpdate(), which we will get to shortly.

If the total occupancy is greater than 2, then a game is in progress and the player attempting to join the channel will be denied access. The following code is below the if statement in hereNow().

// Below the if statement in hereNow()else{ // Game in progress Swal.fire({ position: 'top', allowOutsideClick: false, title: 'Error', text: 'Game in progress. Try another room.', width: 275, padding: '0.7em', customClass: { heightAuto: false, title: 'title-class', popup: 'popup-class', confirmButton: 'button-class' } })}

Let’s now take a look at componentDidUpdate().

Start the Game

In componentDidUpdate(), we check if the player is connected to a channel, that is, check that this.lobbyChannel is notnull. If it’s notnull, we set up a listener that listens to all messages that arrive on the channel.

componentDidUpdate() { // Check that the player is connected to a channel if(this.lobbyChannel != null){ this.pubnub.getMessage(this.lobbyChannel, (msg) => { // Start the game once an opponent joins the channel if(msg.message.notRoomCreator){ // Create a different channel for the game this.gameChannel = 'tictactoegame--' + this.roomId; this.pubnub.subscribe({ channels: [this.gameChannel] }); } }); }}

We check if the message arrived is msg.message.notRoomCreator, which is published by the player that joins the channel. If so, we create a new channel, ‘tictactoegame–‘, with the room id appended to the string. The game channel is used to publish all the moves made by the players which will update their boards.

Finally, after subscribing to the game channel, the state value of isPlaying is set to true. Doing so will replace the lobby component with the game component.

 this.setState({ isPlaying: true }); // Close the modals if they are opened Swal.close();}

Once the game component is shown, we want to close all the modals, if opened, from the Lobby component by doing Swal.close().

Now that we have two players connected to a unique game channel, they can begin playing tic tac toe! In the next section, we will implement the UI and logic for the game component.

Build Game Features

The first thing we do in Game.js is set up the base constructor:

// Game.jsimport React from 'react';import Board from './Board';import Swal from "sweetalert2";class Game extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(''), // 3x3 board xScore: 0, oScore: 0, whosTurn: this.props.myTurn // Player X goes first }; this.turn = 'X'; this.gameOver = false; this.counter = 0; // Game ends in a tie when counter is 9 } render() { return (); } }export default Game;

For the state objects, we initialize the array squares property, which is used to store the player’s positions in the board. This will be explained furthermore below. We also set the players score to 0 and set the value of whosTurn tomyTurn, which is initialized to true forPlayer X andfalse forPlayer O.

The value of the variablesturn and counter will change throughout the progression of the game. At the end of the game,gameOver is set to true.

Add the UI

Next, let’s set up the markup for the Game component inside of the render method.

render() { let status; // Change to current player's turn status = `${this.state.whosTurn ? "Your turn" : "Opponent's turn"}`; return ( <div className="game"> <div className="board"> <Board squares={this.state.squares} onClick={index => this.onMakeMove(index)} /> <p className="status-info">{status}</p> </div> <div className="scores-container"> <div> <p>Player X: {this.state.xScore} </p> </div> <div> <p>Player O: {this.state.oScore} </p> </div> </div> </div> );}

We show the value of status in the UI to let the players know if it’s their turn to make a move or if the other player’s turn. The boolean value of the state whosTurn is updated every time a move is made. The rest of the UI consists of the Board component and the player’s score.

Add the Logic

When the player makes a move on the board, a call toonMakeMove(index) is made whereindex is the position the piece is placed on the board. The board has 3 rows and 3 columns, so 9 squares total. Each square has its own unique index value, starting with the value 0 and ending with the value 8.

onMakeMove = (index) =>{ const squares = this.state.squares; // Check if the square is empty and if it's the player's turn to make a move if(!squares[index] && (this.turn === this.props.piece)){ squares[index] = this.props.piece; this.setState({ squares: squares, whosTurn: !this.state.whosTurn }); // Other player's turn to make a move this.turn = (this.turn === 'X') ? 'O' : 'X'; // Publish move to the channel this.props.pubnub.publish({ message: { index: index, piece: this.props.piece, turn: this.turn }, channel: this.props.gameChannel }); // Check if there is a winner this.checkForWinner(squares) }}

After getting the state of the array squares, a conditional statement is used to check if the square the player touched is empty and if it’s their turn to make a move. If one or both conditions are not met, then the player’s piece is not placed on the square. Otherwise, the player’s piece is added to the array squares in the index the piece was placed on.

For example, if Player X makes a move in row 0, column 2 and the conditional statement is true, thensquares[2]will have the value of “X”.Build a Multiplayer Tic-Tac-Toe Game in React (7)Next, the state is changed to reflect the new state of the game andturn is updated so the other player can make their move. In order for the other player’s board to update with the current data, we publish the data to the game channel. All of this is happening in real time, so both players will immediately see their boards update as soon as a valid move is made. The last thing to do in this method is to call checkForWinner(squares) to check if there is a winner.

Before we do that, let’s take a look at componentDidMount()where we set up the listener for new messages that arrive in the game channel.

(Video) Live Stream # 1: Getting Started - Build an Online Multiplayer TicTacToe Game with React Firebase

componentDidMount(){ this.props.pubnub.getMessage(this.props.gameChannel, (msg) => { // Update other player's board if(msg.message.turn === this.props.piece){ this.publishMove(msg.message.index, msg.message.piece); } });}

Since both players are connected to the same game channel, they will both receive this message. The method publishMove(index, piece) is called, whereindex is the position that piece was placed and piece is the piece of the player that made the move. This method updates the board with the current move and checks if there is a winner. To prevent the player that made the current move to have to redo this process again, the if statement checks if the player’s piece matches the value ofturn. If so, their board is updated.

// Opponent's move is published to the boardpublishMove = (index, piece) => { const squares = this.state.squares; squares[index] = piece; this.turn = (squares[index] === 'X')? 'O' : 'X'; this.setState({ squares: squares, whosTurn: !this.state.whosTurn }); this.checkForWinner(squares)}

The logic of updating the board is the same as onMakeMove(). Let’s now go overcheckForWinner().

checkForWinner = (squares) => { // Possible winning combinations const possibleCombinations = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; // Iterate every combination to see if there is a match for (let i = 0; i < possibleCombinations.length; i += 1) { const [a, b, c] = possibleCombinations[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { this.announceWinner(squares[a]); return; } }}

All the winning combinations are in the double array possibleCombinations, where every array is a possible combination to winning the game. Every array inpossibleCombinations is checked against the arraysquares. If there is a match, then there is a winner. Let’s follow an example to make this more clear.

Say that Player X makes a winning move in row 2 column 0. The index of that position is 6. The board now looks like this:

Build a Multiplayer Tic-Tac-Toe Game in React (8)The winning combination for Player X is [2,4,6]. The array squares is updated to: [“O”, “”, “X”, “O”, “X”, “”, “X”, “”, “”].

In theforloop, when[a,b,c] has the values of [2,4,6], the if statement in thefor loop with be true since [2,4,6]all have the same value of X. The score of the winner needs to be updated, so announceWinner() is called to award the winning player.

If the game ends in a tie, there is no winner for that round. To check for tie games, we use a counter that increments by one every time a move is made on the board.

// Below the for loop in checkForWinner()// Check if the game ends in a drawthis.counter++;// The board is filled up and there is no winnerif(this.counter === 9){ this.gameOver = true; this.newRound(null);}

If the counter reaches 9, then the game ends in a draw because the player did not make a winning move in the last square of the board. When this happens, the methodnewRound() is called with a null argumentsince there is no winner.

Before we go to this method, let’s go back to announceWinner().

// Update score for the winnerannounceWinner = (winner) => { let pieces = { 'X': this.state.xScore, 'O': this.state.oScore } if(winner === 'X'){ pieces['X'] += 1; this.setState({ xScore: pieces['X'] }); } else{ pieces['O'] += 1; this.setState({ oScore: pieces['O'] }); } // End the game once there is a winner this.gameOver = true; this.newRound(winner);}

The parameter of this method is winner, which is the player that won the game. We check if the winner is ‘X’ or ‘O’ and increment the winner’s score by one point. Since the game is over, the variablegameOver is set to true and the methodnewRound() is called.

Start a New Round

Player X has the option to play another round or to end the game and go back to the lobby.

Build a Multiplayer Tic-Tac-Toe Game in React (9)

The other player has told to wait until Player X decides what to do.

Build a Multiplayer Tic-Tac-Toe Game in React (10)

Once thePlayer X decides what to do, a message is published to the game channel to let the other player know. The UI is then updated.

newRound = (winner) => { // Announce the winner or announce a tie game let title = (winner === null) ? 'Tie game!' : `Player ${winner} won!`; // Show this to Player O if((this.props.isRoomCreator === false) && this.gameOver){ Swal.fire({ position: 'top', allowOutsideClick: false, title: title, text: 'Waiting for a new round...', confirmButtonColor: 'rgb(208,33,41)', width: 275, customClass: { heightAuto: false, title: 'title-class', popup: 'popup-class', confirmButton: 'button-class', } , }); this.turn = 'X'; // Set turn to X so Player O can't make a move } // Show this to Player X else if(this.props.isRoomCreator && this.gameOver){ Swal.fire({ position: 'top', allowOutsideClick: false, title: title, text: 'Continue Playing?', showCancelButton: true, confirmButtonColor: 'rgb(208,33,41)', cancelButtonColor: '#aaa', cancelButtonText: 'Nope', confirmButtonText: 'Yea!', width: 275, customClass: { heightAuto: false, title: 'title-class', popup: 'popup-class', confirmButton: 'button-class', cancelButton: 'button-class' } , }).then((result) => { // Start a new round if (result.value) { this.props.pubnub.publish({ message: { reset: true }, channel: this.props.gameChannel }); } else{ // End the game this.props.pubnub.publish({ message: { endGame: true }, channel: this.props.gameChannel }); } }) } }

If the message isreset, then all the state values and variables, except the score for the players, are reset to their initial values. Any modals that are still open are closed and a new round starts for both players.

For the message endGame, all the modals are closed and the methodendGame() is called. This method is in App.js.

(Video) Recap #1: Getting Started - Build an Online Multiplayer TicTacToe Game with React Firebase

// Reset everythingendGame = () => { this.setState({ piece: '', isPlaying: false, isRoomCreator: false, isDisabled: false, myTurn: false, }); this.lobbyChannel = null; this.gameChannel = null; this.roomId = null; this.pubnub.unsubscribe({ channels : [this.lobbyChannel, this.gameChannel] });}

All the state values and variables are reset to their initial values. The channel names are reset to null because a new name is generated every time a player creates a room. Since the channel names won’t be useful anymore, the players unsubscribe from both the lobby and the game channel. The value ofisPlaying is reset to false, so the game component will be replaced with the lobby component.

The last method to include inApp.js iscomponentWillUnmount(), which unsubscribes the players from both channels.

componentWillUnmount() { this.pubnub.unsubscribe({ channels : [this.lobbyChannel, this.gameChannel] });}

This is all we need to do for the game to work! You can get the CSS file for the game in the repo. Now, let’s get the game up and running.

Run the Game

There are a couple of small steps we need to do before running the game. First, we need to enable the PubNub Presence feature because we use it to get the number of people in the channel (we usedwithPresence when subscribing to the lobby channel). Go to the PubNub Admin Dashboard and click on your application. Click onKeysetand scroll down toApplication add-ons. Toggle thePresence switch toon. Keep the default values the same.

Build a Multiplayer Tic-Tac-Toe Game in React (11)

To install the three dependencies used in the app and to run the app, you can run the script dependencies.sh that’s in the root directory of the app.

# dependencies.shnpm install --save pubnub pubnub-reactnpm install --save shortidnpm install --save sweetalert2npm start

In the terminal, go to the app’s root directory and type the following command to make the script executable:

chmod +x dependencies.sh

Run the script with this command:

./dependencies.sh

The app will open in http://localhost:3000 with the lobby component displaying.Build a Multiplayer Tic-Tac-Toe Game in React (12)Open another tab, or preferably window, and copy and paste http://localhost:3000. In one window, create a channel by clicking the ‘Create’ button. A modal will pop up displaying the room id. Copy and paste that id. Go to the other window and click the ‘Join’ button. When the modal pops up, type the room id in the input field and press the ‘Okay’ button.

Build a Multiplayer Tic-Tac-Toe Game in React (13)

Once the players are connected, the game will start. The window you used to create the channel makes the first move. Press any square on the board and see as the pieceX is displayed on the board in real time for both windows. If you try to press another square in the same board, nothing will happen because it’s no longer your turn to make a move. In the other window, press any square on the board and the piece Ois placed in the square.

Build a Multiplayer Tic-Tac-Toe Game in React (14)

Keep on playing until there is a winner or a tie. A modal is then displayed announcing the winner of the round, or announcing that the game ended in a tie. In the same modal, Player X will have to decide whether to continue playing or to exit the game. The modal forPlayer Owill tell them to wait for a new round.

Build a Multiplayer Tic-Tac-Toe Game in React (15)

Everything, except the score, is reset ifPlayer Xcontinues the game. Otherwise, both players are taken back to the lobby where they can create or join new channels. Check out the game demo below:

Create a Native Mobile Version

Now that you’ve got your game working beautifully in web browsers, let’s take it mobile! Check out how to build aMultiplayer Tic Tac Toe Game in React Native for Android and iOS. And if you want to build more real-time games and want to know how PubNub can help you with that, check out the multiplayer gaming tutorials.

(Video) Live Stream # 6: User Profile - Build an Online Multiplayer TicTacToe Game with React Firebase

Have suggestions or questions about the content of this post? Reach out atdevrel@pubnub.com.

FAQs

How do you make the Tic Tac Toe game in react? ›

Step 1: You will start a new project using create-react-app so open your terminal and type. Step 2: Switch to the tic-tac-toe-react folder using the following command. Step 4: Create a css folder in src, which contains the app. css, board.
...
Prerequisite:
  1. Introduction to React.
  2. Functional Components in React.
  3. React Hooks.
Apr 20, 2022

How do you make a multiplayer game in Javascript? ›

Build a Multiplayer Game with JavaScript & Firebase - YouTube

Can I use React to make a game? ›

React is a good library to pick for creating simple browser-based games, like tic tac toe, rock paper scissors, or any simple card game. However, it's not suitable for creating more complex games.

How do you make a game in react? ›

Coding a Turn-Based Battle Game With React Only - YouTube

Is react JS hard to learn? ›

Both HTML and CSS are integral to any web development project. If you have these skills already, then learning React should be a relatively straightforward process. It has its own unique set of challenges, but it is an excellent tool to have in order to start or further your career as a web developer.

How long learn react JS? ›

3. How Long Does it Take to Learn React?
  • JavaScript Basics: 3-4 months.
  • JavaScript Advanced: Learn on the job.
  • React JS Basics*: A few days.
  • React JS Advanced**: 3-4 months.

How do you create a multiplayer game? ›

How to Make a Multiplayer Game - The Lobby - YouTube

How do you create a multiplayer game online? ›

HOW TO MAKE AN ONLINE MULTIPLAYER GAME - YouTube

How do you make a simple multiplayer game? ›

9 EASY Steps to create a multiplayer game with Unity & Photon - Tutorial

Is angular better than React? ›

React is better than Angular due to it's virtual DOM implementation and rendering optimizations. Migrating between React's versions is quite easy, too; you don't need to install updates one by one, as in the case of Angular. Finally, with React, developers have myriads of existing solutions they can use.

How do I practice react JS? ›

  1. 21 Best Practices for a Clean React Project. Practical advice for improving code quality. ...
  2. Use JSX ShortHand. Try to use JSX shorthand for passing boolean variables. ...
  3. Use Ternary Operators. ...
  4. Take Advantage of Object Literals. ...
  5. Use Fragments. ...
  6. Don't Define a Function Inside Render. ...
  7. Use Memo. ...
  8. Put CSS in JavaScript.
Apr 23, 2021

How learn react JS for beginners? ›

To learn and test React, you should set up a React Environment on your computer. This tutorial uses the create-react-app . The create-react-app tool is an officially supported way to create React applications. Node.js is required to use create-react-app .

How do you make a 2048 game in react JS? ›

How to create Game 2048 in JavaScript, ReactJS, React Native?
  1. The solution to manage the game board.
  2. Init the game board.
  3. Move the game board to the left.
  4. Move the game board to the right.
  5. Move the game board to the top.
  6. Move the game board to the bottom.
  7. Check win status.
  8. Check game over.
Feb 18, 2021

Is React front-end or backend? ›

Answers. Reactjs is a frontend library, React is used as client-side programming building things that a user will see and interact on-screen in their browser window which makes, React JS a front-end library.

How do you build a 2048 game? ›

Below are the steps to develop python 2048 game from scratch:
  1. Import module.
  2. Creating Game class.
  3. Making Color Coding.
  4. Create a function To make GUI.
  5. Creating Score header.
  6. Create a function to start game.
  7. Make matrix manipulation functions.
  8. Create a function to randomly add new tile.

Can you build games with node js? ›

If you want to learn or refresh your skills in Javascript, you should make a game using Node. js. If you're already a Javascript developer, you should teach others how to make a game in Node.

What is vanilla script? ›

"VanillaJS is a name to refer to using plain JavaScript without any additional libraries like jQuery back in the days. People use it as a joke to remind other developers that many things can be done nowadays without the need for additional JavaScript libraries." Or, in our case, without new, fancy frameworks.

What is phaser3? ›

Phaser 3 is the new version of the Phaser Game Framework series. It includes a brand-new custom WebGL renderer designed specifically for the needs of modern 2D games. Phaser uses both a Canvas and WebGL renderer internally and automatically switch between them based on browser support.

Videos

1. New Series Introduction - Build an Online Multiplayer TicTacToe Game with React Firebase
(Barry Michael Doyle)
2. Live Stream # 4: App Layout - Build an Online Multiplayer TicTacToe Game with React Firebase
(Barry Michael Doyle)
3. Online Multiplayer TIC TAC TOE with React Native and AWS Amplify 🔴
(notJust․dev)
4. Recap # 4: App Layout - Build an Online Multiplayer TicTacToe Game with React Firebase
(Barry Michael Doyle)
5. Live Stream # 8: Connecting Users - Build Online Multiplayer TicTacToe Game with React Firebase
(Barry Michael Doyle)
6. Multiplayer Tic Tac Toe React Socket.io NodeJS/Express
(Augustin Sorel)

Top Articles

Latest Posts

Article information

Author: Lilliana Bartoletti

Last Updated: 12/22/2022

Views: 6406

Rating: 4.2 / 5 (53 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Lilliana Bartoletti

Birthday: 1999-11-18

Address: 58866 Tricia Spurs, North Melvinberg, HI 91346-3774

Phone: +50616620367928

Job: Real-Estate Liaison

Hobby: Graffiti, Astronomy, Handball, Magic, Origami, Fashion, Foreign language learning

Introduction: My name is Lilliana Bartoletti, I am a adventurous, pleasant, shiny, beautiful, handsome, zealous, tasty person who loves writing and wants to share my knowledge and understanding with you.