Using the grapes cli to create a plugin

Hi Team,

I'm trying to use the grapes cli tool (https://github.com/artf/grapesjs-cli) to create a plugin to be used with a react project. The cli tool created blocks.js, components.js and an index.js files. The index.js file contains the below code:

export default (editor, opts = {}) => {
  const options = {
    ...{
      // default options
    },
    ...opts
  };

  // Add components
  loadComponents(editor, options);
  // Add blocks
  loadBlocks(editor, options);

  // TODO Remove
  editor.on("load", () =>
    editor.addComponents(
      `<div style="margin:100px; padding:25px;">
     
          
        </div>`,
      { at: 0 }
    )
  );

Which of the following should be used to define components? Is the loadComponents used for loading the components defined in the components.js or adding the components?

1. loadComponents(editor, options)
2. editor.addComponents( )
3. Or use the components.js file

Could you please make a few codesandboxes to helps us better understand on how to use grapesjs with react, jsx, UI tool kits such as material-UI etc,.

Thanks, Arun