Picture of Nicolas Kønig
React components in Adapt framework
by Nicolas Kønig - Friday, 5 November 2021, 2:45 PM


I'm new to the Adapt framework. I would like to use React components as plugins.

For example include a <div id="react-component"></div> inside a handlebar template. And then load the react component as a <script>. 

I can see that the framework supports jxs, but I cannot see any examples of using jxs?

Do anyone have experience with integrating React with the Adapt framework or use React components as part of the Adapt plugins?

Best regards 


Picture of Oliver Foster
Re: React components in Adapt framework
by Oliver Foster - Monday, 8 November 2021, 10:10 AM

Hi Nicolas,

At the moment we're just using jsx instead of handlebars. You can see it in the mcq, gmcq and accordion as an example.

We're effectively:

Specifying the template name with '.jsx' at its end https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/js/AccordionView.js#L44

Creating a jsx template file in the same way you would with handlebars, wrapping the jsx in an export default function https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/templates/accordion.jsx#L4

Expose any event handlers you need from the view so that they get passed as props through to the jsx https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/js/AccordionView.js#L6 https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/templates/accordion.jsx#L36

At the moment you can't include react helper libraries/frameworks, namely because we don't use npm for the client-side code.

I hope that helps?


Picture of Nicolas Kønig
Re: React components in Adapt framework
by Nicolas Kønig - Monday, 8 November 2021, 1:27 PM

Hi Oliver,


Thank you so much for your answer. Yes it helps!

Kind regards