{"id":7238,"date":"2016-07-19T11:09:10","date_gmt":"2016-07-19T15:09:10","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=7238"},"modified":"2024-04-02T00:14:19","modified_gmt":"2024-04-02T04:14:19","slug":"quick-tip-html-to-jsx-conversion","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2016\/07\/19\/quick-tip-html-to-jsx-conversion\/","title":{"rendered":"Quick Tip: HTML to JSX Conversion"},"content":{"rendered":"<p><img decoding=\"async\" src=\"\/img\/articles\/jsx-conversion.png\"\/><\/p>\n<p>Like many developers, at times I\u00a0find the need to convert\u00a0raw HTML to <a href=\"https:\/\/facebook.github.io\/react\/docs\/jsx-in-depth.html\" target=\"_blank\" rel=\"noopener\">JSX<\/a>. It was only after I found myself needing to do this a bit more frequently that I considered writing a quick tool to automate the task. However, like most things, I knew there must be something out there which handles this already, and as I suspected, there certainly is: <a href=\"https:\/\/github.com\/reactjs\/react-magic\/blob\/master\/README-htmltojsx.md\" target=\"_blank\" rel=\"noopener\">HTMLtoJSX<\/a> &#8211; a component of <a href=\"https:\/\/github.com\/reactjs\/react-magic\" target=\"_blank\" rel=\"noopener\">React-Magic<\/a> which does precisely this. <\/p>\n<p>So, if ever you need to quickly convert raw HTML to JSX, be sure to check out the <a href=\"http:\/\/magic.reactjs.net\/htmltojsx.htm\" target=\"_blank\" rel=\"noopener\">online converter<\/a> and, for more frequent needs, the converter is also available <a href=\"https:\/\/www.npmjs.com\/package\/htmltojsx\" target=\"_blank\" rel=\"noopener\">via NPM<\/a> and can easily be integrated into part of an existing build pipeline.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like many developers, at times I\u00a0find the need to convert\u00a0raw HTML to JSX. It was only after I found myself needing to do this a bit more frequently that I considered writing a quick tool to automate the task. However, like most things, I knew there must be something out there which handles this already, and as I suspected, there&#8230; <a class=\"read-more\" href=\"https:\/\/www.ericfeminella.com\/blog\/2016\/07\/19\/quick-tip-html-to-jsx-conversion\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":8594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[59,9,201,244],"tags":[256,282,279,234,278,281,280],"class_list":["post-7238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-news","category-quick-tips","category-react","tag-html","tag-htmltojsx","tag-jsx","tag-quick-tips","tag-react","tag-react-magic","tag-tools"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.ericfeminella.com\/blog\/wp-content\/uploads\/2016\/07\/jsx-conversion.png?fit=718%2C320&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/7238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=7238"}],"version-history":[{"count":1,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/7238\/revisions"}],"predecessor-version":[{"id":8596,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/7238\/revisions\/8596"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media\/8594"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=7238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=7238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=7238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}