Using React in developing new content type library

Submitted by tarmojohannes on Sat, 06/18/2022 - 17:35
Forums: 
Developers

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

serettig

Sun, 06/19/2022 - 11:27

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

tarmojohannes

Mon, 06/20/2022 - 09:04

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

tarmojohannes

Thu, 06/30/2022 - 22:46

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

tarmojohannes

Thu, 06/30/2022 - 22:47

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

serettig's picture

serettig

Fri, 07/01/2022 - 07:11

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!