From React to Composi-Part 5

In this article we will look at converting a React movie cards project to Composi. Be making the switch, you’ll only be add 3KB of Composi code, compare to at least 108KB for React. The original project is available on Github. You can checkout the online version here:

React Movie Card

Our project will look like this:

Create a New Composi Project

If you’re not familar with Composi, you can learn more at its website. To make a new Composi project you need to have it installed. If you already have it installed, skip this:

npm i -g composi

Then you can create a new Composi project:

composi -n composi-movie-cards

Open your terminal, cd to the new project on your Desktop and run:

npm i

This will install the project’s dependencies and give you your first build.

Start Converting React Code to Composi

Open the React move cards project that you downloaded from Github. We you open the React move cards project source code, you’ll find a src folder. Inside that you’ll find a services folder. Copy it and its contents to the new Composi project’s dev folder.

Next we want to copy the images in the React project’s images folder to the images folder inside the Composi project.

Next open the React project’s components folder. From it we will copy the Movies folder to the components folder of the Composi project. And finally we copy the StarRatings.js file from the React project’s components folder to the Composi project’s components folder. We don’t need the App.js file or the Header.js file since these are already provided in the Composi project.

With the files copied over we can now begin the conversion process.

Converting From React to Composi

Open the Composi project in your text editor and navigate to dev/components/Movies/MovieCard.js. We need to change the React import to import Composi. We also don’t need to import PropTypes because these don’t exist in Composi:

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

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

MovieCard.defaultProps = {
  movie: {}
};
MovieCard.propTypes = {
  movie: PropTypes.object
};

Next open MovieList.js. Again we need to import Composi and delete the PropTypes:

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

And scroll down to the bottom of the file to delete the PropType definitions:

MovieList.defaultProps = {
  movies: []
};
MovieList.propTypes = {
  movies: PropTypes.array
};

Next open the Movies.js file and import Composi:

// Change these:
import React, { Component } from 'react';
import MovieList from './MovieList';
import MovieService from '../../services/MovieService';
// To these:
import { h, Component } from 'composi';
import MovieList from './MovieList';
import MovieService from '../../services/MovieService';

That’s It for the conversion. Now we just need to instatiate the Movies class in the Composi project’s app.js file. Set it up like this:

import {h, Component} from 'composi'
import {title} from './components/title'
import Movies from './components/movie/movies'
// Instantiate title for app:
title.setState('Movie Cards')
// Instantiate Movies class:
new Movies()

Now you can build and run the app in your browser:

npm start

The source code for this finished project is available on Github. And below is a live version on Codepen:

Summary

As you can see, the conversion was mostly just three things: importing Composi instead of React, getting rid of PropTypes and instantiating a class with the new keyword instead of feeding it to the React.render function.

Check out the other parts of the 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 6

From React to Composi-Part 7

From React to Composi-Part 8

From React to Composi-Conclusion