From React to Composi-Part 3

In this article we are going to convert a React basic timer to Composi. The original React project is available on Github. You can see the live React demo here. You can see the live demo here. I had to make a few changes to the actual markup for this due to some odd rendering glitches where parts leaked out of the circle during updates.

This is what the timer will look like:

If you are not familiar with Composi, you can learn more about it from its website. We’re assuming you have Composi installed from NPM. If not, just run:

npm i -g composi

Once it’s installed, you can create a new project like this:

composi -n composi-timer-basic

This will create a new Composi project with that name on your desktop. If you have already download the React timer project from Github, copy the lib folder inside the React project’s src folder to the dev folder of the Composi project. Next copy the Controls.js, Display.js, and Timer.js files from the React project’s component folder to the component folder in the Composi project.

Because the detfault Composi project already has an app.js file and a title.js, we don’t need the React project’s App.js or Header.js files.

Conversion Process

We’ll start with Controls.js. First we need to change the React import at the top of the page to Composi. Secondly, we don’t need PropTypes since these don’t exist in Composi. We’ll delete the import and the code at the bottom of the file.

// import React from 'react';
// import PropTypes from 'prop-types';
import {h} from 'composi

And delete these PropTypes at the bottom of the file:

Controls.defaultProps = {
   startTimer: () => alert('startTimer'),
   stopTimer: () => alert('stopTimer'),
   resetTimer: () => alert('resetTimer'),
   status: null,
   canStart: false,
};
Controls.propTypes = {
   startTimer: PropTypes.func,
   stopTimer: PropTypes.func,
   resetTimer: PropTypes.func,
   status: PropTypes.string,
   canStart: PropTypes.bool
};

Next open the Display.js file. Once again we need to change the React import to Composi and delete all the PropTypes:

// Change these:
import React from 'react';
import PropTypes from 'prop-types';
import Time from '../../lib/Time';
// to:
import {h} from 'composi'
import Time from '../../lib/Time'

Finally, open the Timer.js file. Once again we need to change the React import to Composi:

// Change these:
import React, { Component } from 'react';
import Display from './Display';
import Controls from './Controls'; 
// to:
import {h, Component} from 'composi'
import Time from '../../lib/Time'

Final Conversion

Now we can make this work. To do so, open the Composi project’s app.js file. Set it up as follows:

import {h, Component} from 'composi'
import {title} from './components/title'
import {Timer} from './components/timer'
title.setState('Timer - Basic')
// Instantiate Timer:
new Timer()

You can download the final project from Github. Here is a live version on Codepen:

You can read the other parts of this series:

From React to Composi-Part 1

From React to Composi-Part 2

From React to Composi-Part 4

From React to Composi-Part 5

From React to Composi-Part 6

From React to Composi-Part 7

From React to Composi-Part 8

From React to Composi-Conclusion