React in NRP Repositories

React is used in NRP repositories for building interactive user interface components within a server-side rendered application architecture based on InvenioRDM. Unlike traditional Single Page Applications, React here is used for embedding dynamic (mini)apps within Jinja-rendered pages, combining SEO benefits with rich client-side interactivity.

Overview

React in NRP repositories powers the most dynamic and interactive parts of the user interface:

• Search interfaces - Faceted filtering, result lists, sorting
• Deposit forms - Formik-powered inputs, validation, file uploads, and submission
• Dashboard components - Real-time data visualization, interactive controls

Architecture

React is integrated through the following integration flow:

The integration process involves:

1. Webpack entry points defined in webpack.py files - Python configuration files specifying JavaScript entry points
2. Template mount points - Jinja/JinjaX templates render DOM elements with unique IDs that serve as React mount points
3. JS bundle inclusion - Templates include pre-built JavaScript bundles via {{ webpack['bundle.js'] }} that mount and run React apps
4. Data passing - Templates use data-* attributes or hidden inputs to pass initial state and configuration to React apps
5. Component overriding mechanism for customization without modifying core code

Explore React Topics

Key Concepts

Customization

NRP repositories support two customization approaches:

• Client-Side - react-overridable for customizing React UI components at runtime
• Server-Side - oarepo-ui overrides generates override configuration for react-overridable based on Flask endpoint routing

See Component Override for details.

State Management

Multiple approaches are used depending on complexity:

See State Management for details.

Related Resources