How to create simple AEM Reactjs navigation SPA component

If you want to create a simple AEM reactjs navigation component to browse between pages, in this series, you will learn how! Keep watching!

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

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
00:14 Channel Intro
00:38 Series content
01:17 What we will do in this video
01:42 Using the Yeoman generator for creating an AEM component with a model that already supports the sling model exporter
02:23 Create some example content
02:41 Edit the sling model
03:02 Return a list of child pages from the model
04:10 Create the folder for the react component
04:30 Add the imports and the edit config object
04:52 Create the reactjs component that uses the react router link
05:26 Map the react component to the sling resource type
05:37 Import the new component
05:45 Build and install the application
05:51 Add the new component inside an AEM page
06:09 Test the routing
06:27 Mini-Course

Share this video with a friend:
How to create simple AEM Reactjs navigation SPA component

Watch next
How to create an AEM component using Reactjs

Creating an AEM application using Maven and Adobe's archetype

Recommended Playlist
Adobe Experience Manager Tutorials

Let’s connect:

[kuyanotnot]

This is awesome! Can you please make a tutorial for a AEM SPA React component Collapse or Carousel?

[gauravkapoor]

Hello Manuel Gutierrez - This is a great video to understand AEM and react integration. I have a question. You have created interestingContent.css in the react component. And you have imported this CSS inside the index.js. But I am not understanding how this CSS is getting deployed to AEM. I mean CSS should be deployed into aem client library via aem-clientlib-generator. But you didn't mention this aem-clientlib-generator anywhere. How is CSS/JS from the react component getting deployed into AEM? I would appreciate it if you can respond to this asap so that I can understand Integration fully