docbrown/docs/frontend/preact.md

title
Preact

Preact

Preact is an alternative to React with the same modern API.

Preact components are packaged using Webpacker and the Preact code is located in app/javascript.

Preact components get loaded via webpacker's helper function javascript_packs_with_chunks_tag.

PropTypes

Preact supports PropTypes. When creating Preact components, please ensure that you have defined your PropTypes.

Common PropTypes

Using PropTypes can be repetitive. Some duplication is normal, like when a PropType is a string or a number. But for commonly-used PropTypes, like the user entity, you can use the provided common PropTypes, located in the /app/javascript/common-prop-types, as shown below.

import PropTypes from 'prop-types';

export const userPropTypes = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  profile_image_url: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
});

Using Common PropTypes

Common PropTypes are imported just like any other JavaScript Module. For example, here are two scenarios where a component needs to use the tagPropTypes.

In the example below, our component SomeComponentUsingTags has a tags prop, which is an array of the tag entity. PropTypes have a built-in method called arrayOf that allows you to define a prop as an array of something. In our case, this is the tag entity, so we can use the tagPropTypes PropType.

import { h } from 'preact';
import PropTypes from 'prop-types';
import { tagPropTypes } from '../../../components/common-prop-types';

const SomeComponentUsingTags = ({ tags = [] }) => (
  <ul>
    {tags.map((tag) => (
      <li key={tag.id}>{tag.name}</li>
    ))}
  </ul>
);

SomeComponentUsingTags.displayName = 'SomeComponentUsingTags';
SomeComponentUsingTags.propTypes = {
  tags: PropTypes.arrayOf(tagPropTypes).isRequired,
};

In the following example, the SomeComponentUsingOneTag component has a tag prop representing a single tag. In this case, we can just the tagPropTypes on their own to represent the shape of the tag prop.

import { h } from 'preact';
import { tagPropTypes } from '../../../components/common-prop-types';

const SomeComponentUsingOneTag = ({ tag }) => <li key={tag.id}>{tag.name}</li>;

SomeComponentUsingOneTag.displayName = 'SomeComponentUsingTags';
SomeComponentUsingOneTag.propTypes = {
  tag: tagPropTypes.isRequired,
};