I do use React within individual classes. I use raw React (not JSX), and use my own method getReactElements(.,...)
which invokes React.createElement(.....)
maybe many times. Then I can use pure javascript and I don’t need any non-necessary pre-processors (generally to which I am allergic).
Then I use ReactDOM.render(....)
to actually render the DOM elements. This really works great and I don’t have to use pre-defined React classes which I don’t completely understand or like.
Here is a very simple earlier example (which I will do over now that I am better educated). I have defined elsewhere
const CE = React.createElement;
which really makes things look a lot nicer and one can nest them so they sort of look like nested HTML. So to create
<div>
<div>
<p> now is the time </p>
</div>
</div>
I do
const CE1 = CE;
const CE2 = CE;
function getReactElement(...){
let elem =
CE('div",obj,
CE1('div',obj1,
CE2('p',obj2,'now is the time')
)
);
return elem
}
Here it is in my class.
class UIButton extends UISimpleRectangle{
constructor(positionInstance, uiFontObject, className, id, text,
callback, includeKeyBool, display, notificationController=null){
super(positionInstance, className, id, null,includeKeyBool);
this.buttonClicked = this.buttonClicked.bind(this);
this.getReactElement = this.getReactElement.bind(this);
this.uiFontObject = uiFontObject;
this.callback = callback;
this.text = text;
this.display = display; // may be null or undefined
this.notifController = notificationController; // used for notifications
// may be null or undefined
};
// include argument to use for special purposes
getReactElement(obj = null){
if(! obj){
let obj1 = this.getStyleObject();
let obj2 = {};
if(this.uiFontObject) obj2 = this.uiFontObject.getStyleObject();
obj = extend(obj1, obj2);
if(this.display) obj.style.display = this.display;
obj.onClick = this.buttonClicked;
}
return CE("div",obj, this.text);
};
resize(){
super.resize();
if(this.uiFontObject)this.uiFontObject.resize();
};
/* must filter extraneous clicks.*/
buttonClicked(event){
event.persist();
//console.log("UIButton - buttonClicked");
if(event.target.id !== this.id) return;
if(this.callback)this.callback(this);
if(this.notifController){
let notif = new Notification("backgroundFromButtonClicked",this);
this.notifController.sendNotification(notif);
}
};
// returns integers, not strings
getOffset(){
let elem = document.getElementById(this.id);
let rect = elem.getBoundingClientRect();
return {left: rect.left, top: rect.top,
bottom: rect.bottom, right: rect.right};
};
}; // class UIButton
Hope this helps.