Do-able with SPA 2.0, but the question is it right to do it that way. And it does come with limitations
1. You can use ReactDOM.render or render method (React v18) to render multiple areas/sections inside your page with React code while the rest can render with HTL as-is
2. Page wise, SPA page and regular Page doesnt have same data types. there is a meta attribute in head section of html that says content type is JSON for SPA pages, so page loadevent, etc are handled differently for SPA Page
3. Now come with some generic HTL code for all sections of page that requires react code, so if you dont have React code deployed inside AEM, then the default HTL will render. And in this HTL code, expose page path, component path, resource type as data attributes data-page-path, data-item-path, data-resource-type and one more attribute for react e.g data-render-src with value as react
4. In your React code, write on dom ready event, scan for all those div tags with render-src value as react, and now based on your components call them using Editablecomponent wrapper passing pagePath itemPath and resourceType props
Understand that this approach may not work for container components. Also MapTo statements are optional in this design as we are directly rendering the component. Also since data type of page is not JSON if dialog updates are done, they will not reflect inside react components immediately. So those react based components, be updated with editConfig that will force entire page when dialog is updated should be a workaround we should be able to live with until Adobe offers a real hybrid approach. Hope this info helps !
