The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Inspect the JSON model. Create online experiences such as forums, user groups, learning resources, and other social features. Learn how to create a custom weather component to be used with the AEM SPA Editor. Developer. As part of this tutorial, we will try to understand over all movement in detail from ui. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. The following tools should be installed locally: Node. By default, sample content from ui. zip. Learn. Learn how to create a custom weather component to be used with the AEM SPA Editor. Difference between traditional client server architecture and single page application. The Open Weather API and React Open Weather components are used. Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. The Open Weather API and React Open Weather components are used. Open CRXDE Lite in a web browser ( ). The Single-line text field is another data type of Content. . js support and also how to add a new React. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. The Vue app will be developed and designed to be deployed with AEM’s SPA Editor, which maps Vue components to AEM components. (1) get a copy of Forrester report The. AEM Headless as a Cloud Service. Exercise 1 Go to React Hooks useEffect Tutorial. Experience League. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries. AEM Sites videos and tutorials. Once headless content has been translated, and. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. The tutorial covers the end to end creation of the SPA and the integration with AEM. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Developer. This is built with the additional profile. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. . Clone and run the sample client application. Build a React JS app using GraphQL in a pure headless scenario. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilities. All the authoring aspects including components, templates, workflows, etc. Clone and run the sample client application. Transcript. In this tutorial, I will show how to use Adobe's archetype to create an AEM application with React. Click Create and Content Fragment and select the Teaser model. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Sign In. Update the WKND App. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. Clone and run the sample client application. We will take it a step further by making the React app editable using the Universal Editor. To accelerate the tutorial a starter React JS app is provided. The. js application is as follows: The Node. This tutorial uses a simple Node. Next Chapter: AEM. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. Experience League. Features. Deploy the starter code to a local instance of AEM, if you haven’t already: Check out these additional journeys for more information on how AEM’s powerful features work together. What you'll learn. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. By the end of this course, you'll be able to navigate between the two major. Populates the React Edible components with AEM’s content. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. AEM as a Cloud Service introduces the next generation of the Experience Manager product line, building on past. 3-SNAPSHOT. Repeat the above steps to create a fragment representing Alison Smith:Client-Side Libraries provide a mechanism to organize and manage CSS and JavaScript files necessary for an AEM Sites implementation. In this tutorial, we’ll guide you through the process of creating a dynamic and interactive web application by combining the power of React, Adobe Experience Manager (AEM) Headless APIs, and GraphQL. 0 or higher; Documentation. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Create Content Fragment Models. The <Page> component has logic to dynamically create React components based on the . Clone the adobe/aem-guides-wknd-graphql repository: React Router is a collection of navigation components for React applications. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 5 contents. What is AEM (a Content Management System or CMS by Adobe in which you can create. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilitie. Next, inspect how React Router is integrated with the SPA and experiment using React Router’s Link component. Developers using the React framework create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing tools. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. First, import useState from React: import { useState } from 'react'; Now you can declare a state variable inside your component: function MyButton() {. Web Component. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. There are two parallel versions of the tutorial: Create your first Angular SPA in AEM; Create your first React SPA in AEM; Latest Code. Create Content Fragment Models. To build all the modules run in the project root directory the following command with Maven 3: mvn clean install. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 3. js) Remote SPAs with editable AEM content using AEM SPA Editor. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. src/api/aemHeadlessClient. AEM tutorials. Beginner. Understanding how to extend an. For publishing from AEM Sites using Edge Delivery Services, click here. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. 102 Students. Wrap the React app with an initialized ModelManager, and render the React app. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. Dispatcher: A project is complete only. js implements custom React hooks. Click OK and then click Save All. The build will take around a minute and should end with the following message:The SPA must use the Page Model library to be initialized and be authored by the SPA Editor. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. User fills out a form in React app. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. You are now ready to move on to the next tutorial chapter, where you will learn how to create an AEM Headless React application that consumes the Content Fragments and GraphQL endpoint you created in this chapter. AEM Headless APIs allow accessing AEM content from any client app. Navigate to Tools > General > Content Fragment Models. The React a. Client-Side Libraries provide a mechanism to organize and manage CSS and JavaScript files necessary for an AEM Sites implementation. jar file and license provided; the package should look like this. js implements custom React hooks return data from AEM. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. The tutorial offers a deeper dive into AEM development. These are importing the React Core components and making them available in the current project. Rich text with AEM Headless. Learn how to generate an Adobe Experience Manager (AEM) Maven project as a starting point for a React application integrated with the AEM SPA Editor. Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM. Let’s see how the component works. Issue 2: I am facing the problem with Banner component from the tutorial: Extend a Core Component | Getting Started with the AEM SPA Editor and React | Adobe Experience Manag. If you are using Webpack 5. Last update: 2023-11-06. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular. Tap Home and select Edit from the top action bar. Wrap the React app with an initialized ModelManager, and render the React app. const [count, setCount] = useState(0);Add a copy of the license. Browse the following tutorials based on the technology used. Learn how to configure AEM Publish Dispatcher filters for use with AEM GraphQL. 2. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. AEM as a Cloud Service videos and tutorials. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. src/api/aemHeadlessClient. Install Java & set up the environment variable. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The Mavice team has added a new Vue. npm module; Github project; Adobe documentation; For more details and code. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Learn how to create a custom weather component to be used with the AEM SPA Editor. AEM Headless GraphQL Video Series; AEM Headless GraphQL Hands-on Tutorial. Before you begin your own SPA. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. This hub page links to videos, tutorials, how-to guides, and documentation to help you get started with and gain expertise in specific platforms, application services, and other solutions. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as. js implements custom React hooks. 5, or to overcome a specific challenge, the resources on this page will help. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). all. To accelerate the tutorial a starter React JS app is provided. This starts the author instance, running on port 4502 on the local computer. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that. Overview; 1 - Local Development Access Token; 2 - Service Credentials; Content Services. We will take it a step further by making the React app editable using the Universal Editor. Integrate React into the AEM instance. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. They are specifically designed to be used for creating Adaptive Forms, which are forms that adapt to the device,. To fully take advantage of this useful and flexible feature, it is important to understand how front-end. We do this by separating frontend applications from the backend content management system. Content can be created by authors in AEM, but only seen via the web shop SPA. For publishing from AEM Sites using Edge Delivery Services, click here. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in-context authoring. Introduction AEM has multiple options for defining headless endpoints and delivering its content as JSON. AEM component using reactjs. js) Remote SPAs with editable AEM content using AEM SPA Editor. Supply the web shop with limited content from AEM via GraphQL. . Next, inspect how React Router is integrated with the SPA and experiment using React Router’s Link component. This will setup the baseline project for you to use AEM SPA editor with React implementation. Inspect the Text Component. The Open Weather API and React Open Weather components are used. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Adobe Cloud Manager integrates unit test execution and code coverage reporting into its CI/CD pipeline to help encourage and promote the best practice of unit testing AEM code. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Extend a Core Component. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the. npm module; Github project; Adobe documentation; For more details and code samples for. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. 1 We can build projects for AEM with a SPA (Single Page Application) as frontend (can use either Angular or React). Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. src/api/aemHeadlessClient. react. These are importing the React Core components and making them available in the current project. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. This chapter takes a deeper-dive into the AEM. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Let’s create some Content Fragment Models for the WKND app. You are now ready to move on to the next tutorial chapter, where you will learn how to create an AEM Headless React application that consumes the Content Fragments and GraphQL endpoint you created in this chapter. x Dispatcher Cache Tutorial This is the code companion for a series of tutorials designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). The ui. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. frontend module based on. Build a React JS app using GraphQL in a pure headless scenario. Learn to use the delegation pattern for extending Sling Models and. You’ll learn how to set up your development environment, establish a connection between React and AEM, retrieve content using GraphQL queries, and render it dynamically in your web application. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Learn to use the delegation pattern for extending Sling Models and. Admin. This guide describes how to create, manage, publish, and update digital forms. Github project. Custom Exporter API - You can expose a custom JSON API for the page component and expose the data on it. Exercise 1 Go to React Conditionals Tutorial. Select WKND Shared to view the list of existing. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Click into the new folder and create a teaser. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. From the AEM Start screen, navigate to Tools > General > GraphQL. Next Chapter: AEM Headless APIs. This is tide to the Authoring Experience, and again, Layouting content on the page might not be possible because when using AEM components and React Components there will be two sets of CSS. These are then mapped to project specific AEM components using the MapTo, just like with the Text component example earlier. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. React Hooks useState. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. 20220616T174806Z-220500</aem. Author in-context a portion of a remotely hosted React application. 8. classic-1. This is based on the AEM react SPA tutorial. Tap the all-teams query from Persisted Queries panel and tap Publish. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). A multi-part tutorial on how to develop for the AEM SPA Editor. Browse the following tutorials based on the technology used. 3. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM; Populates the React Edible components with AEM’s content; Wrap the React app with an initialized ModelManager, and render the React app. A full step-by-step tutorial describing how this React app was build is available. How to create react spa component. This React application demonstrates how to query content using. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. 4+ or AEM 6. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component. Checkout Getting Started with AEM Headless - GraphQL. api> Previously, after project creation, it was like this: <aem. React CSS Styling. sdk. Adding the interactive REACT app to AEM Screens. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Creation of AEM project using maven archetype generates AEM ui. A collection of videos and tutorials for Adobe Experience Manager. This is the pom. How to map aem component and react component. npm module; Github project; Adobe documentation; For more details and code. Add the adobe-public-profile to your Maven settings. Both web components. First, you'll cover the basics of AEM and learn about the history of the product. apps. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. To accelerate the tutorial a starter React JS app is provided. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Anatomy of the React app. Documentation. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Transcript. I. Follow the steps below to add the interactive REACT app to AEM Screens: Create a new AEM Screens project. Create Content Fragments based on the. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. js support and also how to add a new React. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Anatomy of the React app. For further details about the dynamic model to component mapping. $ cd aem-guides-wknd-spa. Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. js and npm. For SPA based CSM, you got two options. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular. js v18; Git; AEM requirements. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. For publishing from AEM Sites using Edge Delivery Services, click here. AEM pages. Adobe Experience Manager (AEM) Sites is a leading experience management platform. AEM as a Cloud Service For publishing from AEM Sites using Edge Delivery Services, click here. Once the deploy is completed, access your AEM author instance. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. In this tutorial, I will show how to use Adobe's archetype to create an AEM application with React. Core. AEM provides AEM React Editable Components v2, an Node. This demo will let you quickly create "React App" with AEM SPA Editor using maven aem-spa-project-archetype (to this tutorial chapter where we will explore creating a complex Image List component that renders Content Fragments, nested Content Fragment references, and referenced image assets. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Adobe Experience Manager - 6. Populates the React Edible components with AEM’s content. js implements custom React hooks. These are importing the React Core components and making them available in the current project. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. React Router is a collection of navigation components for React applications. For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. WKND Developer Tutorial. For publishing from AEM Sites using Edge Delivery Services, click here. Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. The hope is at the end of this tutorial you will understand the basic foundation of the AEM platform and knowledge of some of the common design patterns. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Last update: 2023-11-06. You will get completely updated AEM 6. Select WKND Shared to view the list of existing. Tap in the Integrations tab. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries,. sdk. Install Apache Maven. Select the correct front-end module in the front-end panel. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Next, inspect how React Router is integrated with the SPA and experiment using React Router’s Link component. Work with Adobe Experience Manager's SPA editor and learn how React and Angular frameworks can be used. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. The WKND Developer Tutorial is available here and guides you through creating an AEM project using the latest technologies and best practices. To do this, add state to your component. 0+ to be installed. AEM Forms with Acrobat Sign Web Form. These are then mapped to project specific AEM components using the MapTo, just like with the Text component. 4. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. Developer. There is a specific folder structure that AEM. Best Practice: Bootstrap your site with all of Adobe's latest recommended practices. The execution flow of the Node. Learn how to create a custom weather component to be used with the AEM SPA Editor. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. Option 2: Share component states by using a state library such as Redux. Option 2: Share component states by using a state library such as Redux. 5. If you wish to implement SPAs in AEM for a framework other than React or Angular or simply wish to take a deep dive into how the SPA SDK for AEM works, refer to the SPA Blueprint article. In response to goonmanian-gooner. Navigate to Tools > General > Content Fragment Models. 3. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. . The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. Create Content Fragments based on the. Clone and run the sample client application. Select the folder where you want to locate the client library folder and click Create > Create Node. React has a large and active community of developers, with many resources, tutorials, and libraries available to use. This React application demonstrates how to query content using. A classic Hello World message. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Previous page. I have enough experience on Adobe Experience Manager. SPA Editor Overview; Getting Started with the AEM SPA Editor and Angular; Getting Started with the AEM SPA Editor and React; Getting Started with the AEM SPA Editor and a remote React SPA; Features. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager. Description. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that. There are quite a bit of documentation on how to get started on AEM SPA and react components, however the SPA components and templates based on standard AEM approach need to be isolated from the regular templates and cannot be mixed/merged on same page with non-SPA components. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. Create Content Fragment Models.