Insert react component to bubble.io

Hi,
I’m looking to insert react.js component into my bubble web app.
I tried the implementation in react offical doc: Add React to an Existing Project – React

In my editor it looks good:

But when I loaded the page it doesn’t work:

Screen Shot 2021-08-02 at 12.12.49

Someone who did it before and can help?

1 Like

I’ve done this a bunch of times, if you want it to work like you expect it (being able to pass props etc.) you’ll need to dive into the basics of plugin building. Do you have a little experience coding in javascript?

2 Likes

Yes I have some experience.
Actually i marked the html as an iframe and then it worked well, but I think it will be better to implement it as a plugin.

Do you know if i can create a visual element plugins using node modules?

@e.plus.dev1 yes it’s possible, you just need to use a bundler / transpiler to make the NPM package available in the global scope of your page. Check out this link on how to do that A Simple Way to Use NPM Library in Browser – Bart Solutions Technical Blog

The output will be a bundle.js file that you can open in an text editor and copy in the visual element header section of the plugin builder.

7 Likes

How did you guys write jsx in the plugin builder?