React Component instead of HTML?


#1

I’m trying to embed Runkit in some documentation for the valuelink library. This is a data binding library so the user needs to see a responsive react component that updates itself when complete. When I press the run button I get the static rendered result instead of a react component that is dynamic. Is there a way to get back a React widget instead of rendered HTML?


#2

If you mean a React component within the output, then you’ll have to include React somehow yourself, for example:

Basically, the viewer will show HTML. You can of of course make the classes and do an initial render in RunKit (like a server side render), and then do subsequent renders in HTML.


#3

Just checking in case there’s a regression - is this how the Rendered HTML viewer should look?


#4

Could you link me to the whole example, or a complete reduction. I’m not sure what’s going on above the code you sent, so for example, if you aren’t manually including a React script it won’t do that on the client. The example I posted above is doing server-side react rendering (and while we’re experimenting with ways of automatically providing these scripts on a client render, right now it will simply render whatever you give it as HTML).


#5

Oh I see that this is just a screenshot of my document – investigating now. But it seems that unpkg is now providing a MIME type of nosniff, will get back to you shortly.


#6

Upon further investigation, it appears unpkg is now serving their scripts with the Content-Type text/plain, and X-Content-Type: no sniff, which means the browser is not allowed to change it to javascript. As such, the browser is refusing to load them. Looking to see if this is a temporary issue on their end or if there is something new we are supposed to be doing.


#7

OK, I’ve updated it to use 15.6.2 and it now works. It appears that React 16 is broken on unpkg. Serves me right for using latest. Sorry for the problems!


#8

I really appreciate you spotting that, thank you so much @tolmasky.