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:

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.

HomeDownloadsfrontend-training-mainmyTradingApplicationapps tiletodo-list

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:

    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.

    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 http://localhost:8080.

labelrate

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:

    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:

    .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:

    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:

    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