Hello React4XP

Movie DB dataset

This tutorial is dedicated to front-end development. To make it as compact as possible, the Headless Movie DB dataset was installed in the setup. This contains several pre-defined content schemas as well as sample content and mock previews. We’ll be using this dataset extensively throughout the tutorial.

To learn about content modeling, visit our getting started guide, or the developer 101 tutorial.

Add app to site

Follow these steps to make your application a front-end for the Headless Movie DB.

Visit localhost:8080/admin. Log in and open Content Studio.
The "Headless Movie Database" project should automatically be visible
Select the root item in the tree structure, and you should see something like this:
Click btn:[Edit], and add your React4xp app to the site.

After saving, the preview should refresh, and look something like this:

A look at the code

What just happened?

By adding the application to the site, it is injected into Enonic’s standard rendering - aka the Site Engine. Here, it basically hijacks the rendering - taking presdence over HMDB’s built-in preview.

Let’s have a look at the code:

Hello component

The component that rendered the page is very simple:

react4xp/hello/components/Hello.tsx

import type {HelloProps} from '/types/HelloProps';
import * as React from 'react';
import styles from './Hello.module.css';

export const Hello = ({title, initialCount}: HelloProps) => {
    const [count, setCount] = React.useState(initialCount);

    return (
        <div>
            <section className={styles.helloContainer}>
                <h1>{title}</h1>
                <button onClick={() => setCount(count + 1)}>{count} Clicks!</button>
            </section>
        </div>
    );
};

It takes a single parameter, HelloProps. The type is declared like this:

types/HelloProps.ts

export interface HelloProps {
    title: string
    initialCount: number
}

Typing your props is optional, but recommended for more robust code.

Data Processor

To fetch the props for the Hello component, we need a data processor:

react4xp/components/hello/HelloProcessor.ts

import {PageDescriptor} from '@enonic-types/core';
import type {ComponentProcessorFunction} from '@enonic-types/lib-react4xp/DataFetcher';

export const helloProcessor: ComponentProcessorFunction<PageDescriptor> = (params) => {
    return {
        title: `${params.content.displayName}`,
        initialCount: 0,
    };
};

The processor does not execute by itself, it must be registered in the dataFetcher. The dataFetcher solely executes on the server side.

The dataFetcher will only invoke a processor if needed, in our case when a content of type portal:site (the site content) is rendered.

react4xp/dataFetcher.ts

import {DataFetcher} from '/lib/enonic/react4xp';
import {helloProcessor} from './components/HelloProcessor';

export const dataFetcher = new DataFetcher();

dataFetcher.addContentType('portal:site', { processor: helloProcessor }); (1)

1	helloProcessor is mapped to the content type `portal:site`, which means it will be executed whenever the URL matches a site content.

Component Registry

Back to the Hello component. Similar to the dataFetcher, this must be added to the ComponentRegistry in order to work.

react4xp/componentRegistry.ts

import {ComponentRegistry} from '@enonic/react-components';
import {Hello} from './components/Hello';

export const componentRegistry = new ComponentRegistry();

componentRegistry.addContentType('portal:site', { View: Hello }); (1)

1	The Hello component is mapped to the content type `portal:site`, which means it will be executed whenever the URL matches a site content.

Try clicking other content items in Content Studio, and you should simply see an error message at this point.

Learn how the basic boot-strapping and routing works in the app controller section.

Hello React4XP

Contents

Movie DB dataset

Add app to site

A look at the code

Hello component

Data Processor

Component Registry

Next

Contents

Contents