Module React component file

This article provides information about the module React component file in Microsoft Dynamics 365 Commerce.

The module React component file is a TypeScript (.ts) file that contains business logic and controls a module's view. The React render() method is responsible for generating the module's HTML.

The default template of a module breaks up the React component and view into two files: the module React component (MODULE_NAME.tsx) and the module view file (MODULE_NAME.view.tsx). Generally, business logic is performed in the React component file and any data needed by the view is passed into the view with the props object. Separating into two files allows themes to provide a view extension file that will override the view for a module. This allows greater flexibility in changing a module's view based on the selected theme.

Example

The following example shows the default React component file for a new module.

import * as React from 'react';

import { IProductFeatureData } from './product-feature.data';
import { IProductFeatureProps } from './product-feature.props.autogenerated';

export interface IProductFeatureViewProps extends IProductFeatureProps<IProductFeatureData> {

}

/**
 *
 * ProductFeature component
 * @extends {React.PureComponent<IProductFeatureProps<IProductFeatureData>>}
 */
class ProductFeature extends React.PureComponent<IProductFeatureProps<IProductFeatureData>> {
    public render(): JSX.Element | null {

        return this.props.renderView(this.props);
    }
}

export default ProductFeature;

Configuration properties that are defined in the module definition file (MODULE_NAME.definition.json) and data properties file (MODULE_NAME.data.ts) can be accessed in the module view file by using the this.props.config.* and this.props.data.* application programming interface (API) properties.

Additional resources

Modules overview

Module definition file

Module view file

Module data file

Module mock file

Module test file

Module props.autogenerated.ts file