{"id":330211,"date":"2020-12-09T15:29:07","date_gmt":"2020-12-09T23:29:07","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=330211"},"modified":"2020-12-11T17:19:46","modified_gmt":"2020-12-12T01:19:46","slug":"199-messing-with-jsx","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/199-messing-with-jsx\/","title":{"rendered":"#199: Messing with JSX"},"content":{"rendered":"\n<p>I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets in JavaScript into a function call. So, if you write a line like this <em>in JavaScript<\/em>:<\/p>\n\n\n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"big\">Hello&lt;\/div><\/code><\/pre>\n\n\n\n<p>After processing (probably with Babel and the JSX plugin), you&#8217;ll get, by default:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">React.createElement(\"div\", { class: \"big\" }, \"Hello\");<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>But if you include a directive comment telling JSX you want to use your own function, you can change that output:<\/p>\n\n\n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">\/* @jsx myFunction *\/\n&lt;div class=\"big\">Hello&lt;\/div><\/code><\/pre>\n\n\n\n<p>Turns into:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/* @jsx myFunction *\/\nmyFunction(\"div\", { class: \"big\" }, \"Hello\");<\/code><\/pre>\n\n\n\n<p>That means we can write our own function. Kinda weird, but OK.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJRyaoG\" src=\"\/\/codepen.io\/anon\/embed\/OJRyaoG?height=450&amp;theme-id=1&amp;slug-hash=OJRyaoG&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJRyaoG\" title=\"CodePen Embed OJRyaoG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The actual use case is for non-React libraries, like Preact. I learned this from looking at <a href=\"https:\/\/codepen.io\/collection\/AaMZLk\" rel=\"noopener\">Jason Miller&#8217;s examples<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYXNQPV\" src=\"\/\/codepen.io\/anon\/embed\/vYXNQPV?height=450&amp;theme-id=1&amp;slug-hash=vYXNQPV&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYXNQPV\" title=\"CodePen Embed vYXNQPV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Vue can be done this way as well. Note that both Vue and Preact ship this special <code>h<\/code> function that is designed for this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExaboEP\" src=\"\/\/codepen.io\/anon\/embed\/ExaboEP?height=450&amp;theme-id=1&amp;slug-hash=ExaboEP&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExaboEP\" title=\"CodePen Embed ExaboEP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Valeri Karpov has some interesting use cases over at their blog post, <a href=\"http:\/\/thecodebarbarian.com\/overview-of-jsx-with-non-react-examples.html\" rel=\"noopener\">&#8220;An Overview of JSX With 3 Non-React Examples&#8221;<\/a> as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets in JavaScript into a function call. So, if you write a line like this in [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":330330,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[647],"acf":[],"jetpack-related-posts":[{"id":297910,"url":"https:\/\/css-tricks.com\/video-screencasts\/176-working-with-framer-motion\/","url_meta":{"origin":330211,"position":0},"title":"#176: Working with Framer Motion","date":"October 28, 2019","format":false,"excerpt":"Matt Perry from Framer and I take a look at the React animation library Framer Motion. First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. Controlling animation at this layer is very intuitive and connected to\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/70574400-9e6a-11e9-8708-22d4bf4c3322.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283102,"url":"https:\/\/css-tricks.com\/video-screencasts\/170-watch-an-amateur-spin-up-a-react-babel-webpack-css-modules-project\/","url_meta":{"origin":330211,"position":1},"title":"#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project","date":"March 4, 2019","format":false,"excerpt":"Fair warning! This isn't a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. Some things work easily, some don't. Sometimes it's my fault.\u2026","rel":"","context":"In \"babel\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/react-and-friends.jpg?fit=1200%2C794&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280720,"url":"https:\/\/css-tricks.com\/video-screencasts\/168-css-in-js\/","url_meta":{"origin":330211,"position":2},"title":"#168: CSS-in-JS","date":"January 9, 2019","format":false,"excerpt":"I'm joined by Dustin Schau in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. That is, doing your styling entirely in JavaScript, rather than in .css files that you up in the head all\u2026","rel":"","context":"In \"css-in-js\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/css-in-js.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":175418,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/loop-queryselectorall-matches\/","url_meta":{"origin":330211,"position":3},"title":"Loop Over querySelectorAll Matches","date":"July 14, 2014","format":false,"excerpt":"Let's look at some options for iterating over a NodeList, as you get back from running a document.querySelectorAll. We've written an updated article about this: A Bunch of Options for Looping Over querySelectorAll NodeLists. Not all browsers support forEach on NodeLists, but for those that do: buttons.forEach((button) => { button.addEventListener('click',\u2026","rel":"","context":"In \"forEach\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154814,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/check-font-family-honored\/","url_meta":{"origin":330211,"position":4},"title":"Check if font-family is Honored","date":"October 31, 2013","format":false,"excerpt":"function checkFont(strFamily) { var objDiv = document.createElement('div'); objDiv.style.fontFamily = strFamily; objDiv.appendChild(document.createTextNode('FONT TEST')); if (window.getComputedStyle) { return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily; } return objDiv.currentStyle.fontFamily === strFamily; } Usage var iconFontHonored = checkFont('icomoon');","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305098,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/inject-html-from-a-string-of-html\/","url_meta":{"origin":330211,"position":5},"title":"Inject HTML From a String of HTML","date":"March 19, 2020","format":false,"excerpt":"Say you have some HTML that is a string: let string_of_html = ` <div>Cool<\/div> `; Maybe it comes from an API or you've constructed it yourself from template literals or something. You can use innerHTML to put that into an element, like: document.body.innerHTML = string_of_html; \/\/ Append it instead document.body.innerHTML\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/330211"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=330211"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/330211\/revisions"}],"predecessor-version":[{"id":330564,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/330211\/revisions\/330564"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/330330"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=330211"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=330211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}