Creating Custom Input Component using React instead of HTL in AEM ?

Question

Hi Team,
 
I want to create custom JSON Editor component in AEM using React instead of HTL. I was following this: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/project-archetype/custom-component.html?lang=en#
 
but it seems like the folder structure and everything has changed a lot. Can someone help me understand or guide me to the best documentation that I could use to create a custom component using React. If possible I would prefer using create-react-app and not existing AEM boilerplate for two reasons:
 
1. Existing AEM Repos I have seen so far are too much into class based components however I would prefer using functional components.
2. Existing AEM Repos are all in JavaScript, I would want TypeScript support.

Anmol_Bhardwaj · Accepted Answer

Refer this https://github.com/adobe/aem-guides-wknd-spa for github with react project and code.

And this for creating a new react component: https://experienceleague.adobe.com/docs/experience-manager-65/developing/spas/spa-implementing-react-component.html?lang=en

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded