March 3, 2018

/

React Crypto Stock Compare – Pt. 3: Splitting Components

React Crypto Stock Compare – Pt. 3: Splitting Components

This is to part 3 of a multi-part React tutorial that will teach you the basics of React while building a simple app to compare crypto-currency prices to stock prices. You can find the code to work along here and the starting point for this step can be found in the branch creating-basic-component by running git checkout creating-basic-component

In this step we are going to split up our big App.js component into multiple smaller components.

Coding Along

If you haven’t been following along and would like to you can clone the repository and get the starting code for this step by running the following from a command line:

git clone https://github.com/sethreidnz/crypto-stock-compare
cd crypto-stock-compare
git checkout creating-basic-component

Splitting the crypto table

In Part 2 we added two tables to the app. So let’s see what its like to take those two tables and create two components out of them.

What we are going to do is create two new components in a new folder src/components. First create the new folder src/components then create a new file src/components/EthereumRow.js and add the following code:

import React from "react";
import { getEthereumData } from "../api";

const ethereumData = getEthereumData();

export const EthereumRow = () =>
  ethereumData.map(dayData => {
    const arrowClass = `arrow-${dayData.change > 0 ? "up" : "down"}`;
    return (
      <tr key={dayData.date}>
        <td>{dayData.date}</td>
        <td>{dayData.open}</td>
        <td>{dayData.low}</td>
        <td>{dayData.high}</td>
        <td>
          <span className={arrowClass} />
          {dayData.change}%
        </td>
      </tr>
    );
});

Create a new file src/components/MicrosoftRow.js and add the following code:

import React from "react";
import { getMicrosoftData } from "../api";

const microsoftData = getMicrosoftData();

export const MicrosoftRow = () =>
  microsoftData.map(dayData => {
    const arrowClass = `arrow-${dayData.change > 0 ? "up" : "down"}`;
    return (
      <tr key={dayData.date}>
        <td>{dayData.date}</td>
        <td>{dayData.open}</td>
        <td>{dayData.low}</td>
        <td>{dayData.high}</td>
        <td>
          <span className={arrowClass} />
          {dayData.change}%
        </td>
      </tr>
    );
  });

Notice how in these components we are not using the Component class from the react package. This is what is called a “Functional Component”. It is a simple way of creating components that just need to return some JSX and are basically just the render method of class component.

Now we have two components called EthereumRow and MicrosoftRow.

Delete the following lines:

import { getEthereumData, getMicrosoftData } from "./api";

And

const ethereumData = getEthereumData();
const microsoftData = getMicrosoftData();

Add the following two lines to import these component at the top of your App.js file:

import { EthereumRow } from './components/EthereumRow';
import { MicrosoftRow } from './components/MicrosoftRow';

Update your App Component look like this:

class App extends Component {
  render() {
    return (
      <div className="crypto-stock-compare">
        <h1>Crypto Stock Compare</h1>
        <section className="value-table">
          <h2>Ethereum</h2>
          <table>
            <thead>
              <tr>
                <th>Date</th>
                <th>Open</th>
                <th>Low</th>
                <th>High</th>
                <th>Change</th>
              </tr>
            </thead>
            <tbody>
              <EthereumRow />
            </tbody>
          </table>
        </section>
        <section className="value-table">
          <h2>Microsoft</h2>
          <table>
            <thead>
              <tr>
                <th>Date</th>
                <th>Open</th>
                <th>Low</th>
                <th>High</th>
                <th>Change</th>
              </tr>
            </thead>
            <tbody>
              <MicrosoftRow />
            </tbody>
          </table>
        </section>
      </div>
    );
  }
}

Simple as that! This is a common process you go through building apps in React. Sometimes you know that you should create a new component, and sometimes you realise after you’ve started. Fortunately its not hard to make a new component so it doesn’t matter too much. But my rule of thumb is “is this component doing more than one thing?”. If the answer is yes, then it might be time to split it up so you can focus on one thing per component.

If you got lost or want to make sure you did it right you can have a look in the branch in Github or run:

git checkout splitting-components

The next step is to learn how to pass data to components with “props” in: Pt. 4: Using Props

Next Step

Tags:

Seth Reid

/

React Crypto Stock Compare – Pt. 3: Splitting Components