Custom component in REACT

[Hirn]

Hello dear developers.
I am trying to create my own component for REACT, but I get an error when creating the component
I used the instructions for creating components from here https://smartclient.com/smartclient-.....reactSupport

my component

import React from 'react';
import { Button, ReactComponent } from 'smartclient-lgpl/react';
class SaveButton extends Button {
    static ISC_CLASS_NAME = "SaveButton";
    static IS_CLASS = true;
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Button title="Save.." />
        );
    }
}
ReactComponent.registerClass("SaveButton", SaveButton);
export default SaveButton;

my index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'smartclient-lgpl/release';
import SaveButton from "./SaveButton";
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
  <SaveButton />
);

the error that comes out

Cannot read properties of undefined (reading 'create') TypeError: Cannot read properties of undefined (reading 'create') at SaveButton.__createSCInstance
(http://localhost:3000/static/js/bundle.js:40176:27) at SaveButton._createSCInstance (http://localhost:3000/static/js/bundle.js:40164:23) at SaveButton.componentDidMount
(http://localhost:3000/static/js/bundle.js:40102:10) at commitLayoutEffectOnFiber (http://localhost:3000/static/js/bundle.js:68025:34) at commitLayoutMountEffects_complete
(http://localhost:3000/static/js/bundle.js:69192:13) at commitLayoutEffects_begin (http://localhost:3000/static/js/bundle.js:69181:11) at commitLayoutEffects
(http://localhost:3000/static/js/bundle.js:69127:7) at commitRootImpl (http://localhost:3000/static/js/bundle.js:71036:9) at commitRoot
(http://localhost:3000/static/js/bundle.js:70916:9) at finishConcurrentRender (http://localhost:3000/static/js/bundle.js:70313:13) at performConcurrentWorkOnRoot
(http://localhost:3000/static/js/bundle.js:70164:11) at workLoop (http://localhost:3000/static/js/bundle.js:78113:38) at flushWork (http://localhost:3000/static/js/bundle.js:78091:18) at
MessagePort.performWorkUntilDeadline (http://localhost:3000/static/js/bundle.js:78328:25)

[Isomorphic]

There are a few problems with the code you posted. First, you need to import the framework in the component file, not index.js. So move this line to the component:

import 'smartclient-lgpl/release';

The second issue is that the style of defining the new component that you've taken from the docs is for the case where you also have defined a JS subclass of a SC framework class. That's what this line does - it tells the new component what underlying SC framework class to use:

static ISC_CLASS_NAME = "SaveButton";

In this case you're saying that you have a SC class SaveButton in addition to the React component with that name. So you can either define such a class or comment out that line.

Finally, you seem to have overridden render() in your new SaveButton component class, but in a way that actually renders a second button. That's what including <Button/> in the render() method does - it creates a second component. That doesn't really make sense as you're not rendering underlying SC button for the component that you're extending at all. You can define a new component that contains SmartClient React components and define your own render() for that, but here it doesn't make sense. Can you explain what the intent was here?

From your code, it looks like you just want a new component like <Button/> but where the title has a particular default value. In that case, you can just use the first example of extending a component from the docs, so your component code should look like this:

import ReactDOM from 'react-dom';

import 'smartclient-lgpl/release';
import { SC, Button } from 'smartclient-lgpl/react';
import 'smartclient-lgpl/skins/Tahoe';

let isc = window.isc;

const SaveButton = SC.defineClass("SaveButton", Button);
isc.SaveButton.addProperties({
    title: "Save.."
});

export default SaveButton;

We'll try to improve the docs for this section to help people avoid these issues.

[Hirn]

thank you very much for the comprehensive answer
I was worried about the compilation error Now it is gone and I can continue to experiment