Title: How to reuse AEM SPA components from one project in another?
Tags: reactjs;single-page-application;aem
Question: How do I reuse one AEM SPA project's components in another SPA project? Assuming both projects in this example use the AEM Maven Archetype 25 with React:
Project A  has a header component in ui.front-end that has the proper mapping to the AEM component under its ui.apps.
How would I reuse this header component in Project B? It seems like the header component needs to also exist in Project B and be imported into the imported-components.js file to work. If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B. How could I make this work?


Here is the accepted answer: ```
If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B.
```
You can do this - just create ```project-a``` as a regular React App and export your components from it, then use it as a dependency in ```project-b``` (the ```ui.frontend``` part of your AEM project) and map those React components to their AEM counterparts.
Here's an example component from :
```const Header = (props) =&gt; {
   return <h1&gt;{props.title}</h1&gt;
}

export default Header
```
Then in your project-b you'd do something like:
```import {Header} from 'project-a'
import {MapTo} from '@adobe/aem-react-editable-components'
...

MapTo('my-aem-app/components/header')(Header)
```



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:03/25/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<reactjs><single-page-application><aem>', 'Title': 'How to reuse AEM SPA components from one project in another?', 'ViewCount': 483, 'id': 66806988, 'user_AboutMe': None, 'user_AccountId': 20996048.0, 'user_DisplayName': 'SomeGuy103', 'user_Reputation': 13.0, 'user_Views': 3.0, 'user_id': 15427866.0}}