I have been trying to make my own component in React to be used in AEM. I am currently following this tutorial here: https://www.youtube.com/watch?v=nec_MDPzMYk&t=86s
I am able to build the component and deploy it to my local instance of AEM, but I am unable to drag the component to the editor in AEM. The only components I seem to be able to drag and drop are Container and Text. I've added a public Dropbox folder with three screenshots to help describe my issue: https://www.dropbox.com/sh/aiifh6aahf28esu/AADZxqo1apo2NLXquz1ZNhbia?dl=0
I have edited the SPA Page policy in AEM (see first screenshot: “edit template”) to include all of the components listed here, including the new component (Basic Component) that I have added with React (see next screenshot: available components), yet when I go to drag the components to the editor, I can’t do that (see screenshot: editor).
Does anyone see what I could be doing wrong?
In case you will click on 'Drag Component here' and try do add ur component via '+' is your component in the list or not? Might be that you have changed the policy for a different responsive grid.
Also check the error.log, might be there you will find some clues. (http://:/system/console/slinglog/tailer.txt?tail=1000&grep=*&name=%2Flogs%2Ferror.log)
And component should have _cq_dialog or_cq_editConfig. Only in this case AEM allows to add components
Related
I'm into PWA development, and I'd like to use React components to build my UI, but not React-native components (otherwise why write PWAs...).
So I am looking for an equivalent to the top-tab-navigator component found here:
https://reactnavigation.org/docs/material-top-tab-navigator/
but without any React-Native dependency!
Changing pages by swiping would be great, even without a visual effect.
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
Any help will be very appreciated.
Thank you!
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
I have implemented a DraftJS - WYSIWYG component on my site but during testing noticed that pasting a specific image inside crashes the component.
Since StackOverflow text editor won't let me paste the image here, you can find it at this link. It's the banana image at the beginning of the paragraph.
Pasting it into the official demo component available on the project site crashes the component as well.
This component is however based on Facebook's Draft JS package, which handles this scenario quite well and replaces the pasted image with a camera icon image.
How can I go about escaping these dangerous pastes?
I need to create a React Component similar to a preview pane. These are search result so what I need the component to do is when the user clicks the "Preview" link or button a smaller panel opens up to show a preview. I have the URL text that I need to send to the control to generate the preview (these are search results from a SharePoint REST api call).
What I need to know since I am new to react, is what kind of component do I need to create. I am working in Visual Studio 2017 and have had success creating generic React components using this code :
import React, { Component } from 'react';
directive, so I am familiar with creating the Components, I just don't know which components to use. Can someone help with with the types of component I should use to build a simple preview? I am not necessarily looking for code, just a list of components to use or a link to tutorial
Thanks
I was able to create the control using an IFrame to host the "preview" url. The problem was with the URL that was being passed in.
I know the some of the websites using reactJS for the front-end part but they're using some advance technique to hide the component structuring. So we not able to view the component part using the react developer tool.
example site - facebook site
Can you please let me know what facebook uses to hide the component structuring?
Try using below code in production
<script>
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
</script>
Refer react-devtools issue here #191
Usually when I want to hone my view in the Component tree I will go to the View Settings Menu, which is the gear icon located by the search component tree bar in the top left:
In the View Settings Menu, you can access Component Tree options. One extremely useful feature is the Hide Components Where... filter. You can enter a regex expression if you wish to exclude a lot of noise from the component tree. In the example below, I have entered a regex that hides everything except my component named "ContractForm":
That yields the following result in the components pane:
Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?