From React to Composi-Part 7

In this article we will look at converting a React calculator project to Composi. The original React project is available on Github. You can see a live version here:

React Calculator

The final app will look like this:

Create a New Composi Project

If you are unfamiliar with Composi you can find out more from its website. If you already have Composi installed, you can skip the next part. Otherwise, first install Composi by opening your terminal and running:

npm i -g composi

After that you can create a new project. By default this will be placed on your desktop:

npm -n composi-calculator-standard

If you want the new project to be placed somewhere else, you can use the -p flag:

npm -n composi-calculator-standard -p ~/dev-projects

Now from your terminal cd to the new Composi project and install its dependencies:

npm i

Once the dependencies are install, this will also do the first build and launch the project in your default browser.

Converting from React to Composi

Now we can begin the actual conversion. Open the downloaded React project and go to its src folder. Inside you’ll see a components folder. Inside that is a folder called Calculator. Copy it to the components folder inside the dev folder of the new Composi project. We don’t need the React project’s App.js or Header.js because these equivalents already exist in the new Composi project.

Importing Composi and Removing PropTypes

Now we have the React files in the Composi project, we can update them to work with Composi. This entails two things, importing Composi instead of React and deleting any references to PropTypes. Composi has no PropTypes so these need to go. Other that that, there are literally no changes to the app’s actual code or logic.

Open Keypad.js and update it:

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

Now scroll down to the end of the file and delete the PropType definitions:

Keypad.propTypes = {
  onDigit: PropTypes.func,
  onClear: PropTypes.func,
  onClearAll: PropTypes.func,
  onDelete: PropTypes.func,
  onAdd: PropTypes.func,
  onEquals: PropTypes.func,
  onDecimalPoint: PropTypes.func,
  onSubtract: PropTypes.func,
  onDivide: PropTypes.func,
  onMultiply: PropTypes.func,
  onToggleSign: PropTypes.func
};

Next open the History.js file. Once again update it to import Composi and remove any references to PropTypes:

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

Then scroll down to the end of the file and delete the PropType definitions:

History.defaultProps = {
  history: [],
  onClearHistory: () => alert('clear history'),
  onSelected: () => alert('selected')
};
History.propTypes = {
  history: PropTypes.array,
  onClearHistory: PropTypes.func,
  onSelected: PropTypes.func
};

Next open up Display.js and update it to import Composi and remove all references to PropTypes:

// 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 definitions:

Display.defaultProps = {
  expression: '',
  value: '0'
};
Display.propTypes = {
  expression: PropTypes.string,
  value: PropTypes.string
};

Next open ControlPanel.js and update it:

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

Then scroll down to the end of the file and delete the PropType definitions:

ControlPanel.defaultProps = {
  anyHistory: false,
  onToggleHistory: () => alert('toggle history')
};
ControlPanel.propTypes = {
  anyHistory: PropTypes.bool,
  onToggleHistory: PropTypes.func
};

Finally, open Calculator.js and update it like this:

// Change this:
import React, { Component } from 'react';
// To this:
import {h, Component} from 'composi'

That’s it for the conversion. Notice that we did not have to change any of the app code or logic. Instead we only updated references to React and eliminated PropTypes.

Install Math-expressions-evaluator

This calculator has a dependency that we need to add to the Composi project. Make sure your terminal is pointing to the Composi project, then run:

npm i -D math-expression-evaluator

Initialize the Composi Project

We can now finalize the Composi project. Open up the app.js file inside the Composi project’s dev folder. Then update it to look like this:

import {h, Component} from 'composi'
import {title} from './components/title'
import Calculator from './components/calculator/calculator'
title.state = 'Calculator'
new Calculator({
  container: 'section'
})

Build and Run the App

If your project was still running from the initial install, once you make the above changes to the app.js file and save, it will automatically re-build and re-load the app in your browser. However, if you close the terminal or killed the process, you can re-start it again with this:

npm start

This will build and launch the finished app in your browser.

The source code for this final project is available on Github. You can try out the live version on Codepen below:

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-Part 8

From React to Composi-Conclusion