--- title: "Vite vs Create React App" publication: "React Status" issue: 330 published_at: "2023-03-15" canonical_url: "https://react.statuscode.com/issues/330" --- Plus five early React mistakes, an icon management approach, and some mind-bending WebGL effects. | #​330 — March 15, 2023 [Read on the Web](https://react.statuscode.com/issues/330) Together with [![Retool logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_250,h_80/e_make_transparent/co_white,e_outline:7/xujzqhybod6rrw1uttra.png)](https://retool.com/events/retool-developer-day/?utm_medium=newsletter&utm_source=sponsor&utm_campaign=reactstatus) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/c2gbjbdsyt1szkgpoy4x.jpg)](https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app) [What is Vite and Why Use It Over _Create React App_?](https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app) — _Create React App_ has long been considered the de facto way to create new React apps, but [Vite](https://vitejs.dev/) has become popular in the last year due to its ease of use and performance (enough so that folks have [suggested changing what the React docs recommend.](https://github.com/reactjs/reactjs.org/pull/5487)). Luke Twomey Of course, an even faster option will be along before long.. ah, yes, [Rspack](https://www.rspack.dev/) is a new player in this space to check out too! 👋 [Meet the React.js Core Team](https://beta.reactjs.org/community/team) — The new React documentation site has a neat page showing off the hard working souls on the React development team from long-time members like Sophie Alpert and Dan Abramov, to newer folks like Mengdi Chen. React Documentation [![\](https://copm.s3.amazonaws.com/f803af85.jpg)](https://retool.com/events/retool-developer-day/?utm_medium=newsletter&utm_source=sponsor&utm_campaign=reactstatus) [Developer Day: A Front-Row Seat to What's New with Retool](https://retool.com/events/retool-developer-day/?utm_medium=newsletter&utm_source=sponsor&utm_campaign=reactstatus) — Join our product and engineering leaders for a first look at what's new with Retool. We'll be diving deep into new GPT-powered features, Python support, and a brand-new way to rapidly deploy databases. Retool sponsor ▶[Some Spirited Discussion on React Server Components](https://www.youtube.com/watch?v=h7tur48JSaw) — Kent C Dodds got together with Meta’s Dan Abramov and Joe Savona and took advantage of the chance to ask numerous questions about Server Components with two leading members of the React Core Team. If you prefer, you can [read the written summary.](https://kentcdodds.com/blog/rsc-with-dan-abramov-and-joe-savona-live-stream) Kent C. Dodds **IN BRIEF:** - A [wishlist for a React compiler.](https://electricui.com/blog/wishlist-for-a-react-compiler) - It makes no sense to say that Microsoft Teams is being rewritten _"from Electron to React"_ [says Microsoft MVP Tom Morgan](https://blog.thoughtstuff.co.uk/2021/08/stop-saying-microsoft-teams-is-being-rewritten-from-electron-to-react/), although it's true both Electron and Angular are being set aside. - The Astro folks published a [_Web Framework Performance Report_](https://astro.build/blog/2023-web-framework-performance-report/) comparing the performance of several frontend framework options, a few of which either use or can be used with React. [How To Create Dynamic Donut Charts with TailwindCSS and React](https://www.smashingmagazine.com/2023/03/dynamic-donut-charts-tailwind-css-react/) — An approach to creating a [donut chart](https://en.wikipedia.org/wiki/Pie_chart#Doughnut_chart) using CSS’s `conic-gradient` and does not require additional libraries or heavyweight JavaScript. Paul Scanlon [How to Drag and Drop in React](https://www.robinwieruch.de/react-drag-and-drop/) — Drag and drop is a basic UI expectation in many scenarios. Robin, always a well-regarded instructor, walks though the creation of a drag and drop capable component step-by-step. Robin Wieruch The tutorial above leans on the now stalled (but still maintained) [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd#%EF%B8%8F-maintenance--support) – the more actively developed [dnd kit](https://dndkit.com/) is worth exploring if this concerns you. [Five Mistakes I Made When Starting My First React Project](https://css-tricks.com/5-mistakes-starting-react/) — Richard shares his early React mistakes with the hope you can learn from his misfortunes. He tackles topics like using `defaultProps`, `propTypes`, and class components. Richard Oliver Bray [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication) Userfront sponsor [Beautiful and Mind-Bending Effects with WebGL Render Targets](https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/) — Learn how to use WebGL Render Targets to create post-processing effects, optical illusions, and transition effects in your React Three projects. Maxime Heckel [Create an Image Tagger App with React and AI in Just a Few Simple Steps](https://blog.danoph.com/create-an-image-tagger-app-with-reactjs-and-ai-in-just-a-few-simple-steps) — No OpenAI or ChatGPT involved here. It uses Amazon’s long standing [Rekognition](https://aws.amazon.com/rekognition/) service. Daniel Errante ▶[Unlock the Power of AI with Defer and Next.js 13](https://www.youtube.com/watch?v=kHsTp2LENUI) — [Defer](https://www.defer.run/) is a (commercial) Node.js background job execution platform. Jack Herrington ▶[Rebuilding the Jotai State Manager in 20 Minutes](https://www.youtube.com/watch?v=gg31JTZmFUw) — Ultimately Jotai is simple enough that [its core can fit into a tweet](https://twitter.com/dai_shi/status/1484835169475653634) (sort of). Jack Herrington [Lazy Loading Routes in React Router 6.4+](https://remix.run/blog/lazy-loading-routes) Matt Brophy [How to Create and Use Path Aliases in TypeScript Imports with Vite](https://hsblhsn.me/how-to-create-and-use-path-alias-in-typescript-imports-with-vite) Hasibul Hasan 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zucfdtbnrehtnqgootpy.jpg)](https://github.com/dorbus/flexboard) [Flexboard: A React Component Library for Resizable Sidebars](https://github.com/dorbus/flexboard) — Try the [live example](https://dorbus.github.io/flexboard-example/). The code allows you to set min/max sizes for the resizable parts of the layout. Dorbus [Tremor 2.0: The React Library to Build Dashboards Fast](https://www.tremor.so/changelog) — Provides an array of modular components to build data-driven dashboards. v2.0 is the _“first step towards a production-ready version of Tremor”_ and sees a full switch to Tailwind CSS. [Homepage.](https://www.tremor.so/) Tremor Labs [Try Stream’s Free Trial of SDKs for In-App Chat](https://getstream.io/try-for-free/?utm_source=ReactStatus&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=ReactStatus_January2023_trial_klmh22) Stream sponsor [Iconito: SVG Icon Management for React](https://github.com/nairinarinyan/iconito) — Enables the storage of SVG icons in a single definition file as symbols so they can be used with references. Nairi Narinyan [useRerender](https://github.com/geobde/useRerender) — Hook that detects component mounts, unmounts & re-renders. George Bardi [React Code Input](https://github.com/srsholmes/react-code-input) — Creates a lightweight text area component which will automatically syntax highlight code, [as shown here](https://github.com/srsholmes/react-code-input#react-code-input). Simon Holmes Jobs [Software Engineer (Frontend)](https://jobs.ashbyhq.com/stickermule/6de4ccd8-7e58-4b65-9a25-62354972bdbd?utm_source=Cooperpress) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. Sticker Mule [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=easy-job-hunting) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired **QUICK RELEASES:** - [CRACO 7.1](https://github.com/dilanx/craco) ↳ Create React App Configuration Override. A configuration layer for CRA. - [react-native-permissions 3.8](https://github.com/zoontek/react-native-permissions) ↳ Cross platform unified permissions API. - [React Stripe.js 2.0](https://github.com/stripe/react-stripe-js) ↳ Components for Stripe.js and Stripe Elements. - [Million 2.0](https://github.com/aidenybai/million) ↳ Tiny virtual DOM that can make React faster. - [Sonner 0.2](https://github.com/emilkowalski/sonner) ↳ Opinionated toast / notifications component. - [react-xr 5.4](https://github.com/pmndrs/react-xr) ↳ VR/AR with React Three Fiber. - [Playroom 0.31](https://github.com/seek-oss/playroom) ↳ Design with JSX, powered by your own component library. This issue was curated by Terence C. Gannon and Peter Cooper 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