Home

This tutorial extends the Adobe Weekend Tutorial to cover few key-points that are common during the development. The extension from Chapter 3 includes the following:

1. Creation of a Simple Custom Component
2. Creation of a container component
3. Integration with Carousel in React BootStrap

Hopefully by the end of the tutorial, we can have better understanding on using and extending the AEM SPA Framework.

Creation of a Simple Custom Component

In this example, we are going to create a simple Alert Component based on React Bootstrap and have it be authored in AEM. In the end will enable the Message to be configurable by the Author. The React Code is an extension from Adobe Component. In order to make the component work we will do the following:

1. Setup to add React Bootstrap
2. Add alert/Alert.js in react-app/src/components
3. Add the new component in MappedComponent.js
4. Add an Exporter
5. Customized the Dialog Window

Setup to add React Bootstrap

Before we start, we will add bootstrap to the package.json in react-app/package.json. Your dependencies should now look like this one:

"react-router-dom": "^5.0.0",
    "react-scripts": "^2.1.8",
    "react-styleguidist": "^9.0.6",
    "react-bootstrap": "1.0.0-beta.13"
  },...

Add alert/Alert.js in react-app/src/components

The code will look like the following:

export default class Alert extends Component {
    render() {
        let innercontent = this.props.alertMessage;
        // use React Bootstrap to display the alert below
        return (
            <Alert variant='info'>
                {innercontent}
            </Alert>   
        );                 
    }
}

This code should be straighforwards. The props.alertMessage will be populated from the JSON that will later utilize the Exporter (discussed later). Once the property is obtained, we will use Alert from Bootstrap to render the Component

Add the new component in MappedComponent.js

Maker sure that you also update MappedComponent.js to include the new component so that it will show in the AEM Component selection for the author to use

require('./page/Page');
require('./text/Text');
require('./image/Image');
require('./list/List');
require('./alert/Alert');