What is a Rock Paper Scissors App?

React is a powerful JavaScript library for building interactive user interfaces. It allows developers to create reusable components, manage application state effectively, and render changes on the screen instantly without reloading the page. React is widely used for building modern web applications, from small games to complex dashboards.

In this project, we will build a Rock Paper Scissors App: a fun and interactive React application where the player competes against the computer. The game showcases essential React concepts such as state management, event handling, conditional rendering, and component-driven UI development.

The goal of this project is to learn React fundamentals by building a complete app step by step and then deploy it online using Netlify. By the end, you will have a fully functional game accessible on the web.

What is a Rock Paper Scissors App and its purpose?

A Rock Paper Scissors app is a digital version of the classic hand game. The player chooses Rock, Paper, or Scissors, and the computer makes a random choice. The app then compares both choices to determine the winner based on simple rules:

• Rock beats Scissors
• Scissors beats Paper
• Paper beats Rock

In our React app, the interface will display:

• Buttons for the player to select Rock, Paper, or Scissors
• The computer’s randomly generated choice
• The result of the round (Win, Lose, or Draw)
• A scoreboard showing ongoing scores for both the player and the computer

The purpose of this project is to introduce how React handles state updates, user interactions, and conditional logic. As the user plays, the app dynamically updates the view without needing a page refresh.

Aim of the project

The main aim of this project is to guide beginners in learning how to build and deploy a React app through hands-on coding. By the end of Module 1, you’ll clearly understand the app’s objectives and structure, preparing you to set up your own development environment and start coding along.

Specifically, you will learn how to:

• Set up a new React project using Vite (a fast build tool for modern web apps)
• Create and organize React components
• Use the useState hook to manage game data (choices, results, scores)
• Handle button click events to run the game logic
• Render results and scores dynamically on the screen
• Apply simple inline and CSS styling to improve the interface
• Deploy the app online using Netlify so it is accessible from any browser

The end result is a working Rock Paper Scissors app that is both fun to play and educational, teaching you the core workflow of building with React from start to finish.