React.js

Some initial notes during the exploration of React.js JavaScript library.

Draft

Everything on this page is in draft-mode. Expect errors, amendments, oversights, and corrections.

Quick Start

• Facebook’s create-react-app
• MDN web docs - JavaScript
• Compatibility checks with browser via Babel
• Reusable components! bit

CONTENTdm Documentation

CONTENTdm provides JavaScript Customization Docs to facilitate a general understanding of the React-based CONTENTdm application.

CSS Classes

CSS Classes are broken down into the following classifications:

Website-level classes Component-level classes Page: Global classes Page: Collection-level classes

JavaScript Events

A special event fires at the initial load of the application: cdm-app:ready. This event fires once for a given end-user session and is the earliest time point in the application lifecycle.

:enter
:ready
:update
:leave

In CONTENTdm, if the URL does not change, then the end user action is most likely happening simultaneously with an :update event.

List of Lifecycle Events

The CONTENTdm application provides a CustomEvent() object within the lifecycle of the application and page render

document.addEventListener('cdm-home-page:enter', function(e){
    // e is instance of CustomEvent
    // ...
});

Customization Cookbook

There’s also a Recipe Portal with downloadable code and demonstration sites.