How to create an AEM SPA component using Reactjs

Paid Presale Course (Free mini-course below it):
If you want to have a more in-depth course that goes over more React details then enroll in the presale:

Free Mini-Courses
How to create a Reactjs component for Adobe Experience Manager Mini-Course

Blog Post to find more links, code, and the commands shown in the video:

If you enjoyed my video and it helped you learning something new or solving a problem, and you would like to Buy me a coffee, you can do just that at:

00:00 Topics for the video
01:13 Building Adobe's archetype if the 23 or above is not available
03:21 Create a basic AEM component
05:58 Add the component into the page inside AEM

Share this video with a friend:

Watch next
How to configure the Sling Model for the AEM React component

How to create an AEM component using Angularjs

Creating an AEM Application using Adobe's archetype version 23 and avoiding typical issues

Creating an AEM application using Maven and Adobe's archetype

Recommended Playlist
Adobe Experience Manager Tutorials

Let’s connect:

[Kauoow]

Nice, but i have a question, since this creates a new app, why cant we just clone an example repository and build it?

[nasrinjamadar]

Could please create video for dispatcher configuration for SPA Project AEM-React. URL Shortening in SPA.

[alexandersantosablaza]

what is the meaning of -Padobe-public in your build?

[AnujSharma-tqwy]

Error 500 - BasicModel cannot be resolved to a type.
can you help?

[BrianLikasing]

Wow. thank you for this video. Can you also do an AEM SPA Editor and AEM SPA Routing example?

[saurabhkapoor]

when i run mvn archetype:generate i get the following error - The goal you specified requires a project to execute but there is no POM in this directory (C:\aem). Please verify you invoked Maven from the correct directory. and when i make the project and change directory and then run this command then it gives Child module C:\aem\AEM23\dispatcher of C:\aem\AEM23\pom.xml does not exist.

[abby]

Didn't work for me. Could you please make a step by step video for this.? Thanks

[esaiventhan]

If you see the following error... "[ERROR] [ERROR] Some problems were encountered while processing the POMs:
[ERROR] Unknown packaging: content-package @ com.andy.nbapageflow:nbaPageFlow.ui.apps:[unknown-version], /home/andy/Dev/nbaPageFlow/ui.apps/pom.xml, line 34, column 16".... then


try this maven command .... "mvn clean install -PautoInstallPackage -Padobe-public -U"

[jonjackson]

I'm with you until trying to find the component within AEM. The only templates I see that I can edit are "SPA Page", "SPA Root", and "Web Variation"