Add lazy loading and fragments

- AsyncComponent.react.js: The exported component (inside template dir)
- {{component_name}}.react.js: The real component
- LazyLoader.js: The intermediate lazy loading function

Author: xhlulu

{{cookiecutter.project_shortname}}/cookiecutter_templates/AsyncComponent.react.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { {{cookiecutter.component_name}} as RealComponent } from '../LazyLoader';
+
+/**
+ * ExampleComponent is an example component.
+ * It takes a property, `label`, and
+ * displays it.
+ * It renders an input with the property `value`
+ * which is editable by the user.
+ */
+export default class {{cookiecutter.component_name}} extends Component {
+    render() {
+        return (
+            <React.Suspense fallback={null}>
+                <RealComponent {...this.props}/>
+            </React.Suspense>
+        );
+    }
+}
+
+{{cookiecutter.component_name}}.defaultProps = {};
+
+{{cookiecutter.component_name}}.propTypes = {
+    /**
+     * The ID used to identify this component in Dash callbacks.
+     */
+    id: PropTypes.string,
+
+    /**
+     * A label that will be printed when this component is rendered.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * The value displayed in the input.
+     */
+    value: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};
+
+
+export const defaultProps = {{cookiecutter.component_name}}.defaultProps;
+export const propTypes = {{cookiecutter.component_name}}.propTypes;

{{cookiecutter.project_shortname}}/src/lib/LazyLoader.js

@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {defaultProps, propTypes} from '../components/{{cookiecutter.component_name}}.react';
+
+/**
+ * ExampleComponent is an example component.
+ * It takes a property, `label`, and
+ * displays it.
+ * It renders an input with the property `value`
+ * which is editable by the user.
+ */
+export default class {{cookiecutter.component_name}} extends Component {
+    render() {
+        const {id, label, setProps, value} = this.props;
+
+        return (
+            <div id={id}>
+                ExampleComponent: {label}&nbsp;
+                <input
+                    value={value}
+                    onChange={
+                        /*
+                         * Send the new value to the parent component.
+                         * setProps is a prop that is automatically supplied
+                         * by dash's front-end ("dash-renderer").
+                         * In a Dash app, this will update the component's
+                         * props and send the data back to the Python Dash
+                         * app server if a callback uses the modified prop as
+                         * Input or State.
+                         */
+                        e => setProps({ value: e.target.value })
+                    }
+                />
+            </div>
+        );
+    }
+}
+
+
+{{cookiecutter.component_name}}.defaultProps = defaultProps;
+{{cookiecutter.component_name}}.propTypes = propTypes;