From React to Composi-Part 8

In this article we will show how to convert a React project that tracks bitcoin value to Composi. The original React project is available on Github. You can see it live here:

React Bitcoin Monitor

The finish app will look like this:

Creating a New Composi Project

If you’re not familiar with Composi, you can learn more about it on its website. To install Composi, run:

npm i -g composi

After that you can create a new Composi project:

composi -n composi-bitcoin-monitor

This will create the project on your desktop. If you want to have it placed somewhere else, you can provide a path with the -p flag:

composi -n composi-bitcoin-monitor -p ~/dev/projects

Copy React Resources

Now we can copy resource from the React project to the Composi one. Open the downloaded React bitcoin monitor project and go to its src folder. Copy the services folder from the React project to the dev folder of the Composi project.

New open the components folder of the React project and copy the BitcoinMonitor folder to the components folder of the Composi project. We don’t need the App.js or Header.js files from the React project because the Composi project already as equivalents to these.

Start Converting the React Files

With the React files copied over, we can now start to convert them to work with Composi. This involves two things: switching the import of React to Composi, and removing an references to PropTypes. Composi does not have PropTypes so this need to be removed.

Open the file Indicator.js in the Composi project. You need to update it as follows:

// Change these:
import React from 'react';
import PropTypes from 'prop-types';
// To this:
import {h} from 'composi'

Then scroll down to the bottom of the file and delete the PropType definition:

Indicator.propTypes = {
  currentRate: PropTypes.number,
  previousRate: PropTypes.number
};

New open the file Display.js. Update it to import Composi:

// Change these:
import React from 'react';
import PropTypes from 'prop-types';
import { Indicator } from './Indicator';
// To these:
import {h} from 'composi'
import { Indicator } from './Indicator';

Then scroll down to the bottom of the file and delete the following PropType defintion:

Display.propTypes = {
  currencies: PropTypes.array,
  prices: PropTypes.object,
  onCurrencyChanged: PropTypes.func
};

Next open up the file BitcoinMonitor.js. Update it to import Composi:

// Change these:
import React, { Component } from 'react';
import { Display } from './Display';
import { BitcoinService}  from '../../services/BitcoinService';
import { CurrencyService } from '../../services/CurrencyService';
// To these:
import { h, Component } from 'composi';
import { Display } from './Display';
import { BitcoinService}  from '../../services/BitcoinService';
import { CurrencyService } from '../../services/CurrencyService';

Now open the app.js file in the Composi project and update it to look like this:

import {h, Component} from 'composi'
import {title} from './components/title'
import {BitcoinMonitor} from './components/bitcoinMonitor/BitcoinMonitor'
import { BitcoinService}  from './services/bitcoinService';
const bitcoinService = new BitcoinService();
const prices = bitcoinService.getPrices()
title.state = 'Bitcoin Monitor'
// Instantiate new bitcoin class:
const bit = new BitcoinMonitor()

In the Composi project, run the following command to install all the project’s dependencies:

npm i

After install the dependencies, this will then build the project and launch it in the browser. You should see the bitcoin monitor up and running.

You can download the finished Composi project from Github. Below is a live version on Codepen:

Check out the other articles in this series:

From React to Composi-Part 1

From React to Composi-Part 2

From React to Composi-Part 3

From React to Composi-Part 4

From React to Composi-Part 5

From React to Composi-Part 6

From React to Composi-Conclusion