#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.).
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.
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.
▶ 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
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 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.
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
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.
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.
▶ Unlock the Power of AI with Defer and Next.js 13 — Defer is a (commercial) Node.js background job execution platform.
▶ Rebuilding the Jotai State Manager in 20 Minutes — Ultimately Jotai is simple enough that its core can fit into a tweet (sort of).
Lazy Loading Routes in React Router 6.4+
How to Create and Use Path Aliases in TypeScript Imports with Vite
🛠 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.
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.
Try Stream’s Free Trial of SDKs for In-App Chat
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.
useRerender — Hook that detects component mounts, unmounts & re-renders.
React Code Input — Creates a lightweight text area component which will automatically syntax highlight code, as shown here.
Software Engineer (Frontend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
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.
↳ Create React App Configuration Override. A configuration layer for CRA.
↳ Cross platform unified permissions API.
React Stripe.js 2.0
↳ Components for Stripe.js and Stripe Elements.
↳ Tiny virtual DOM that can make React faster.
↳ Opinionated toast / notifications component.
↳ VR/AR with React Three Fiber.
↳ Design with JSX, powered by your own component library.