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.
Upgrade
If you are upgrading to lib-react4xp 3.x.x please ready this upgrade guide.
Introduction
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:
-
Hello React: server and clientside: Meet the React4xp library and display a react component from content studio - first serverside rendered, then clientside.
-
Editorial data and props: Use props to pass data - for example editorial data from XP - into the react component.
-
XP Pages, Parts, Regions and Content: Taking more advantage of the page-building powers in Content Studio - react rendering from any XP controller.
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!
-
Known bugs we’re working on - and a few workarounds