React

Tutorials, sample code and SDKs to assist your React development.

Tutorials

• Get started tutorial. A React example that demonstrates how use the Content Delivery SDK to retrieve content from the CMS and render it. Uses the example of a simple banner. Find this on GitHub in the sample code repo.

SDKs

• Content Delivery SDK. A JavaScript SDK that makes it easier to use the Content Delivery API.
• Visualization SDK. A JavaScript SDK for creating realtime visualisations.

Sample code

The following examples all use React.

Amplience Demo Store- Core

The demo store is a Progressive Web App (PWA) powered by Dynamic Content and developed using the React framework & Next.js.

Key Features Demonstrated

• Content retrieved from Amplience Dynamic Content
• Multi-language & multi-currency front-end
• Multiple components and Content Types implemented (banners, card lists, blogs, slots, etc.)
• Multiple visualizations implemented (page, standalone, time-based, etc.)
• Visualisation SDK implementation for realtime visualization from Amplience Dynamic Content
• Filter API implementation for store page & product details page personalisation
• Multiple extension including: image editing, hierarchy pickers, product selectors and workflow dashboards
• Integration API to connect to e-Commerce (file based catalog but extensible for other platforms).
• Search based integration for blog use cases
• Admin panel (visualize content, slots, editions, switch between production and staging view)
• Storybook for component documentation and development
• CLI and automation packages for automating into and between environments (schemas, content types, settings, workflow states, content, slots, indexes, webhooks, preview, visualization etc).

Find it on GitHub.

Content managed PWA

A sample React / Next.js application that uses Dynamic Content for content management.

Key features demonstrated

• Retrieving content using our next generation Content Delivery API
• Creating and configuring preview and visualization
• How to dynamically render components based on content
• Automating the setup of content type schemas and content types using the Dynamic Content CLI tool

Find it on GitHub.

Next.js Static Blog

The product blog is a static site powered by Dynamic Content and developed using the JAMstack architecture. It uses the Next.js framework for React.

Key features demonstrated

• How to build a static website with Dynamic Content
• Using Dynamic Content webhooks to trigger a rebuild of a site when content changes
• How to use the Content Delivery SDK. Fetching content at build time
• Implementing preview and visualization to preview individual content items and the entire site at a specified date and time
• How to implement searching and sorting
• Using delivery keys to specify the URL path for a blog post

Find it on GitHub.

Extensions

Product selector extension

This extension shows you how you can search for and retrieve product information from a Salesforce Commerce Cloud, SAP® Commerce Cloud or commercetools account and add it to a content item.

Find it on GitHub.

Translation extension

The translate extension shows you how you can connect a translation service (the example uses Yandex) to provide automatic translation of strings into multiple languages. The extension is designed for use with a content item that uses field level localized strings.

Find it on GitHub.

Map extension

This extension makes it easy to search for and add a location to your content using Google Maps.

Find it on GitHub.

Rich text extension

This extension replaces the built in rich text editor with a customizable editor that features embeddable content items and enhanced markdown support.

Find it on GitHub.

GlobalLink Connect extension

A dashboard extension providing a seamless interface to GlobalLink Connect, allowing content producers in Dynamic Content to easily submit content for translation, monitor the translation status, and to apply completed translations to localized content items.

Find the code and configuration details on GitHub.