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?
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) => {
return <h1>{props.title}</h1>
}
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)
Related
I am looking to publish a react component and web component from an angular library.
I followed a few tutorials that step you through creating a react component inside an angular library. For example you install react and react-dom into the workspace, you add "jsx": "react-jsx" to your tsconfig, you wrap your react component in a web component, you import your web component into your project app, you add CUSTOM_ELEMENTS_SCHEMA to the app.module.ts, and you use the webcomponent markup inside of the template of the component of your choosing. (I also added the line "include": ["./src/**/*.ts", "./src/**/*.js", "./src/**/*.tsx", "./src/**/*.jsx"], to the tsconfig.)
I am now trying to set up building the library. I added an index.ts file to the library as the entry point and export my web component from it:
export * as any from './lib/my-web-component.jsx';
I'm getting non-descriptive errors when I build that say
✖ Generating FESM2020
Could not resolve "./lib/my-web-component.jsx" from "dist/my-lib/esm2020/index.mjs"
I realize there is tooling that a createReact app uses to bundle the components. Is it possible to publish react components from an angular library? Does anyone have any insight into what this error is from, how to solve it, or how to get a more descriptive message?
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I'm developing a component library in React using Styled Components and Rollup as a bundler. Also, I'm using Storybook.
Now I want to add the Open Sans font from Google Fonts. I know how to do this when developing a standard React project, but I'm not sure how to do this when developing a component library.
What I tried/ways I know of:
Adding the link to the head of the HTML document (I don't have an HTML document since I'm developing a component library)
Creating a GlobalStyles object using Styled Components and inserting an #font-face there (I don't think this is possible since the GlobalStyles object needs to be inserted in the JSX of the index.ts file which I don't have)
Does anyone know how I should handle this?
How to merge node_module, project dependencies, of both Svelte and ReactJs?
I've seen guides showing how to include ReactJS file into a Svelte app
<SvelteComponent this={First} {...this.props}/>
That produces the following error:
Constructor is not a Constructor error
here is an example of including a svelte component in react. It been written by Rich Harris author of svelte:
https://github.com/Rich-Harris/react-svelte
Svelte and React are not compatible to import and use the other framework component directly.
It is definitely possible to create a Svelte app inside of a React app or vice-versa though.
You would have to instantiate the app like normal inside of the other app. The Svelte docs show how you can bind a Svelte app to a DOM node, which you can include in a React component. Make sure you also add the DOM node inside of that component, such as <div id="svelte-app" />.
I'm thinking about moving my project to React but there is a road block.
Let me explain.
The project have components (now it's written in php).
If you need to customize on of them you just need to extend the original class of a component and load it from a custom folder.
Example:
The components are located under this directory:
/path/to/core/components/CustomerProfile
If you need to customize something you need to use this directory:
/path/to/custom/components/CustomerProfile
How can I use custom Components in React (and load them from a custom folder)?
Thanks.
import {CustomComponent} from 'relative-path-to-customcomponent'
and do not forget to export the default component.
How to export :
Inside your component file,
export default ComponentName