Build a Simple React JavaScript Interactive Interactive Text-Based Number Guessing Game: A Beginner’s Guide

Written by

learnmodernjavascript

in

Ever found yourself staring blankly at a screen, wishing you could build a fun, interactive web application? Learning React.js can seem daunting, but it doesn’t have to be! This tutorial will guide you, step-by-step, through creating a simple yet engaging number guessing game using React. This project is perfect for beginners, allowing you to grasp fundamental React concepts while building something you can actually play. We’ll break down the code into manageable chunks, explain each part in simple terms, and help you avoid common pitfalls. Get ready to turn your coding curiosity into a playable reality!

Why Build a Number Guessing Game?

Creating a number guessing game is an excellent entry point into React development for several key reasons:

  • Fundamental Concepts: It allows you to practice essential React concepts like state management, event handling, and conditional rendering.
  • Immediate Feedback: You’ll see your code’s results instantly, making it easier to understand how changes affect the application.
  • Manageable Scope: The project is small enough to complete without getting overwhelmed, boosting your confidence.
  • Fun Factor: It’s enjoyable! You’re not just learning code; you’re creating something interactive and entertaining.

By the end of this tutorial, you’ll not only have a working game but also a solid foundation for more complex React projects.

Prerequisites

Before we dive in, ensure you have the following:

  • Basic HTML, CSS, and JavaScript Knowledge: Familiarity with these languages is helpful, but even a beginner’s understanding will suffice.
  • Node.js and npm (or yarn) installed: You’ll need these to set up and manage your React project.
  • A Code Editor: Visual Studio Code, Sublime Text, or any other editor you prefer.

Setting Up Your React Project

Let’s get started by creating our React application. Open your terminal or command prompt and navigate to the directory where you want to store your project. Then, run the following command to create a new React app using Create React App:

npx create-react-app number-guessing-game

This command sets up a basic React project with all the necessary dependencies. Once the installation is complete, navigate into your project directory:

cd number-guessing-game

Now, start the development server:

npm start

This will open your React app in your default web browser, usually at http://localhost:3000.

Project Structure

Your project directory should look something like this:

number-guessing-game/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

The core of our application will reside in the src directory. We’ll be primarily working with App.js to build our game’s components.

Building the Game Components

Our number guessing game will have a few key components:

  • App.js: The main component that orchestrates the game.
  • GuessInput: A component to handle user input for their guess.
  • ResultDisplay: A component to display feedback (e.g., “Too high!”, “Too low!”, “Correct!”).
  • GameStats: A component to display the number of guesses taken and the remaining attempts.

1. The App Component (App.js)

Let’s start by modifying App.js. This component will manage the game’s state and logic.

import React, { useState, useEffect } from 'react';
import GuessInput from './GuessInput';
import ResultDisplay from './ResultDisplay';
import GameStats from './GameStats';
import './App.css';

