--- title: "Create React App v5.0" publication: "React Status" issue: 269 published_at: "2021-12-15" canonical_url: "https://react.statuscode.com/issues/269" --- Plus 3D animations for components with Framer Motion 3D. | #​269 — December 15, 2021 [Read on the Web](https://react.statuscode.com/issues/269) 🎄 This is the last normal issue of the year but we're back next week with a _"best of 2021"_ edition to cap off the year. Season's greetings to you all! __ _Peter Cooper and Terence Gannon — editors_ React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yocvtasdftut14xq05xr.jpg)](https://www.framer.com/docs/three-introduction/) [An Introduction to Framer Motion 3D](https://www.framer.com/docs/three-introduction/) — [Framer Motion](https://www.framer.com/fp/) is a popular Web animation toolkit we’ve mentioned a few times over the years, and there’s a 3D animation option that uses [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) under the hood. Some nice sandbox demos here to play with. [LayoutCamera](https://www.framer.com/docs/layoutcamera/) is also worth a look. Framer [Create React App 5.0: The Popular 'One Command' React App Builder](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) — Few projects in the React world have been as successful as [Create React App](https://create-react-app.dev/), which has brought single command app generation to the masses. v5.0 includes fast refresh improvements, support for Tailwind, and a lot of dependency updates including webpack 5, Jest 27 and ESLint 8. Meta [![\](https://copm.s3.amazonaws.com/7b1859ee.png)](https://github.com/openreplay/openreplay) [Open-Source Session Replay for Developers](https://github.com/openreplay/openreplay) — We let you see and debug what users do on your web app, helping you fix issues faster. OpenReplay is open-source and self-hosted for complete control over your data. OpenReplay sponsor [React Team Working on Custom Element Support](https://github.com/facebook/react/issues/11347#issuecomment-988970952) — Dan has posted an update on the long mooted proposal for supporting Web Components standard custom elements. Want to play? _"You can still start using it right away if you're comfortable with `@experimental` releases."_ Support in a production release is promised in future, though the timing depends on the success of the experimental support. Dan Abramov [Plugging Memory Leaks in Your App](https://calendar.perfplanet.com/2021/plugging-memory-leaks-in-your-app/) — _“In any reasonably sized app, you can bet memory is leaking somewhere,”_ says Stoyan, so having a how to on mitigating such leaks is useful. React is used as the basis for the examples here but the basic concepts apply elsewhere too. Stoyan Stefanov [Can Recoil Replace Redux?](https://blog.joshsoftware.com/2021/12/07/can-recoil-replace-redux-state-management-in-react/) — If you have been wondering about making this swap, this brief article will provide an overall view of some trade-offs. Shailendra Kanherkar [Getting Started with Astro: Build React & Svelte Islands](https://rodneylab.com/getting-started-astro/) — Imagine your web page as ‘sea’ of static HTML dotted with ‘islands’ of interactivity implemented with your favourite framework, the loading of which _you_ control. If you’re not familiar with [Astro](https://astro.build), we suggest [Astro in 100 Seconds](https://www.youtube.com/watch?v=dsTXcSeAZq8) as a place to start, however. Rodney Lab Jobs [Frontend Developer 🚀(Remote, Work from Anywhere 🏖)](https://crystallize.com/careers/front-end-developer) — We're reimagining eCommerce with a super fast headless commerce service for product storytellers. React, Node, GraphQL? Let's talk. Crystallize [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired ▶[React Wednesdays: Learning Motion One with Matt Perry](https://www.youtube.com/watch?v=DTR8tEjMcOE) — As TJ says: _“MotionOne is like the jQuery of web animations. At 3.3kb it’s a handy little wrapper with a very elegant API.”_ This chats-meets-live-demo spends an hour covering what it can do. TJ VanToll and Matt Perry [Dynamic by Default: Shopify's Hydrogen, a New Take on React](https://thenewstack.io/dynamic-by-default-shopifys-hydrogen-a-new-take-on-react/) — Hydrogen is not a Jamstack framework as it is “dynamic by default” but this article talks about how it differs from a traditional Jamstack approach and, specifically, Next.js. Richard MacManus [How to Set Up Server Side Rendering (SSR) with React, Express.js, and esbuild](https://devtails.xyz/how-to-set-up-server-side-rendering-ssr-with-react-and-esbuild) Adam Berg [A Beginners Guide to Behavior Testing in React](https://www.chakshunyu.com/blog/a-beginners-guide-to-behaviour-testing-in-react/) Chak Shun Yu 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ru6wr7haqgojkjfdubfl.jpg)](https://github.com/KyleAMathews/react-headroom) [React Headroom: Hide Your Header Until You Need It](https://github.com/KyleAMathews/react-headroom) — A customizable content for header bars that can be shown and hidden under various scroll conditions. For example, when you slide down on the homepage, the header disappears.. but when you scroll up, even just a little, it’s back. Kyle Mathews [Plasmic: The Visual UI Builder for React](https://www.plasmic.app/) — This (commercial, but with a free tier) tool lets you compose React UIs visually from rough designs in Figma/Sketch or from scratch, which you can then refactor into production-ready components. [More info here](https://medium.com/plasmic-app/announcing-plasmic-3bc510a97ea3). Plasmic [5 Reasons To Choose the KendoReact Form Library](https://www.telerik.com/blogs/5-reasons-choose-kendoreact-form-library?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-awareness-general&utm_content=blog-5-reasons-choose-kendoreact-form-library) Progress KendoReact sponsor [Easybase: Serverless Database as a Service](https://easybase.io/) — A potential solution for those who want the benefits of a serverless database architecture with reduced upfront investment, and it's focused directly at React and React Native developers. A [free tier](https://easybase.io/pricing-fixed/) facilitates initial learning and test cases. Easybase [Liqvid: Interactive Videos with HTML/CSS/JS](https://liqvidjs.org/) — Get the familiar paradigm of a video while adding the compelling benefit of viewer interactivity. The ability to edit the ‘source code’ and a lighter storage footprint are additional benefits. Liqvid [Konsta UI: Mobile Components Built with Tailwind CSS](https://github.com/konstaui/konsta) — A emulation of native iOS and [Material Design](https://material.io/design) themes engineered with adherence to the official design guidelines for the respective platforms. Konsta UI ## ⚡️ Quick Bits: - [react-string-replace](https://github.com/iansinnott/react-string-replace) — Safely replace strings in components. - [react-native-image-colors](https://npmjs.com/package/react-native-image-colors) — Match the UI elements to the predominant colors in an image. - [react-use-wizard](https://github.com/devrnt/react-use-wizard) — Step users through your app using hook-based wizards. - [react-leaflet-fullscreen](https://github.com/krvital/react-leaflet-fullscreen) — A [fullscreen control](https://brunob.github.io/leaflet.fullscreen/) for [Leaflet](https://leafletjs.com) maps in React. - [use-react-screenshot](https://github.com/vre2h/use-react-screenshot) — A hook for creating component screenshots. 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