#330 — March 15, 2023
What is Vite and Why Use It Over Create React App? — Create React App has long been considered the de facto way to create new React apps, but Vite 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.).
Luke Twomey
Of course, an even faster option will be along before long.. ah, yes, Rspack is a new player in this space to check out too!
👋 Meet the React.js Core 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
Developer Day: A Front-Row Seat to What’s New with Retool — 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 — 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.
Kent C. Dodds
IN BRIEF:
A 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, although it’s true both Electron and Angular are being set aside.
The Astro folks published a 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 — An approach to creating a donut chart using CSS’s conic-gradient and does not require additional libraries or heavyweight JavaScript.
Paul Scanlon
How to Drag and Drop in React — 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 – the more actively developed dnd kit is worth exploring if this concerns you.
Five Mistakes I Made When Starting My First React Project — 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
Userfront sponsor
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 — No OpenAI or ChatGPT involved here. It uses Amazon’s long standing Rekognition service.
Daniel Errante
▶ Unlock the Power of AI with Defer and Next.js 13 — Defer is a (commercial) Node.js background job execution platform.
Jack Herrington
▶ Rebuilding the Jotai State Manager in 20 Minutes — Ultimately Jotai is simple enough that its core can fit into a tweet (sort of).
Jack Herrington
Lazy Loading Routes in React Router 6.4+
Matt Brophy
How to Create and Use Path Aliases in TypeScript Imports with Vite
Hasibul Hasan
🛠 Code and Tools
Flexboard: A React Component Library for Resizable Sidebars — Try the live 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 — 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.
Tremor Labs
Try Stream’s Free Trial of SDKs for In-App Chat
Stream sponsor
Iconito: SVG Icon Management for React — Enables the storage of SVG icons in a single definition file as symbols so they can be used with references.
Nairi Narinyan
useRerender — Hook that detects component mounts, unmounts & re-renders.
George Bardi
React Code Input — Creates a lightweight text area component which will automatically syntax highlight code, as shown here.
Simon Holmes
Jobs
Software Engineer (Frontend) — 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 — 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
↳ Create React App Configuration Override. A configuration layer for CRA.
react-native-permissions 3.8
↳ Cross platform unified permissions API.
React Stripe.js 2.0
↳ Components for Stripe.js and Stripe Elements.
Million 2.0
↳ Tiny virtual DOM that can make React faster.
Sonner 0.2
↳ Opinionated toast / notifications component.
react-xr 5.4
↳ VR/AR with React Three Fiber.
Playroom 0.31
↳ Design with JSX, powered by your own component library.