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