Jump to content

React with IPS4


snugge
 Share

Go to solution Solved by CodingJungle,

Recommended Posts

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 ?

Link to comment
Share on other sites

  • Solution

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 by CodingJungle
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...