Using React in developing new content type library

Forums: 

Hi,

Can you point to some good example about usin React in a content type library? I found https://github.com/h5p/h5p-speak-the-words,  but a bit more simple solution would be more helpful.

The old documentation  h5p-react  https://h5p.org/introduction-to-using-react-with-h5p  and the h5p-wrapper https://github.com/h5p/h5p-react don't seem to work any more.

Or do you have different experience?

Thanks!

tarmo

serettig's picture

I recently wrote two demo content types. They are a bit unusual in that they use an experimental extension to H5P that implements a shared state (which allows users to see other users' actions). You have to ignore the multi-user state parts and the config files for them (opLogicCheck.json opSchema.json, snapshotLogicCheck.json, snapshotSchena.json). They are both written in React, though, so you might be able to draw on this as inspiration.

https://github.com/sr258/h5p-sharedb-test (super simple functionality)

https://github.com/sr258/h5p-multiuser-quiz (Kahoot-style functionality, more complex)

Best
Sebastian

Thanks, Sebastian!

This is a good start! I donwloaded your library, I was able to build it and upload in my test site. I am not familiar with typescript but I hope I will figure out how to rewrite it to Javascript/JSX.

Definitely helpful!

tarmo

If it may help anyone -  I created a simple h5p-react-boilerplate project  - to get things started:
https://github.com/tarmoj/h5p-react-boilerplate

Here is a simple depo project that I created -  perhaps useful for others, too:
https://github.com/tarmoj/h5p-react-boilerplate

serettig's picture

Great, this might be very useful. What I can really recommend is using https://previewjs.com/ for previews. Debugging and testing H5P libraries can be pretty time-consuming and preview JS is a great tool to decrease time doing the visual tests!