{"id":4828,"date":"2022-03-15T11:45:48","date_gmt":"2022-03-15T16:45:48","guid":{"rendered":"https:\/\/upmostly.com\/?p=4828"},"modified":"2022-03-12T11:46:05","modified_gmt":"2022-03-12T17:46:05","slug":"must-react-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/must-react-be-in-scope-when-using-jsx","title":{"rendered":"Must React Be in Scope When Using JSX?"},"content":{"rendered":"\n<p>The answer to this question was \u201cyes\u201d in the past, but with React 17 release, the current answer is \u201c<strong>no<\/strong>\u201d.<\/p>\n\n\n\n<p><strong>JSX transform:<\/strong><\/p>\n\n\n\n<p>Browsers don\u2019t understand JSX out of the box, so most React users rely on a compiler like Babel to transform JSX code into regular JavaScript. Many preconfigured toolkits like Create React App or Next.js also include a JSX transform under the hood. With React 17, <strong>JSX transform<\/strong> has been improved; here\u2019re the benefits of the new <strong>JSX transform<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>With the new transform, you can <strong>use JSX without importing React<\/strong>.<\/li><li>Depending on your setup, its compiled output may <strong>slightly improve the bundle size<\/strong>.<\/li><li>It will enable future improvements that <strong>reduce the number of concepts<\/strong> you need to learn React.<\/li><\/ul>\n\n\n\n<p><strong>What\u2019s Different in the New transform?<\/strong><\/p>\n\n\n\n<p>When you use JSX, the compiler transforms it into React function calls that the browser can understand. <strong>The old JSX transform<\/strong> turned JSX into <code>React.createElement(...)<\/code> calls.<\/p>\n\n\n\n<p>For example, let\u2019s say your source code looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"112\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-56-03.png\" alt=\"\" class=\"wp-image-4831\"\/><\/figure>\n\n\n\n<p>Under the hood, the old JSX transform turns it into regular JavaScript:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"499\" height=\"113\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-56-24.png\" alt=\"\" class=\"wp-image-4834\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-56-24.png 499w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-56-24-300x68.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/figure>\n\n\n\n<p>However, this is not perfect:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Because JSX was compiled into <code>React.createElement<\/code>, <code>React<\/code> needed to be in scope if you used JSX.<\/li><li>There are some performance improvements and simplifications that <code>React.createElement<\/code> does not allow.<\/li><\/ul>\n\n\n\n<p>To solve these issues, React 17 introduces two new entry points to the React package that are intended to only be used by compilers like Babel and TypeScript. Instead of transforming JSX to <code>React.createElement<\/code>, <strong>the new JSX transform<\/strong> automatically imports special functions from those new entry points in the React package and calls them.<\/p>\n\n\n\n<p>Let\u2019s say that your source code looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"75\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-57-43.png\" alt=\"\" class=\"wp-image-4836\"\/><\/figure>\n\n\n\n<p>This is what the new JSX transform compiles it to:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"134\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-58-02.png\" alt=\"\" class=\"wp-image-4839\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-58-02.png 491w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-from-2022-03-12-06-58-02-300x82.png 300w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n\n\n\n<p>Note how our original code <strong>did not need to import React<\/strong> to use JSX anymore! (But we would still need to import React in order to use Hooks or other exports that React provides.)<\/p>\n\n\n\n<p><strong>This change is fully compatible with all of the existing JSX code<\/strong>, so you won\u2019t have to change your components.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>That\u2019s it for this article, I hope you enjoyed and learned a lot.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The answer to this question was \u201cyes\u201d in the past, but with React 17 release, the current answer is \u201cno\u201d.<\/p>\n","protected":false},"author":32,"featured_media":4936,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[34,4],"class_list":["post-4828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-advanced-react-tutorials","tag-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/4828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=4828"}],"version-history":[{"count":3,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/4828\/revisions"}],"predecessor-version":[{"id":4941,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/4828\/revisions\/4941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/4936"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=4828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=4828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=4828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}