Step-by-Step Implementation to Build a Rock Paper Scissors App in React

In this module, we actually build the Rock Paper Scissors app. We set up the environment, create the project structure, and implement the game logic file by file.

1) Set up the environment

We’ll use Vite instead of Create React App since it’s faster and lighter.

Open a terminal and run:

npm create vite@latest rps-react

Choose the following options:

• Project name: rps-react
• Framework: React
• Variant: JavaScript

Next, install dependencies:

cd rps-react

npm install

Start the development server:

npm run dev

You’ll see a local URL like http://localhost:5173/. Open this in your browser. It shows the Vite + React starter page.

2) Create Application Structure (Directory Structure)

After running Vite, you’ll get a structure like this:

rps-react/

├── index.html

├── package.json

├── vite.config.js

├── public/

└── src/

├── App.jsx

├── index.css

├── App.css

└── main.jsx

• index.html has a root <div id="root">. React will inject our app here.
• src/main.jsx is the entry point that renders <App /> into the root div.
• src/App.jsx is where we write the Rock Paper Scissors logic.
• src/index.css and src/App.css are for styling.

3) Rendering App in main.jsx

Open src/main.jsx. By default, it already renders the App component:

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

<StrictMode>

<App />

</StrictMode>,

)

This code finds the <div id="root"></div> in index.html and places our React App there.

4) Build the Game Logic in App.jsx

Now open src/App.jsx. Replace the template with the Rock Paper Scissors code.

Step 1: Import React and set up state:

import React, { useState } from "react";

Step 2: Define choices and states:

const choices = ["Rock ✊", "Paper ✋", "Scissors ✌️"];

const [playerChoice, setPlayerChoice] = useState("");

const [computerChoice, setComputerChoice] = useState("");

const [result, setResult] = useState("");

const [playerScore, setPlayerScore] = useState(0);

const [computerScore, setComputerScore] = useState(0);

Step 3: Write the game function:

function playGame(choice) {

const randomChoice = choices[Math.floor(Math.random() * choices.length)];

setPlayerChoice(choice);

setComputerChoice(randomChoice);

if (choice === randomChoice) {

setResult("It's a Draw!");

} else if (

(choice === "Rock ✊" && randomChoice === "Scissors ✌️") ||

(choice === "Paper ✋" && randomChoice === "Rock ✊") ||

(choice === "Scissors ✌️" && randomChoice === "Paper ✋")

) {

setResult("You Win!");

setPlayerScore(playerScore + 1);

} else {

setResult("Computer Wins!");

setComputerScore(computerScore + 1);

}

}

Step 4: Return the UI:

return (

<div style={{

fontFamily: "system-ui",

minHeight: "100vh",

width: "100vw",

display: "flex",

flexDirection: "column",

justifyContent: "center",

alignItems: "center",

backgroundColor: "#1e1e2e",

color: "#f8f8f2"

}}>

<h1>Rock Paper Scissors</h1>

<div style={{ display: "flex", gap: 16 }}>

{choices.map((choice) => (

<button key={choice} onClick={() => playGame(choice)}>

{choice}

</button>

))}

</div>

<div>

<h3>Your Choice: {playerChoice}</h3>

<h3>Computer's Choice: {computerChoice}</h3>

<h2>{result}</h2>

</div>

<div>

<h2>Scoreboard</h2>

<p>You: {playerScore}</p>

<p>Computer: {computerScore}</p>

</div>

</div>

);

Now the game works. Each button click lets you play Rock, Paper, or Scissors against the computer. The result is displayed along with updated scores.

5) Styling with CSS

We used inline styles above for layout, but we also have index.css and App.css where you can add extra styling.

For example, in index.css you can reset margins and make the app responsive:

body {

margin: 0;

font-family: system-ui, sans-serif;

background: #1e1e2e;

color: #f8f8f2;

}

And in App.css, you can customize buttons:

button {

padding: 12px 24px;

border-radius: 12px;

border: none;

background: #44475a;

color: #f8f8f2;

cursor: pointer;

transition: background 0.3s ease;

}

button:hover {

background: #6272a4;

}

Save the files, and Vite will automatically reload to show your styled Rock Paper Scissors app.

6) Final Touches and Deployment

• Add a footer with your name or a credit link inside App.jsx.
• Test by playing multiple rounds to confirm the scoreboard updates correctly.

To deploy, build the app:

npm run build

This creates a dist folder with optimized production files. You can host the app easily on services like Netlify or Vercel.