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?

[TryingToImprove]

It seems like the source is located in this repository: https://github.com/reactjs/react-magic

https://github.com/reactjs/react-magic/tree/master/src

[Daniel15]

@gaearon This actually used to live on the React site, and @zpao asked me to move it to a separate site (see reactjs/react-magic#52). Does this mean we want to move it back again? 😕

[gaearon]

Personally I feel it would be right to move it back again, but only given that we fix it to match what React 16 is doing.

[maazadeeb]

@gaearon Is this up for grabs? This seems interesting. If you can explain to me what you mean by "we fix it to match what React 16 is doing", I can try to fix it.