function App() {
  const [secretNumber, setSecretNumber] = useState(() => Math.floor(Math.random() * 100) + 1); // Generate a random number between 1 and 100
  const [guess, setGuess] = useState('');
  const [feedback, setFeedback] = useState('');
  const [guessesLeft, setGuessesLeft] = useState(10);
  const [gameWon, setGameWon] = useState(false);
  const [gameOver, setGameOver] = useState(false);
  const [highScore, setHighScore] = useState(localStorage.getItem('highScore') || 10);

  useEffect(() => {
    if (gameWon || gameOver) {
        if (guessesLeft < highScore && gameWon) {
            setHighScore(guessesLeft);
            localStorage.setItem('highScore', guessesLeft);
        } else if (gameOver && guessesLeft  {
    setGuess(event.target.value);
  };

  const checkGuess = () => {
    const guessedNumber = parseInt(guess);

    if (isNaN(guessedNumber) || guessedNumber  100) {
      setFeedback('Please enter a valid number between 1 and 100.');
      return;
    }

    if (guessedNumber === secretNumber) {
      setFeedback('Congratulations! You guessed the number!');
      setGameWon(true);
    } else if (guessedNumber  {
    if (guessesLeft === 0) {
      setFeedback(`You ran out of guesses. The number was ${secretNumber}.`);
      setGameOver(true);
    }
  }, [guessesLeft, secretNumber]);

  const handleReset = () => {
    setSecretNumber(Math.floor(Math.random() * 100) + 1);
    setGuess('');
    setFeedback('');
    setGuessesLeft(10);
    setGameWon(false);
    setGameOver(false);
  };

  return (
    <div>
      <h1>Number Guessing Game</h1>
      
      {!gameWon && !gameOver && (
        
      )}
      
      {(gameWon || gameOver) && (
        <button>Play Again</button>
      )}
    </div>
  );
}

export default App;

Explanation:

  • Import Statements: Imports necessary modules from React and other components.
  • State Variables:
    • secretNumber: The randomly generated number the user needs to guess.
    • guess: The user’s current guess.
    • feedback: Feedback to the user (e.g., “Too high!”).
    • guessesLeft: The number of guesses remaining.
    • gameWon: A boolean to indicate if the game has been won.
    • gameOver: A boolean to indicate if the game is over.
    • highScore: The user’s best score.
  • useEffect Hooks:
    • The first useEffect hook updates the high score in local storage when the game is won or lost.
    • The second useEffect hook checks if the user has run out of guesses and sets the game over state.
  • Event Handlers:
    • handleGuessChange: Updates the guess state when the user types in the input field.
    • checkGuess: Compares the user’s guess with the secretNumber and provides feedback.
    • handleReset: Resets the game to its initial state.
  • JSX Structure: Renders the game’s UI, including the input field, feedback, and a “Play Again” button when the game is over.

2. The GuessInput Component (GuessInput.js)

Create a new file named GuessInput.js in the src directory. This component will handle the user’s input.

import React from 'react';

function GuessInput({ guess, onGuessChange, checkGuess }) {
  return (
    <div>
      <label>Enter your guess (1-100): </label>
      
      <button>Guess</button>
    </div>
  );
}

export default GuessInput;

Explanation:

  • Props: This component receives three props: guess (the current guess value), onGuessChange (the function to update the guess), and checkGuess (the function to check the guess).
  • JSX Structure: Renders an input field and a button. The input field’s value is bound to the guess prop, and its onChange event calls the onGuessChange function. The button’s onClick event calls the checkGuess function.

3. The ResultDisplay Component (ResultDisplay.js)

Create a new file named ResultDisplay.js in the src directory. This component displays feedback to the user.

import React from 'react';

function ResultDisplay({ feedback, gameWon, gameOver, secretNumber }) {
  return (
    <div>
      {gameWon && <p>Congratulations! You guessed the number!</p>}
      {gameOver && <p>You ran out of guesses. The number was {secretNumber}.</p>}
      {!gameWon && !gameOver && <p>{feedback}</p>}
    </div>
  );
}

export default ResultDisplay;

Explanation:

  • Props: This component receives the feedback, gameWon, and gameOver props.
  • Conditional Rendering: It uses conditional rendering to display different messages based on the game’s state.

4. The GameStats Component (GameStats.js)

Create a new file named GameStats.js in the src directory. This component displays game statistics.

import React from 'react';

function GameStats({ guessesLeft, highScore }) {
  return (
    <div>
      <p>Guesses remaining: {guessesLeft}</p>
      <p>High Score: {highScore}</p>
    </div>
  );
}

export default GameStats;

Explanation:

  • Props: This component receives the guessesLeft and highScore props.
  • JSX Structure: Displays the number of guesses left and the high score.

5. Styling (App.css)

Create or modify App.css in the src directory to add some basic styling:

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

.result {
  margin-top: 10px;
}

input {
  padding: 5px;
  margin: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
}

.game-stats {
  margin-bottom: 10px;
}

Putting It All Together

Now, import the GuessInput, ResultDisplay, and GameStats components into App.js, and use them to structure your game’s UI. The code for App.js should now look like the first code block in the “Building the Game Components” section.

Running and Testing Your Game

Save all your files. Your React development server should automatically refresh the page in your browser. If not, refresh it manually. You should see the basic structure of your number guessing game.

Here’s how to test your game:

  1. Enter a number in the input field.
  2. Click the “Guess” button.
  3. You should receive feedback (e.g., “Too high!”, “Too low!”, or “Congratulations!”).
  4. Try guessing again until you win or run out of guesses.
  5. Click “Play Again” to start a new game.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React applications and how to avoid them:

  • Incorrect State Updates:
    • Mistake: Directly modifying state variables (e.g., this.state.count++).
    • Fix: Always use the set... functions provided by useState to update state. For example, setCount(count + 1).
  • Forgetting to Handle Events:
    • Mistake: Not handling user input events like onChange or onClick.
    • Fix: Attach event handlers to the appropriate elements (e.g., <input onChange={handleChange} />).
  • Incorrect Conditional Rendering:
    • Mistake: Displaying elements without properly checking conditions.
    • Fix: Use conditional rendering with the ternary operator (condition ? <element1> : <element2>) or logical && operator (condition && <element>).
  • Ignoring Prop Drilling:
    • Mistake: Passing props down multiple levels of components when a component only needs them to pass to a child.
    • Fix: Consider using Context API or a state management library (like Redux or Zustand) for global state management in larger applications.
  • Not Handling Form Submissions:
    • Mistake: Not preventing the default form submission behavior.
    • Fix: If you have a form, prevent the default behavior with event.preventDefault() in your submit handler.

Key Takeaways

Here’s a recap of what you’ve learned:

  • How to create a React application using Create React App.
  • How to manage state using the useState hook.
  • How to handle user input with event handlers.
  • How to render components conditionally.
  • How to structure a React application into reusable components.

FAQ

Here are some frequently asked questions:

  1. How can I deploy this game online?

    You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting for static websites. You’ll need to build your project (npm run build) and then follow the platform’s deployment instructions.

  2. How can I add more features to this game?

    You could add features like difficulty levels, a timer, a hint button, or a leaderboard. You would need to add more state variables and event handlers to manage these additional features.

  3. Why am I getting an error in the console?

    Check the console in your browser’s developer tools for error messages. These messages often provide clues about what’s going wrong. Common errors include typos in your code, incorrect imports, or issues with state updates.

  4. What are some good resources for learning more React?

    The official React documentation (https://react.dev) is an excellent starting point. Other resources include online courses (e.g., Udemy, Coursera), tutorials, and the React community on platforms like Stack Overflow and Reddit.

  5. How can I improve the game’s styling?

    You can use CSS, a CSS framework like Bootstrap or Tailwind CSS, or a component library like Material UI or Ant Design to enhance the game’s styling. These resources provide pre-built components and styling options to make your app look more polished.

This tutorial provides a solid foundation for building interactive web applications with React. By understanding the core concepts and practicing with a simple project like this number guessing game, you’re well on your way to mastering React. Remember that the best way to learn is by doing, so keep experimenting, building, and exploring. The world of React development is vast and exciting, and with each project, you’ll gain more confidence and skill. The journey of a thousand lines of code begins with a single guess. Happy coding!

More posts