Necessary Concepts to Build a Rock Paper Scissors App

In this module, we will go through the key React concepts that make our Rock Paper Scissors app work. These include components, state with hooks, event handling, arrays and mapping, and conditional rendering. Understanding these concepts will help you clearly see how the app’s logic and UI fit together.

1) Components

A component in React is a small, reusable piece of UI that returns some JSX. Our app is built as a function component named App. This component contains all the logic, state, and rendering for the Rock Paper Scissors game.

• Function components are written as plain JavaScript functions.
• They must start with a capital letter (like App) so React knows it’s a custom component.
• A component can contain other smaller components, but in this app we kept everything inside one main App component.

In short, the App component is where we define how the game looks (buttons, headings, scoreboard) and how it behaves (logic for winning and losing).

2) State and Hooks

React state lets our app “remember” values between re-renders. The main hook we used is useState.

Example from our code:

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

• Here playerChoice is the state variable that stores the player’s selection.
• setPlayerChoice is the function used to update it.
• The initial value is an empty string "".

We used multiple state variables in the app:

• playerChoice → stores the player’s move.
• computerChoice → stores the randomly chosen computer move.
• result → stores the outcome message.
• playerScore and computerScore → keep track of the scores.

Whenever state is updated (for example, setPlayerScore(playerScore + 1)), React re-renders the component so the new values show on screen immediately.

3) Event Handling

Our app needs to respond when the player clicks a button. In React, this is done with event handlers.

Example:

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

{choice}

</button>

• onClick is the React event for button clicks.
• Instead of traditional HTML’s onclick="playGame()", React uses curly braces {} to pass a function.
• We created a function playGame(choice) that runs the game logic each time a button is clicked.

Inside playGame, we:

1. Pick a random choice for the computer.
2. Compare it with the player’s choice.
3. Update the state for result, playerScore, or computerScore.

This way, user actions trigger changes in the app’s behavior.

4) Arrays and Mapping

Instead of writing separate buttons for Rock, Paper, and Scissors, we stored them in an array:

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

We then used the map() method to loop through this array and create one button for each choice:

{choices.map((choice) => (

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

{choice}

</button>

))}

• map() returns a new array of elements.
• Each element here is a <button> with the correct label and click handler.
• key={choice} is a React requirement so that each button has a unique identifier.

This technique makes the code shorter and more flexible. If we added “Lizard” or “Spock,” the app would generate new buttons automatically.

5) Conditional Rendering and Expressions

React allows us to embed JavaScript expressions in JSX using curly braces {}. This is how we displayed dynamic values like scores and results.

Examples:

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

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

<h2>{result}</h2>

Here, React takes the current state values and injects them into the HTML structure. Every time state updates, React re-renders and the displayed text changes.

This is called conditional rendering because the output depends on the current conditions (for example, if playerChoice is empty, nothing shows; once the user clicks a button, the choice appears).