From React to Composi-Part 6

In this article we are going to show how to convert a React project called Masterminds to Composi. The conversion is almost trivial, but why bother? Size. Composi shares many of the same patterns as React, but is only 3KB in size. That’s a big difference for an app this size. React would add at least 106KB to it. If you’re not familiar with Composi, you can learn more about it on its website.

The original React project is available on Github. You can check out the live version here:

React MasterMinds

Our final project will look like this:

Create a New Composi Project

If you have Composi already installed, you can skip ahead to where we create a project. Otherwise, open your terminal and install Composi:

npm i -g composi

After that you can create a new Composi project.

npm -n composi-mindmaster

This will create a Composi project on your desktop called composi-mindmaster. You can use the -p flag to provide a specific path to where you want a new Composi project to be created.

Use your terminal to cd to the new project and run:

npm i

This will install the project’s dependencies, run the first build and launch it in your browser.

Start the Conversion

Open the src folder of the downloaded React Github project. Copy the lib folder from there to the dev folder of the new Composi project. Next go back to the React project’s src folder and open the Components folder. Copy the Games file to the components folder of the Composi project. (It’s inside the dev folder.) We don’t need the React project’s Header.js or App.js files since these have equivalents in the new Composi project already.

With the files copied over, we can start making changes to make this a Composi project.

Open the Games.js file that you put in the Composi components folder in your text editor. Now we need to change the imports to bring in Composi instead of React. We also need to delete any reference to PropTypes since Composi does not have these:

// Change these:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DifficultyLevel, GuessEngine } from '../lib/GuessEngine';
// To these:
import { h, Component } from 'composi';
import { DifficultyLevel, GuessEngine } from '../lib/GuessEngine';

Now scroll down to the bottom of the Games.js file and delete the PropTypes definitions:

Game.defaultProps = {
  guess: 0,
  magicNumber: undefined,
  difficulty: DifficultyLevel.EASY
};
Game.propTypes = {
  guess: PropTypes.number,
  magicNumber: PropTypes.number,
  difficulty: PropTypes.any
};

Now we are ready to make our app happen. To do that, open the app.js file in the Composi project’s dev folder in your text editor. Update it to this:

import {h, Component} from 'composi'
import {title} from './components/title'
import {Game} from './components/game'
// Set the title for the app:
title.state = 'Masterminds'
// Create an instance of the game:
// This will cause it to render to the DOM.
// We provide a container value to tell Composi where to render the component:
new Game({
  constructor = 'section'
})

Now if you run in the Composi project folder:

npm start

The project will build and launch in your browser.

The finished project and source code is available on Github. Here is a live Codepen version:

Conclusion

Once again this conversion shows how trivial it is to port a React project to Composi: Switch the import form React to Composi, delete any PropTypes and render the component class by initializing it with the new keyword. Otherwise the project code stayed the same.

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 7

From React to Composi-Part 8

From React to Composi-Conclusion