Developer Docs React4xp Stable

React4XP - Building React sites with the Enonic framework

Hands on introduction to the React4XP framework - rendering components with JSX/TSX

Introduction

It is recommended that you have completed the My First Site tutorial, as well as having a some knowledge of React before you dive into this tutorial.

react4xp

React4XP facilitates advanced use of React when rendering pages with the Enonic framework.

enables you to use TSX/JSX as a templating language, similar to other XP templating engines
supports isomorphic server side and client side rendering with hydration
handles build flow with automated optimized asset serving
is modular and flexible enough to cover many advanced use cases

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

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 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.
The advanced section dives deeper into client-side rendering and using React4XP when building Enonic webapps.