Server side JSX with React4XP

Contents

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.


react4xp


Introduction

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


Details

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:


Issues?

Questions, bug reports or suggestions are welcome!


Contents