I am using react js in Adobe experience manager (AEM) I am getting console errors. Here is my code: I am getting
"Uncaught SyntaxError: Unexpected token import"
also I am getting error near
'<' "Unexpected token error"
Can someone please help?
import React from "react";
import {Header} from "./Header";
export class Root extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Header />
</div>
</div>
<hr/>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
{this.props.children}
</div>
</div>
</div>
);
}
}
Consider using react-from-markup where you can declare React components using simple, static markup.
For example, this code:
<div data-react-from-markup-container>
<p class="hello-world">Hello, world!</p>
</div>
becomes:
ReactDOM.render(
React.createElement("p", { className: "hello-world" }, "Hello, world!"),
container
);
Docs: https://simon360.github.io/react-from-markup
ReactJS is not supported on AEM, and is not recommended by Adobe.
Having said that, there are some resources on aem-react, see if these can help:
Vimeo recording: Ben Westrate - ICFI - React.js in AEM on Vimeo
https://vimeo.com/139968905
https://github.com/sinnerschrader/aem-react
https://github.com/sinnerschrader/aem-react-js
https://www.npmjs.com/package/aem-react-js
We were able to use react components by always including a webpack config file with every component.
Every react component then gets transpiled to es5 in our build pipeline.
AEM Clientlibs compile with the transpiled javascripts on render.
Related
I am having some troubles integrating a component from the outside library 'react-calendly', the PopUpButton widget specifically, that requires the parent DOM node to be inserted into. My current understanding is that my issue is being caused by the fact that Next.js uses SSR and therefore I do not have access to the browser. How can I work around this? For reference, my website is a very simple fullstack app for his business and I am new to React/full-stack development. Here is the code for the app portion that renders my page components:
import '../styles/globals.css'
import styles from '../styles/App.module.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
function MyApp({Component, pageProps}) {
return (
<div className={styles.app}>
<div>
<Navbar />
</div>
<div className={styles.body} id="body">
<Component props={pageProps} />
</div>
<div>
<Footer className={styles.footer}/>
</div>
</div>
)
}
export default MyApp
And here is the code for my specific page component:
import styles from '../styles/Home.module.css'
import Head from 'next/head'
import { PopupButton } from 'react-calendly'
export default function Home() {
return (
<div className="home">
<Head>
<title>Homepage</title>
</Head>
<div className="cal_div">
<PopupButton
url="https://calendly.com/my_url"
rootElement={document.getElementsById("body")}
text="Click here to schedule!"
/>
</div>
</div>
)
}
I am trying to convert a basic success page design from figma to reactcode using anima.
import React from "react";
function success() {
return (
<Frame1
ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2#2x.svg"
ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1#2x.svg"
maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group#2x.svg"
great="Great!"
text1="Your payment was successfull"
place="Okay"
/>
);
}
export default success;
function Frame1(props) {
const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;
return (
<div className="frame-1">
<div className="overlap-group1">
<img className="ellipse-2" src={ellipse2} />
<img className="ellipse-1" src={ellipse1} />
<div className="typcntick smart-layers-pointers ">
<img className="mask-group" src={maskGroup} />
</div>
<h1 className="great avenirnext-medium-black-48px">{great}</h1>
</div>
<div className="text-1 avenirnext-medium-black-24px">{text1}</div>
<div className="overlap-group">
<Rectangle1 />
<div className="place avenirnext-demi-bold-white-36px">{place}</div>
</div>
</div>
);
}
function Rectangle1() {
return <div className="rectangle-1 smart-layers-pointers "></div>;
}
I have copied the jsx and css files from anima and now I am trying to import that into my app.
But I am unable to display it on my app. How can I resolve this?
import React from 'react';
import './success.css';
import success from './success';
const App = () => {
return (
<div>
<success/>
</div>
);
}
export default App;
I checked the react code and it works for me, maybe there's something basic that is not setup correctly. First thing is to try and see if your react code shows a simple hello world text.
I see that you are using anima to import figma and export react code. If you manage to get it work that's great, if not I recommend trying Desech Studio and see if that works for you.
It imports Figma with relative html/css positioning and it exports react code. Here's the github repo for more details.
The success component you imported and exported should start with a capital letter like Success then only react understands that its a component
I tried to installLlaravel and scaffold ReactJs.
I have a problem in running my react component.
The installation was fine and
Below is my first ReactJs component. However I cannot display the content of the react component.
components/Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
Here is the file welcome.blade, inside the body
<div id="example"></div>
<script src="/js/app.js"></script>
It should display like this,
Example Component
I'm an example component!
install nodejs and npm
run npm run dev for development and npm run prod for production on your laravel root directory
Setup
I've loaded the Vanilla JS library lightgallery.js through NPM and importing it as normal.
Issue
I'm initializing this library through componentDidMount(), but it's failing to compile because 'lightGallery' is not defined. see sample below
I verified the library is importing by removing componentDidMount() and initializing it through the Chrome Console. When I do this, it works as intended.
I'm not clear on why it's resulting in 'lightGallery' is not defined when the import clearly works when i don't initialize it with componentDidMount(). I'm guessing it's either an issue with the elements not being present in the DOM at load or it's an issue with the way my import is setup.
Any help would be appreciated.
Current Page
This is a stripped down version of my setup with the gallery elements hardcoded for easy explanation.
import React, { Component } from 'react';
import 'lightgallery.js';
class Gallery extends Component {
componentDidMount() {
lightGallery(document.getElementById('lightgallery'));
}
render() {
return (
<>
<section>
<h1>Gallery</h1>
</section>
<section>
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
<a href="img/img3.jpg">
<img src="img/thumb3.jpg" />
</a>
</div>
</section>
</>
);
}
}
export default Gallery;
I'm having an issue loading an image locally in my reactjs file. Any help would be awesome. Thanks
Failed to compile
./src/components/pages/home.js
Module not found: Can't resolve '../Assets/images/Thomas-overlay3.jpg' in 'C:\Users\tcmar\Documents\ThomasWebsite\mywebsite\src\components\pages'
This error occurred during the build time and cannot be dismissed.
my code:
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div className="container">
<div className="hero-image">
<img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" />
</div>
<div className="hero-text">
Hello, My Name is <span>Thomas</span>
</div>
</div>
);
}
}
export default Home;
Your assets should go in some public/ folder which is served as is by the server.
Then you can just refer the actual resource:
...
<img src="/assets/my-image.jpg" />
...
Or, you can use webpacks file-loader and load it like:
<img src={require("file-loader!./file.png")} />
However, this will load the file and emit a copy in the public folder automatically, if this is what you want.
more info: https://github.com/webpack-contrib/file-loader