Hello React4XP
Contents
Render your first React4XP page
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:
-> site/dataFetcher.ts (Map of data processors)
-> site/helloProcessor.ts (props for the Hello component)
-> react4xp/entries/App.tsx (React entry)
-> react4xp/componentRegistry.tsx (R4XP component list)
-> react4xp/components/Hello.tsx (Welcome page)Below we backtrack what happened:
Hello component
The Hello component that rendered the actual page is very simple:
import type { HelloProps } from '/types/HelloProps';
import * as React from 'react';
export const Hello = ({ title, text }: HelloProps) => {
return (
<div>
<h1>{title}</h1>
<p>{text}</p>
</div>
);
};It takes a single parameter, HelloProps. The type is declared like this:
export interface HelloProps {
title: string
text: string
}The component is rendered because it has been added to the componentRegistry:
import * as React from 'react';
import { ComponentRegistry } from '@enonic/react-components';
import { Hello } from './components/Hello';
import { Person } from './components/Person';
export const componentRegistry = new ComponentRegistry;
componentRegistry.addContentType('portal:site', { View: Hello }); (1)
componentRegistry.addContentType('com.enonic.app.hmdb:person', { View: Person }); (2)| 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 responsiblity of HelloProcessor is to produce the props required by a component. A processor may also intercept the request, for instance by producing a redirect.
import type { Content } from '@enonic-types/lib-content';
import type { ContentTypeProcessorFunction } from '@enonic-types/lib-react4xp/DataFetcher';
type MyType = ContentTypeProcessorFunction<Content<Record<string, unknown>>>
export const helloProcessor: MyType = (params) => {
// log.info('helloProcessor params:%s', toStr(params));
return {
props: /*<HelloProps>*/{
title: `React4XP: ${params.content.displayName}`,
text: 'Welcome to the React4XP starter!',
}
};
};Similar to a component, a processor is invoked because it is registered in the dataProcessor:
import { DataFetcher } from '/lib/enonic/react4xp';
import { helloProcessor } from './components/HelloProcessor';
import { personProcessor } from './components/PersonProcessor';
export const dataFetcher = new DataFetcher();
dataFetcher.addContentType('portal:site', { processor: helloProcessor }); (1)
dataFetcher.addContentType('com.enonic.app.hmdb:person', { processor: personProcessor });
That is basically it. Throughout the tutorial, you'll be using this extensively.
TIP: Dive deeper into this topic by visiting the <<appendix/controller#, app controller appendix>>.
== Next
Great, you rendered your first page, next up how about <<person#, adding your own components>>.