Getting Started with React

This feature is available since version 12.3.0

Overview

In this tutorial, we will create a React app consuming Page Model JSON API based on a standard BloomReach Experience Manager project. The React app will read component metadata, models and content items to render Banner components, which are dynamically added and removed in Channel Manager.

Also, we set CORS response headers (['Access-Control-Allow-Origin: http://localhost:3000', 'Access-Control-Allow-Credentials: true']) in order to allow a React node.js server (at http://localhost:3000) to consume Page Model JSON API (at http://localhost:8080/site/resourceapi/). This is very helpful in local development environment.

The dependencies will probably change as time goes by, but the main principles in this document will apply almost the same.

Our React app was created in a myapp subfolder under the BloomReach Experience Manager project root folder. You can start the React app using yarn start in the myapp subfolder:

$ cd myapp
$ yarn start

This will open the React app at http://localhost:3000/ in your default browser automatically. The React app will show a welcome message for now. We will improve the React app to consume Page Model JSON API in the following sections.

Update App Class to Render State

Let's refactor the default App class in myapp/src/App.js a little bit to render the title and introduction from the state. We will update the state dynamically in the next section, but let's hard-code the state data for now and let the JSX elements read the state data like the following:

When componentDidMount lifecycle method is executed, the component was already rendered with the render() method, but the component would render itself again when the states are updated by the feched data through setState(...). In the above example, it sets name, aggregatedPageModel and containerItemComponents properties through #setState(...) from the JSON response. As a result, the render() method will be re-invoked after fetching the dynamic data from http://localhost:8080/site/resourceapi/.

As we didn't render any components such as the Banner component, this improvement wouldn't make a big difference yet, except of changing the title from "Home page (home)" to "Home page (homepage)". "home" is a hard-coded string whereas "homepage" is read from the the Page Model JSON API dynamically.

Add Banner Component

Now let's add the Banner React component which reads and renders the Banner component and associated content. Update myapp/src/App.js like the following:

In App#componentDidMount() method, it sets aggregatedPageModel state property to the whole JSON model, and sets containerItemComponents state property to the first container component's child components only, for simplicity in this demo application.

As the BannerComponent objects are added dynamically depending on the containerItemComponents state property, if you add one more Banner component in Channel Manager, the React app will update the page with two Banner components automatically as well:

More Advanced Examples

We have learned how to develop a React SPA which consumes the Page Model JSON API and renders content dynamically with Banner component examples.

This example could look too simple, but you may apply similar approaches in your project by adding more specified React components for News or Events components. Furthermore, you may consider adding React components for a generic HST Container Component or Container Item Component to reflect the real structure of HST page and components.

Also, if you need a seamless integration with the Channel Manager SPA API, you will need more considerations in each React component rendering.

For more details on those advanced topics, see Demo Projects which contains all the examples to cover the cases mentioned above.