{"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\/videos\/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=https://css-tricks.com/"////codepen.io//anon//embed//OJRyaoG?height=450&amp;theme-id=1&amp;slug-hash=OJRyaoG&amp;default-tab=js,result\%22 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://css-tricks.com/"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=https://css-tricks.com/"////codepen.io//anon//embed//vYXNQPV?height=450&amp;theme-id=1&amp;slug-hash=vYXNQPV&amp;default-tab=js,result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//ExaboEP?height=450&amp;theme-id=1&amp;slug-hash=ExaboEP&amp;default-tab=js,result\%22 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=https://css-tricks.com/"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 [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[647],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}