Server side JSX with React4XP


This tutorial will show you step-by-step how to build XP sites and apps with React rendering, helping you kickstart a React4xp project of your own.



If you are upgrading to lib-react4xp 3.x.x please ready this upgrade guide.


A little bare-bone knowledge of React and Enonic XP is recommended.

React4XP is a library (with a companion build structure) that facilitates advanced use of React in Enonic XP, and:

  • enables you to use 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, we’ll begin with 3 basic lessons - just the minimum of what you need to get started:

The next 5 lessons present a few more advanced usages:

  • 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.

  • Headless, part 1: Introduction of how to use react4xp in a headless-CMS context: 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.

  • Headless, part 2: "pure headless" with preview - standalone webapps that take the same react4xp components out of Content Studio, and render the content with assets and data served from anywhere.


If you need to go deeper after going through the lessons, the most important concepts you’ll encounter along the way are explained on pages of their own:

There’s also an API reference for the methods that the react4xp library (lib-react4xp) exposes to the XP controllers:


Questions, bug reports or suggestions are welcome!