CODEWITHSUNDEEP
reactjsaem
user7602125
user7602125

Reputation: 19

React js in AEM

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>
        );
    }
}

Upvotes: 2

Views: 4682

Answers (3)

designorant
designorant

Reputation: 2401

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

Upvotes: 1

WingLeung
WingLeung

Reputation: 95

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.

Upvotes: 1

Suren Konathala
Suren Konathala

Reputation: 3597

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:

Upvotes: 1

Related Questions