# Tile components

In this tutorial we’ll begin developing a simple two-sided rate tile. The tile displays the ***SPOT bid*** and ***SPOT ask*** rate for a given currency pair.

## Objectives

* Create a two-sided rate tile to display in your browser.
* Add a currency heading to your rate tile to display in your browser.

## Overview

We’ll break this tutorial down into three stages:

* [Building the Rate component](#building-the-rate-component) to show a value for the given side (bid or ask)
* [Building the Tile component](#building-the-tile-component) so that it incorporates two instances of the Rate component to show both prices for a single currency pair.
* [Render multiple Tile components](#render-multiple-tile-components) for different currency pairs on screen.

At each stage of this tutorial, you can create CSS and modify the surrounding application structure if you want to.

## Building the Rate component

As can be seen from a completed Tile component, the Rate is made up of two distinct areas:

* ***A label*** - Indicates which side the rate represents.
* ***A rate*** - In a real application, the tile rates are executable, so we’ll create the rate indicator as a button element.

The component receives new rate values from an external source, which we need to display on the button.

With this information, we can build our Rate component.

### Creating the Rate component

For the following exercise you need to navigate to the tile folder in your `frontend-training-main/` directory.

```plantuml
@startsalt
{
{T
 + <color:goldenrod><size:15><&folder></size></color> Home
 ++ <color:goldenrod><size:15><&folder></size></color> Downloads
 +++ <color:goldenrod><size:15><&folder></size></color> frontend-training-main
 ++++ <color:goldenrod><size:15><&folder></size></color> myTradingApplication
 +++++ <color:goldenrod><size:15><&folder></size></color> apps
 ++++++ <color:goldenrod><size:15><&folder></size></color> **tile**
 ++++++ <color:goldenrod><size:15><&folder></size></color> todo-list
}
}
@endsalt
```

To create the Rate component:

1. Create a new `Rate.js` file in the `apps/tile/src/tile` directory.
2. Add the following code to the `Rate.js` file to render the side label and price button using React:

   ```js
   import React from "react";

   export default function Rate({side, rate}) {
     return (
       <div className={`Tile-rate Tile-rate-${side}`}>
         <label>{side}</label>
         <button>{rate}</button>
       </div>
     );
   }
   ```
3. Replace the content of `apps/tile/src/index.js`, which is the application entry point, to render the new Rate component into the application.

   ```js
   import React from "react";
   import ReactDOM from "react-dom";
   import Rate from "./tile/Rate";
   import "./index.less";

   function startApp() {
     ReactDOM.render(
       <Rate side="Bid" rate="1.2345"/>,
       document.getElementById("root")
     );
   }

   startApp();
   if (module.hot) {
     module.hot.accept();
   }
   ```
4. To install the new components, run the command below:

   ```
   $ pnpm install
   ```
5. To start the app in your browser, run the command below:

   ```
   $ pnpm start
   ```

You are now able to see your app by going to <span>http://</span>localhost:8080.

![labelrate](../../images/labelrate.png)

## Building the Tile component

The finished Tile component is made up of two Rate components side by side, as well as a heading displaying the currency pair. We can modify the included `apps/tile/src/tile/Tile.js` file to include and render the currency pair heading.

### Modifying the Tile component

The generated code in the `apps/tile/src/tile/Tile.js` file is currently missing the the currency pair heading.

To add the currency pair heading:

1. Replace the current code with the following to render a currency pair heading and two Rate components side by side:

   ```js
   import React from "react";
   import "./Tile.less";
   import Rate from "./Rate";

   export default function Tile({currencyPair, bidRate, askRate}) {
     return (
       <div className="Tile">
         <h1 className="Tile-currency">{currencyPair}</h1>
         <Rate side="Bid" rate={bidRate}/>
         <Rate side="Ask" rate={askRate}/>
       </div>
     );
   }
   ```
2. We can also modify the `apps/tile/src/tile/Tile.less` file to add some basic styling to the Tile components:

   ```less
   .Tile {
     Background-color: #efefef;
     padding: 10px;
     text-align: center;
     display: inline-block;
     margin: 1em;
   }
   .Tile-rate {
     display: inline-block;
     margin: 1em;
     label {
       display: block;
     }
   }
   ```
3. In the `apps/tile/src/index.js` file change the `import Rate` statement to `import Tile` to render the Tile component instead of the Rate component, as shown below:

   ```js
   import Tile from "./tile/Tile";
   ```
4. Then, in the same `apps/tile/src/index.js` file, change the ReactDOM.render contents to render a Tile:

   ```js
   function startApp() {
     ReactDOM.render(
       <div>
         <Tile currencyPair="GBPUSD" bidRate="1.2345" askRate="1.2345"/>
       </div>,
       document.getElementById("root")
     );
   }
   ```
5. Refresh the page in your browser to see a GBPUSD heading rendered with two prices.

## Render multiple Tile components

See if you can render multiple Tile components on screen for different currency pairs. For example, GBPUSD, EURUSD, and USDJPY.

![multiplecurrencycomponents](../../images/multiplecurrencycomponents.png)