Our very first Component

The way you play, you need to talk about winning. Don’t talk about keeping your card — talk about winning.

Vijay Singh

Now that we have an up-and-running app, we will have some fun and write our very first component.

For this article, we will keep things simple, and write our first component with the tools at hand, React and regular CSS.

Since we are writing a Planning Poker application, we will start by making a playing card!

Our goal is to make a card that is easy to use and customisable.

Before anything, we open our project with Visual Studio Code, and we create a dedicated branch for this week:

First, some house cleaning (commit)

In our previous article, if you remember, we created our app using Create React App.

Create React App adds some unnecessary content (examples) that we need to remove before we can continue.

In Visual Studio Code (our your favourite IDE), do the following:

• Remove the content of the App Component, only leaving a container div and an Hello World text.
• Remove the import of the logo.svg file within App.js (import Logo from './Logo.svg' ).
• Remove the entire content of App.css
• Delete the logo.svg file

You can see the changes in this commit. Going forward, we will link the changes to a specific commit on GitHub so you can follow what was done exactly.

Run the app by doing yarn startand all you should see is a Hello World text on the top left corner.

Let’s make a Card (commit)

First, we will need to create a Components folder under /src.

Then, a Card folder within Components, and finally an index.js file within the Card folder:

Why index.js? When a file is called “index”, you don’t need to specify its name when you import it. This means that when we are going to use this component, we will do import Card from './Components/Card' .

Our first try will be very simple: we just want a container that takes any content and displays it without styles:

import React from 'react';
const Card = ({ children }) => (
  <div className="card">
    {children}
  </div>
);
export default Card;

What is happening there? We are creating a Functional Component that takes only one prop, the special “children” prop.

To use this component, you will then simply do <Card>1</Card> where 1 will be the children prop and be rendered within a div that has a CSS class of “card”. Easy peasy.

Why do we use className and not class like in CSS? Because class is a reserved keyword in JavaScript, so in a React component, which is really JavaScript, you will always use className instead.

Now open App.js, import the new Card component, and display it a few times with different contents:

import React, { Component } from 'react';
import './App.css';
import Card from './Components/Card';
class App extends Component {
  render() {
    return (
      <div>
        <Card>1</Card>
        <Card>2</Card>
        <Card>3</Card>
        <Card>🍎</Card>
     </div>
    );
  }
}
export default App;

At this point, if you look at your running app, you should see these “cards” rendered:

Pretty ugly! Of course, we didn’t add any style.

Let’s add some.

Playing in Style (commit)

Go back to your Card component folder, and add an index.css file.

Then, go to your Card component index.js file, and import the css file as follow:

import './index.css'

As you can see, it’s a nameless import, which will tell Webpack to get the CSS and add it to the bundle.

Go back to your index.css file and add some styles:

.card {
  display: flex;
  width: 100px;
  height: 150px;
  border: 3px solid #ef5350;
  border-radius: 15px;
  justify-content: space-around;
  font-size: 5em;
  color: #ff867c;
}
.content {
  align-self: center;
}

This won’t win the UX design of the year, but this will do for now, we will refine later.

As you can see in your running app, it does look much better already!

You probably noticed by now that any change you make on your code is automatically refreshed in your running app.

A new requirement (commit)

Now it’s all nice and dandy, but we now want to be able to customise the colours on the card. Indeed, on the finished product, different cards of different values will have different colours.

Let’s go back to our Card component, and let’s add a new prop:

import React from ‘react’;
import ‘./index.css’;
const Card = ({ children, color }) => (
 <div className=”card” style={{ color, borderColor: color }}>
   <div className=”content”>
     {children}
   </div>
 </div>
);
export default Card;

As you can see, the Card can now be configured with a colour, and this colour is applied to the outer div using inline styles. Since inline styles take precedence over the CSS styles, they win.

You can now go to App.js and replace the content like so:

<div>
 <Card>1</Card>
 <Card color=”yellow”>2</Card>
 <Card color=”#8bc34a”>3</Card>
 <Card>🍎</Card>
</div>

As you can see, you can specify a colour name or Hex code, basically any value that’s valid in CSS. Also, the color prop is optional and the component will default to red if not specified. The red colour is defined in the CSS itself.

Done!

Last refinements (commit)

As you should see in your app now, the cards are displaying in a single column, without any margin between them.

Let’s make that a little nicer.

Go to App.js, and then add a className of “container” to the outer div.

Then go to App.css and add the following CSS:

.container {
 display: flex;
 margin: 30px;
}
.container > div {
 margin-right: 20px;
}

This should make the cards display nicer like so:

Next week, we will improve on this Card component by using something called Styled Components to replace our CSS. Stay tuned!