3. Conditional Rendering and for Loops

Activity 3.01: Building a Board Game Using Conditional Rendering

Solution:

1. First, start off by creating your new React project (as we have done so many times before). As per usual, delete src/logo.svg, and then change the import statements in src/App.js to import React and the Component class from React. Do not delete the import statement for src/App.css. In src/App.js, the code should look like this:

   import React, { Component } from 'react';
   import './App.css';
   class App extends Component {
     render() {
     return (
       <div className="App">
         <h1>Memory Game</h1>
       </div>
     );
     }
   }
   export default App;

   The CSS that we used here is as follows:

   .Tile {
   width: 200px;
   height: 200px;
   font-size: 64pt;
   border: 2px solid #aaa;
   text-align: center;
   margin: 10px;
   padding: 10px;
   float...