Magnolia-React-Templating

This small utility allows you to use React JSX components directly in Magnolia templates (e.g. Freemarker).

How does it work

To get started, you should set up a frontend project with npx create-react-app.

The main entry point for your application is src/index.js. Please remove the default content and replace it with the content below. This file registers all React components which you want to use within Magnolia templates.

``javascript
import { render } from "magnolia-react-templating";

import "./index.css";

import Layout from "./components/Layout";
import Headline from "./components/Headline";
import Text from "./components/Text";
import Image from "./components/Image";

render({ Layout, Headline, Text, Image }, document.getElementById("root"));
`

Now adapt your page template in Magnolia (e.g. backend/light-modules/react-demo/templates/pages/ContentPage.ftl), so the React bundle is loaded into your page. Here's an example:

`html



[@cms.page /]





[#-- Create a root container for React. --]









`

And here is an example on how to wire up a Freemarker template with JSX code (e.g. backend/light-modules/react-demo/templates/components/Image.ftl):

`jsx
[#assign image = damfn.getAsset(content.image)]
[#assign imageLink = image.link]
url="${imageLink}"
alt="${content.caption!'image'}"
rounded={${(content.rounded!false)?c}}
/>
`

The corresponding React component looks like this (e.g. frontend/src/components/Image.js):

`jsx
import React from "react";

export default Image({ url, alt, rounded })(







);
``