Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

AEM integration with React without SPA

Avatar

Avatar
Ignite 1
Level 1
tkantk
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile

Avatar
Ignite 1
Level 1
tkantk
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile
tkantk
Level 1

01-02-2021

I wanted to integrate AEM With React on a non SPA implementation i.e. without SPA editor. Can anyone point to any working documentation

aem6.5 non-spa React JS

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

01-02-2021

@tkantk 

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.

Answers (2)

Answers (2)

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile
Umesh_Thakur
MVP

01-02-2021

Hope this community article will help  for your requirement. 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/use-reactjs-components-in-...

 

Umesh Thakur

Avatar

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

140 likes

Total Posts

543 posts

Correct Reply

165 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile

Avatar
Validate 25
MVP
PuzanovsP
MVP

Likes

140 likes

Total Posts

543 posts

Correct Reply

165 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Contributor 2
Ignite 10
View profile
PuzanovsP
MVP

01-02-2021

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