Server side React with the Enonic framework - React4XP


Hands on tutorial for rendering Enonic sites and pages with JSX/TSX



A little bare-bone knowledge of React and Enonic XP is recommended before you dive into this tutorial.

React4XP facilitates advanced use of React when rendering with Enonic XP

  • enables you to use TSX/JSX as a templating language, similar to other XP templating engines

  • supports isomorphic client- or serverside rendering and hydration,

  • handles build flow and compilation with automated optimized asset serving

  • is modular and flexible enough to cover many advanced use cases

Tutorial overview

After getting set up, you start with three basic lessons:

The following five lessons present a more advanced use cases:

  • Free source file structure: Which react components are available to React4xp (called entries), and how to reference them.

  • Custom flow syntax: A more detailed and explicit syntax, for when your controller needs more control.

  • Imports, chunks, config, webpack: Importing things into your entries, and controlling the compilation rules and output.

  • Client-side rendering, part 1: Introduction of how to use React4xp client-side, set up a data endpoint that serves XP content as pure data, and have the already-rendered React4xp components add more content asynchronously with that content data.

  • Standalone mode: Here we build a webapp that take the same React4xp components out of Content Studio, and render the content with assets and data served from anywhere.

Dive deeper

Have an urge for details beyond the basic tutorial, check out the following:


Questions, bug reports or suggestions are welcome!