React with IPS4

[snugge]

Hello guys. I have got question about React. Whats the best practice to include react to newest version of IPS ? 

I would like to use react class component as well as functions components as a custom blocks or inject them somewhere on website. Also would like to use some of external libraries like gsap. How you import those libraries into react component and then use this component inside IPS 4 ?

Normally :

import React { Component } from 'react';
import { gsap } from 'gsap';

class MyClassName extends Component {
	state = {}
	/* some gsap code let say its here */
	render() {
	return (
	<div>
      <h1>Hello</h1>
      <p>Everybody</p>
	</div>
)
};
ReactDOM.render(<MyClassName />, #desired-location);

 

How would you implement this "test code" to your application ?

[CodingJungle]

if this for a non-marketplace app, i would load it up thru the interface folder or load it remotely.

$myJs = \IPS\Output::i()->js('myfolder/myjs.js', 'myapp','interface');
\IPS\Output::i()->jsFiles = array_merge(\IPS\Output::i()->jsFiles,$myJs);

or 

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles,[ \IPS\Http\Url::external('http://example.com/something.js') ]);

if this is for a MP app, you might have to consider the remote loading as an option, since last i heard the the interface folder doesn't work for the cloud communities and i don't think you can you use the bypass method (which would be loading it thru the resources), cause it probably wont be able to properly map the imports (as imports if i am not mistaken are loaded by relative paths and resources wouldn't be relative). 

Edited March 9, 2021 by CodingJungle