I wanted to integrate AEM With React on a non SPA implementation i.e. without SPA editor. Can anyone point to any working documentation
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
You can write vanilla React. Set the root path from component/template HTML, hit the path from React and render.
<div id="root" data-root-path="/content/...."></div>
Vanilla React sample
import React from "react";
export default class Test extends React.Component {
state = {
loading: true
};
data = {
text: null
};
async componentDidMount() {
const url = document.getElementById("root").getAttribute("data-root-path")+".model.json";
const response = await fetch(url);
const data = await response.json();
this.data = data;
this.setState({loading: false});
};
render() {
return (
//retuen markup if state.loading is false
);
}
}
This example is if path is generating from back end. If your path is static, you don't need path in html and skip first line in componentDidMount and fetch url directly.
Hope this helps.
Hi Tkantk,
The best one I have come so far to achieve your requirement, stunning work by Jenna Salau:
https://github.com/DeloitteDigitalAPAC/react-habitat
Regards,
Peter
Hi Peter,
Is there any other plugin available apart from react-habitat, as this doesnt support functional react components
Regards
Ramesh
You can write vanilla React. Set the root path from component/template HTML, hit the path from React and render.
<div id="root" data-root-path="/content/...."></div>
Vanilla React sample
import React from "react";
export default class Test extends React.Component {
state = {
loading: true
};
data = {
text: null
};
async componentDidMount() {
const url = document.getElementById("root").getAttribute("data-root-path")+".model.json";
const response = await fetch(url);
const data = await response.json();
this.data = data;
this.setState({loading: false});
};
render() {
return (
//retuen markup if state.loading is false
);
}
}
This example is if path is generating from back end. If your path is static, you don't need path in html and skip first line in componentDidMount and fetch url directly.
Hope this helps.
Hope this community article will help for your requirement.
Umesh Thakur