React4XP - Entries


React4XP - Entries

What is an entry?

React4xp is structured around entries.

It’s actually a webpack term, but in react4xp we use the word entry for a React component that can be accessed by react4XP in an XP controller. They are the only react files that react4xp can use directly.

Think of entries as "bridge elements":

A mental model:


(Download cheat sheet. See also chunks, for a complete picture)

On the XP/server side, you have the controllers with their backend XP flow, logic and XP lib imports. Entries are the beginning of the frontend side (although the same code is also used for serverside-rendering): they do regular frontend-style ES6 logic and can import stuff from NPM/node_modules, your own logic, nested react components, whatever - even other entries.

How to make an entry

Entries are pretty much just standard JSX files, but they must follow two requirements (cheatsheet):

  1. default-exports a function: props?⇒reactComponent - a function that may take a props argument (serializable JS object) and must return a react component (pure functional component or old-school React Component), and

  2. is located either in a folder either below /site/ or below one of the entryDirs folders listed in (see also jsxPath).

Asset and react app

React4xp handles them in build-time and runtime: locates entries, compiles each entry into its own entry asset (under /build/resources/main/assets/react4xp). React4xp’s render methods also generate page contributions that make sure these assets are served to the client.

Each entry becomes a separate root level react app. Good to know if you display more than one entry on a page - which you can, but you might also consider using just one entry for the root, and multiple imports in it.

For example, early in this tutorial we’ve seen the entries hello-react.jsx and color.jsx, they are compiled into the assets hello-react.js and color.js.