Getting Started with React and AEM SPA Editor - Chapter 1

$ cd <src>/aem-guides-wknd-events/react-app

$ npm install @adobe/cq-spa-component-mapping
$ npm install @adobe/cq-spa-page-model-manager
$ npm install @adobe/cq-react-editable-components

$ npm install react-fast-compare
$ npm install ajv --save-dev
$ npm install clone --save-dev

//package.json

{
    "name": "react-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@adobe/cq-react-editable-components": "^1.0.3",
        "@adobe/cq-spa-component-mapping": "^1.0.3",
        "@adobe/cq-spa-page-model-manager": "^1.0.1",
        "react": "^16.5.2",
        "react-dom": "^16.5.2",
        "react-fast-compare": "^2.0.2",
        "react-scripts": "2.0.4"
    },
    ...

    "devDependencies": {
        "aem-clientlib-generator": "^1.4.1",
        "ajv": "^6.5.4",
        "clone": "^2.1.2"
    }
}

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ModelManager, Constants } from '@adobe/cq-spa-page-model-manager';
import App from './App';
import './index.css';

function render(model) {
    ReactDOM.render((
        <App cqChildren={ model[Constants.CHILDREN_PROP] } cqItems={ model[Constants.ITEMS_PROP] } cqItemsOrder={ model[Constants.ITEMS_ORDER_PROP] }
            cqPath={ ModelManager.rootPath } locationPathname={ window.location.pathname }/>), document.getElementById('root'));
}

ModelManager.initialize({ path: process.env.REACT_APP_PAGE_MODEL_PATH }).then(render);

// src/App.js

import React from 'react';
import { Page, withModel, EditorContext, Utils } from '@adobe/cq-react-editable-components';

// This component is the application entry point
class App extends Page {

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1>Welcome to AEM + React</h1>
                </header>
                <EditorContext.Provider value={ Utils.isInEditor() }>
                    { this.childComponents }
                    { this.childPages }
                </EditorContext.Provider>
            </div>
        );
    }
}

export default withModel(App);

/react-app
    /src
        /components
            /page
                Page.js
                Page.css

/*
Page.js

- WKND specific implementation of Page
- Maps to wknd-events/components/structure/page
*/

import {Page, MapTo, withComponentMappingContext } from "@adobe/cq-react-editable-components";
require('./Page.css');
// This component is a variant of a React Page component mapped to the "structure/page" resource type
// No functionality is changed other than to add an app specific CSS class
class WkndPage extends Page {

    get containerProps() {
        let attrs = super.containerProps;
        attrs.className = (attrs.className || '') + ' WkndPage ' + (this.props.cssClassNames || '');
        return attrs
    }
}

MapTo('wknd-events/components/structure/page')(withComponentMappingContext(WkndPage));

/* Center and max-width the content */
.WkndPage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px;
    padding: 0;
    float: unset !important; 
}

/*
Dedicated file to include all React components that map to an AEM component
*/

require('./page/Page');

// src/index.js
    ...
    import App from './App';
    //include Mapped Components
+  import "./components/MappedComponents";

    ...

$ cd <src>/aem-guides-wknd-events
$ mvn -PautoInstallPackage -Padobe-public clean install

/react-app
    /src
        /components
            /text
                Text.js

/*
Text.js

Maps to wknd-events/components/content/text
*/

import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
/**
* Default Edit configuration for the Text component that interact with the Core Text component and sub-types
*
* @type EditConfig
*/
const TextEditConfig = {

    emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

/**
* Text React component
*/
class Text extends Component {

    get richTextContent() {
        return <div dangerouslySetInnerHTML={{__html:  this.props.text}}/>;
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

MapTo('wknd-events/components/content/text')(Text, TextEditConfig);

// src/components/MappedComponents.js

require('./page/Page');
require('./text/Text');

$ cd <src>/aem-guides-wknd-events
$ mvn -PautoInstallPackage -Padobe-public clean install

//partial contents of /content/wknd-events/react/home.model.json
...

"text": {
    "text": "<h1>Hello World</h1>\r\n",
    "richText": true,
    ":type": "wknd-events/components/content/text"
}

...

this.props.text === "<h1>Hello World</h1>\r\n"
this.props.richText === true

/react-app
    /src
        /components
            /image
                Image.js

import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';

/**
* Default Edit configuration for the Image component that interact with the Core Image component and sub-types
*
* @type EditConfig
*/
const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

/**
* Image React Component
* 
*/
class Image extends Component {

    get content() {
        return <img src={this.props.src} alt={this.props.alt}
            title={this.props.displayPopupTitle && this.props.title}/>
    }

    render() {
        return (<div className="Image">
                {this.content}
            </div>);
    }
}

MapTo('wknd-events/components/content/image')(Image, ImageEditConfig);

// src/components/MappedComponents.js

require('./page/Page');
require('./text/Text');
require('./image/Image');

$ cd <src>/aem-guides-wknd-events
$ mvn -PautoInstallPackage -Padobe-public clean install

// partial contents /content/wknd-events/react/home.model.json
...

"image": {
    "alt": "Alternative Text here",
    "title": "This is a caption",
    "src": "/content/wknd-events/react/home/_jcr_content/root/responsivegrid/image.coreimg.jpeg/1539196394835.jpeg",
    "srcUriTemplate": "/content/wknd-events/react/home/_jcr_content/root/responsivegrid/image.coreimg{.width}.jpeg/1539196394835.jpeg",
    "lazyEnabled": false,
    "widths": [],
    ":type": "wknd-events/components/content/image"
}
...

package com.adobe.aem.guides.wkndevents.core.models;

import com.adobe.cq.export.json.ContainerExporter;
import com.adobe.cq.export.json.hierarchy.HierarchyNodeExporter;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.annotation.JsonProperty;

public interface HierarchyPage extends HierarchyNodeExporter, ContainerExporter {

    ...
}

@Model(adaptables = SlingHttpServletRequest.class, adapters = {HierarchyPage.class, ContainerExporter.class}, resourceType = HierarchyPageImpl.RESOURCE_TYPE)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class HierarchyPageImpl implements HierarchyPage {

/**
 * Resource type of associated with the current implementation
 */
protected static final String RESOURCE_TYPE = "wknd-events/components/structure/page";

// /content/wknd-events/react.model.json 

{
":type": "wknd-events/components/structure/app",
":items": {},
":itemsOrder": [],
":children": {
"/content/wknd-events/react/home": {
    ":type": "wknd-events/components/structure/page",
    ":items": { ... },
    ":itemsOrder": [
    "root"
    ],
    ":path": "/content/wknd-events/react/home",
    ":hierarchyType": "page",
    "title": "Home"
    }
},
":path": "/content/wknd-events/react",
":hierarchyType": "page",
"title": "React App"
}