#​330 — March 15, 2023

Read on the Web

Together with  Retool logo
React Status

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:

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 13Defer 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: