Rendering a person

Add to site

In a few steps we connect the application to the Headless Movie DB, and should be rewarded gloriously.

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

After saving, the preview should change to something like this:

Request handling

So, what actually happened here?

The app runs on top of XP’s site engine. By adding the application to the site, it is injected into the request pipeline - where it basically hijacks the rendering.

These are the main files involved:

-> react4xp/entries/App.tsx (React entry)
-> react4xp/components/hello/Hello.tsx (Welcome page)
-> types/HelloProps.ts (TypeScript type for props)
-> react4xp/componentRegistry.tsx (R4XP component list)
-> site/components/hello/helloProcessor.ts (props for the Hello component)
-> react4xp/dataFetcher.ts (Map of data processors)

Below we backtrack what happened:

Hello component

The Hello component that rendered the actual 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
}

As soon as a component is added to ComponentRegistry which is a registry of React views organized by type, it becomes renderable.

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 when the URL matches a site.

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

HelloProcessor

The responsibility of HelloProcessor is to produce the props required by a component.

DataFetcher is a registry of data fetching functions for components by their type. It is used in the backend to get props for rendering component views from ComponentRegistry.

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,
    };
};

Similar to a component, a processor is invoked because it is registered in the dataFetcher:

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 });

That is basically it. Throughout the tutorial, you’ll be using this extensively.

Dive deeper into this topic by visiting the app controller appendix.

Rendering a person

Contents

Add to site

Request handling

Hello component

HelloProcessor

Next

Contents

Contents