Server side JSX with React4XP


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.



A little bare-bone knowledge of React and Enonic XP is recommended. Beyond that, this guide is super detailed!

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 tweakable, making it possible to pop the hood, pick it apart and set things up your own way. Godspeed!

  • is 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 3 lessons present a few more advanced usages:


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!