Number Guessing Game in React

Number Guessing Game in React JS [Step By Step]

Number Guessing Game in React

Guessing the number with React is a fun way to learn and practice React skills. In this article, we will walk you through how to build a complete number guessing game in React. 

The game will generate a random number between 1 and 100 and the player has to guess the number. The game will provide feedback to the player if the guessed number is too high or too low until they guess the correct number.

Number Guessing Game in React

Before we start to create Number Guessing Game with react JS, make sure that you have the following installed on your machine:

  • Node.js and npm
  • React

Getting Started

First, let’s create a new React project using create-react-app.

				
					npx create-react-app number-guessing-game
cd number-guessing-game
npm start

This will create a new React project in the number-guessing-game directory and start the development server. You can open the project in your browser at http://localhost:3000.

Creating the Component of Number Guessing Game in React

Next, let’s create a new component called Game that will be responsible for generating the random number and managing the React Number Guessing Game state.

				
					import React, { useState } from 'react';

function Game() {
  const [number, setNumber] = useState(Math.floor(Math.random() * 100) + 1);
  const [guess, setGuess] = useState(null);
  const [feedback, setFeedback] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    if (guess === number) {
      setFeedback('You guessed the correct number!');
    } else if (guess > number) {
      setFeedback('Too high! Try again.');
    } else {
      setFeedback('Too low! Try again.');
    }
    setGuess(null);
  }

  return (
    <div>
      <h1>Number Guessing Game</h1>
      <p>{feedback}</p>
      <form onSubmit={handleSubmit}>
        <label>
          Guess the number between 1 and 100:
          <input
            type="number"
            min="1"
            max="100"
            value={guess}
            onChange={event => setGuess(parseInt(event.target.value))}
          />
        </label>
        <button type="submit">Guess</button>
      </form>
    </div>
  );
}

export default Game;

Let’s go through the code. We’re using the useState hook to manage three pieces of state:

  • number: the random number generated by the game
  • guess: the player’s guess, which starts as null
  • feedback: the feedback message to display to the player, which starts as an empty string

We’re also defining a handleSubmit function that will be called when the player submits their guess. It first checks if the guess is correct and updates the feedback state accordingly. It then resets the guess state to null.

In the return statement, we’re rendering a simple form with a label and an input for the player to enter their guess. We’re also rendering the feedback state to give the player feedback on their guess.

Integrating the React Number Guessing Game Component

Now that we have our Game component, let’s integrate it into our App component.

				
					import React from 'react';
import Game from './Game';

function App() {
  return (
    <div>
      <Game />
    </div>
  );
}

export default App;

The App component is a functional component that returns a JSX element. In this case, it’s a div element that contains the Game component.

The Game component is imported from a separate file and rendered inside the App component using JSX syntax. This is an example of how you can compose multiple components to build more complex user interfaces in React.

The export default statement at the end of the file exports the App component so that it can be imported and used in other files.

Here, we’re simply rendering the Game component inside the App component.

Styling the Number Guessing Game React

Finally, let’s add some CSS styles to make our game(Number Guessing Game in React) look better. You can add the following styles to the index.css

				
					body {
  font-family: sans-serif;
  text-align: center;
}

h1 {
  margin-top: 0;
}

form {
  margin-top: 2rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  padding: 0.5rem;
  font-size: 1.2rem;
}

button {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  background-color: #0077cc;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button:hover {
  background-color: #005ea6;
}

Conclusion

Congratulations! You have now built a simple number guessing game in React. This is just a simple example, but you can customize the game and add more features to make it more interesting. For example, you can keep track of the number of guesses the player has made or add a timer to make the React Number Guessing Game more challenging.

React is a powerful and flexible tool for building interactive web applications, and this project is a great way to practice and improve your React skills. Have fun building and experimenting with your own variations of the game!

Tags: ,