use the clock example as a starting point

- do a saveas of the custom control 'py_react_clock' to 'myhelloworld'

• remove JS include for the Moment JS libraries
• replace clock by our component name

The code would be like this:

<pega:choose>
<pega:when test="pxRequestor.pyPegaDesignMode != 'true'">

<!-- only include REACT JS once per page - use the bundle 'pzpega_ui_react_dev' for development and 'pzpega_ui_react' for production -->
<pega:onlyonce name="pega_ui_react">
<pega:static type="script" app="webwb">
  <pega:bundle name="pzpega_ui_react" />
</pega:static>
</pega:onlyonce>

<!-- only include this component once per page - will not be reloaded on refresh -->
<pega:onlyonce name="myhelloworld">
<pega:static type="script" app="webwb">
        <pega:file name="myhelloworldComponent.js"/>
</pega:static>
</pega:onlyonce>  
<%
  // Gen unique id for element
   String uniqueId = "myhelloworld"+Long.toString(((com.pega.pegarules.priv.context.PegaRequestor) tools.getRequestor()).currentTimeUnique());
%>
<div id="<%= uniqueId %>" data-property="<pega:reference name="$this-name" mode="normal" />" data-type="myhelloworld">
</div>  
<script>
  ReactDOM.render(React.createElement(Myhelloworld, {'param1': 'value' }), document.getElementById("<%= uniqueId %>"));
  
  /* Clear the state of the component on an Ajax Reload to set the setInterval ticker by calling the unmountComponentAtNode method function */
  pega.u.d.registerAsHarnessElement({
    nullify: function() {
      ReactDOM.unmountComponentAtNode(document.getElementById("<%= uniqueId %>"));
    }
  }, pega.u.d.getSectionDiv(document.getElementById("<%= uniqueId %>")).getAttribute("uniqueID"));
  
</script>
</pega:when>
<pega:otherwise>
  <span>Hello World component using ReactJS</span>
</pega:otherwise>
</pega:choose>

- do a saveas of the JSX file 'py_react_clock.js' to 'myhelloworldComponent.js' with the following content

class Myhelloworld extends React.Component {
  render() {
    return (
      <div>
        Hello world
      </div>
    );
  }
}

2 things have to match between the custom control and the JSX component:

1/ the name of the component class 'Myhelloworld' should match the value in the custom control when doing

ReactDOM.render(React.createElement(Myhelloworld, {'param1': 'value' }), document.getElementById("<%= uniqueId %>")); 

2/ the name of the JSX file should match 

<pega:file name="myhelloworldComponent.js"/>

once you have built the control - make it available in the section by checking 'show in authoring menu' in the control "HTML" tab.

Then drop the control in your dynamic layout inside your section