Card Guessing game with React part 2

Let's initialize the project with a boiler plate. Previously, it was done using create-react-app but it is no longer supported. Now we need use npm to initialize the app. Check here for more information. The goal for today is to display a single card with any number specified.

npm init react-app is_this_your_card

Run the newly create app to make sure it's working.

npm start

If everything is okay you will the spinning React logo.

In the src/App.js remove everything inside return(). it should look something like this.

function App() {
  return (

  );
}

Let's create a new component called Card. Make a new folder components inside src folder and create a new JSX file called Card.jsx.

src
|-- components
|---|-- Card.jsx

Type the following in the Card.jsx file.

import React from "react";

export default function Card() {
  return (

  );
}

I used "ES7 React/Redux/GraphQL/React-Native snippets" in VS Code to speed up my workflow. You may check it out from ES7 React/Redux/GraphQL/React-Native snippets extension. With the extension, I can just type "rfc" followed by "Tab" and it will generate the above.

To make a card we need a rectangle box with a number inside. We will use a <div> and an <h1>.

<div>
  <h1>27</h1>
</div>

Since Card.jsx is an external component, we will need to import and use it inside App.js. Add this line at the top of App.js file

import Card from './components/Card'

We can simply use the imported Card inside the <div> of App.js just like this.

function App() {
  return <Card />
}

And we get this.

The box is nowhere to be seen yet. We are gonna need some styling. Let's define two styles const inside Card.jsx namely "cardStyle" and "numStyle".

const cardStyle = {
  display: 'flex',
  color: 'white',
  justifyContent: 'center',
  alignItems: 'center',
  width: '20px',
  height: '30px',
  backgroundColor: 'DodgerBlue',
  padding: '10px',
  fontFamily: 'Arial',
  borderRadius: '5px',
  margin: '10px 20px',
}

const numStyle = {
  fontSize: '20px',
}

Now we can use the styles in our <div> and <h1>.

<div style={cardStyle}>
  <h1 style={numStyle}>27</h1>
</div>

Looks better now :)

Currently we can only get the card with number 27. For our card game we need 27 different numbers (1 to 27). We are going to make use of props to achive this goal. In our Card.jsx component, accept props as parameter.

export default function Card(props)

Remove the previously used placeholder number 27 and retrieve the given number by using {props.number} in the h1 tag inside Card.jsx. We need to use curly braces {} whenever we want to use objects inside the html elements.

In Card.jsx

return (
  <div style={cardStyle}>
    <h1 style={numStyle}>{props.number}</h1>
  </div>
)

All that left to do is to pass in a number from App.js for <Card> element. We can do this by putting number={xx} in the <Card> where xx is the number to be displayed. Let's use number 11 for no apparent reason.

In App.js

return <Card number={11} />

And viola! We have achieved our goal for part 2. Thanks for visiting. See you in part 2 :D

Title Photo by Clifford Photography on Unsplash