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.