--- title: "A closer look at React 17's new JSX transform" publication: "React Status" issue: 207 published_at: "2020-09-23" canonical_url: "https://react.statuscode.com/issues/207" --- ⚛️ This week's React news, links, and libraries #207 — September 23, 2020 [Read on the Web](https://react.statuscode.com/issues/207) React Status Your weekly React news digest, every Wednesday [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/f0l6aitftbbmwwcql5ph.jpg)](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) [Introducing the New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) — A rare post from the official React blog which digs into React 17’s support for a new version of the JSX transform (that which converts JSX code into actual JavaScript). The new transform doesn’t change the code in your apps in any way but does change what code is produced _from_ your JSX to not require `React` to be imported or in scope. Luna Ruan ▶[Building a Netflix Clone with React, Styled Components and Firebase](https://www.youtube.com/watch?v=x_EEwGe-a9o) — One of the more popular tech teachers on YouTube turns his attention to building a remarkably accurate clone of the remarkably popular video website. At 10 hours for one episode, it’s truly _everything_ you need to know (well, perhaps except serving up petabytes of video at scale 😏). Karl Hadwen [![\](https://copm.s3.amazonaws.com/b2dbdcc6.jpg)](https://frontendmasters.com/courses/next-js/?utm_source=newsletter&utm_medium=email&utm_campaign=reactweekly-nextjs) [New Course: Introduction to Next.js, The Full-Stack React Framework](https://frontendmasters.com/courses/next-js/?utm_source=newsletter&utm_medium=email&utm_campaign=reactweekly-nextjs) — Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more. Frontend Masters sponsor [Building Complex Animations with React and Framer Motion](https://able.bio/drenther/building-complex-animations-with-react-and-framer-motion--2d5cbc0e) — The steady march to make web apps look like desktop apps continues. Here’s a tutorial which uses a web app clone of the macOS dock as the teaching example. Soumyajit Pathak [First Alpha of Create React App 4.0 Released](https://twitter.com/iansu/status/1306375307553693697?s=20) — v4 of the popular React app builder is just around the corner promising TypeScript 4 support, Fast Refresh and ESLint upgrades and experimental support for React 17’s new JSX transform (featured above). [GitHub repo.](https://github.com/facebook/create-react-app) Ian Sutherland on Twitter [Improving Your React Folder Structure](https://maxrozen.com/guidelines-improve-react-app-folder-structure/) — Although largely driven by personal preference, take a peek inside somebody else’s folders to see how their approach to organizing them compares to yours. Max Rozen 💻 Jobs [Sr. Engineer @ Dutchie, Remote](https://dutchie.com/careers) — Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital. DUTCHIE [Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers!. Vettery ℹ️ _Interested in running a job listing in React Status? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📘 Tutorials and Stories [Animating React Components with GreenSock](https://www.smashingmagazine.com/2020/09/animating-react-components-greensock/) — It’s a simple yet compelling concept: a JavaScript library for the progressive manipulation of CSS to produce complex, physics-based animations. The [demos](https://www.awwwards.com/websites/gsap-animation/) are impressive. Blessing Krofegha [Progressive Enhancement with WebGL and React](https://medium.com/14islands/progressive-enhancement-with-webgl-and-react-71cd19e66d4) — Rarely do you have the luxury of dumping an existing site in favour of an all-new replacement. The Tech Director for [14islands](https://14islands.com) walks through their progressive migration to a modern web experience. David Lindkvist [Render as You Fetch](https://epicreact.dev/render-as-you-fetch/) — In the lead up to the imminent release of his new course, Dodds offers his take on the experimental [Suspense for Data Fetching](https://reactjs.org/docs/concurrent-mode-suspense.html) for turning that gentle waterfall into a firehose. Kent C. Dodds [How to Replace Redux with React Hooks and the Context API](https://www.sitepoint.com/replace-redux-react-hooks-context-api/) — What’s better than state management with a minimalist API? How about eliminating the state management library entirely. Michael Wanyoike [Learn How Devs are Helping 👨🏾‍🎨👩🏻‍🔧👨🏽‍🌾 Adapt to 2020](https://squareup.com/t/f_partnerships/d_partnerships/p_cooperpress/o_squareunboxed2020/u_reactstatus/l_us/dt_alldevice/pr_developers/?route=/us/en/unboxed) Square UnBoxed - Free Virtual Event sponsor [A Thorough React Native Navigation Tutorial](https://www.robinwieruch.de/react-native-navigation) — The second part of the series we started in the [previous issue](https://react.statuscode.com/issues/206). This time the author turns his attention to this important subject with a full blown React Native app as the instructive illustration. Robin Wieruch [Web Component: Why You Should Stick to React](https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1) — [Last week](https://react.statuscode.com/issues/206), we gave a dissenters point of view. This week we provide yet one more reason among many why you likely don’t want to abandon React yet. Nathan Sebhastian 🔧 Code and Tools [reactivue: The Vue Composition API in React Components](https://github.com/antfu/reactivue) — Rather than engage in the React versus [Vue](https://vuejs.org) debate why not simply combine some of the strengths of both? This [detailed article](https://academy.esveo.com/en/blog/Yr/) is an helpful complement to this repo to compare the different approaches. Anthony Fu [8 New React Components You Can Use with KendoReact R3 2020 Release](https://www.telerik.com/blogs/whats-new-kendoreact-r3-2020?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-r3-2020-blog&utm_content=sponsored-link) — New Gantt Chart, AppBar and 6 more React UI components to help you build polished apps much faster. [Find out what’s new.](https://www.telerik.com/blogs/whats-new-kendoreact-r3-2020?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-r3-2020-blog&utm_content=sponsored-link) Progress KendoReact sponsor [Jotai: Primitive and Flexible State Management for React](https://github.com/pmndrs/jotai) — Another crack at state management, this time with a dramatically simplified API and a predisposition for [TypeScript](https://www.typescriptlang.org). Take it for a test drive with [CodeSandbox](https://codesandbox.io/s/jotai-demo-47wvh). Poimandres [react-d3-speedometer: Gauging Your Speed](https://github.com/palerdot/react-d3-speedometer) — If you’re keen to get your feet wet with the [D3](https://d3js.org) library, this nicely executed component could be a good way to do it. We also like the old time analogue look and feel. Arun Kumar [react-easy-edit: Inline Editing Made Easy](https://github.com/giorgosart/react-easy-edit) — Check out the [demo](https://codesandbox.io/s/react-easy-edit-sandbox-2y97j) of this focused component which takes the pain out of inline editing. George Artemiou [lowlight: The Opposite of Highlight?](https://github.com/wooorm/lowlight) — Based on the [Highlight.js](https://github.com/highlightjs/highlight.js) library, this provides “syntax highlighting for virtual DOMs and non-HTML things” for 189 languages. Titus Wormer [sentry-react-native: Sentry SDK for React Native](https://github.com/getsentry/sentry-react-native) — The popular [Sentry](https://sentry.io) crash reporting system, now integrated with your favourite native app development tool. Sentry This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom