Add an official HTML -> JSX online converter

[gaearon]

We should take https://magic.reactjs.net/htmltojsx.htm, update it to output code compatible with React 16 (and make sure it respects the DOM attribute changes in it), and then host it on our website.

Then we can point "invalid DOM property" warnings to the converter, saving everyone new to React the headache of conversion. facebook/react#11576

[skiritsis]

I can help with this. I've been looking at the HTML to JSX converter code and it looks pretty straightforward.

I'm not sure though what needs to be updated in order to be compatible with React 16. I tried the online editor and it seems to work OK with a couple of cases I tried. Such as converting to canonical React naming for all supported attributes (ex. class to className, tabindex to tabIndex etc.) and allowing to pass custom attributes (ex. thisIsAtest="1234" being converted to thisisatest={1234}).

Maybe the tests could be updated to verify that it works as expected for all the items on this list? Just for the string part though, since only they are relevant when converting from HTML.

[gaearon]

That sounds great. Yeah what you say is reasonable.

[drcmda]

@gaearon @skiritsis would it be a good idea to pour it into a small babel-plugin later on? I am aware of the possible pitfalls but it would be an immense help, especially for svg out of sketch/figma, doing things like stroke-width={this.state.width} and so on. There are actually babel-plugs that do exactly this, one was written by airbnb i believe, but they're always exclusive for either svg or className, i'm not aware of one that simply takes html and makes it react.

[gaearon]

I’m confident Babel plugin is the wrong solution to this and will just create further issues for sharing code examples etc.

[drcmda]

Got it, seemed like the lowest fruit to pluck ... but that is a good argument against it.

[gaearon]

I honestly think building an online converter we can link to from the warning is relatively low effort (a few days at most) and would benefit the community tremendously. Want to give it a try?