Part 2: Setting up the Layout

1. Create a new folder under src and name it components.
2. Create 2 jsx files under components and name them GameView.jsx, WelcomeView.
3. Copy the welcome div and game div from the previous PRS assignment and place them as the content of those components.

src/components/WelcomeView.jsx

const WelcomeView = (props) => {
  return (
    <div id="welcome-screen">
      <form id="name-form">
        <div class="form-group">
          <label for="username">Type your name: </label>
          <input
            class="form-control"
            type="text"
            id="username"
            name="username"
            required
            placeholder="Enter Name Here..."
            minlength="2"
            maxlength="15"
          />
        </div>
        <button class="btn btn-primary" id="start-game-button" type="button">
          Start Game!
        </button>
      </form>
    </div>
  );
};

export default WelcomeView;

src/components/GameView.jsx

const GameView = (props) => {
  return (
    <div id="game-screen">
      <div id="score-tally">
        <p id="score"> User: 0 v CPU: 0</p>
      </div>

      <form id="game-form">
        <div class="form-group">
          <label for="user-selection">Select your choice: </label>
          <select
            class="custom-select"
            id="user-selection"
            name="user-selection"
          >
            <option id="rock" value="rock">
              Rock
            </option>
            <option id="paper" value="paper">
              Paper
            </option>
            <option id="scissors" value="scissors">
              Scissors
            </option>
          </select>
        </div>
        <button class="btn btn-success" type="button" id="go-button">
          Go!
        </button>
      </form>

      <p id="game-history"></p>
      <button id="reset-game-button" class="btn btn-secondary">
        Reset{" "}
      </button>
    </div>
  );
};

export default GameView;

5. Import the 2 new components into the App.jsx component.

App.jsx

import './App.css';
import GameView from './components/GameView';
import WelcomeView from './components/WelcomeView';

function App() {
  return (
    <div class="container">
      <h1 class="mainHeader">Rock Paper Scissors</h1>
      <WelcomeView />
      <GameView />
    </div>
  );
}

export default App;

6. We'll need to renamed/react-ify certain html properties in our components
   • rename class with className
   • rename for with htmlFor

tip

Retaining the same class names and ids will make it easier to use the same CSS and Automated Tests from the previous assignment.