#​343 — June 14, 2023

Read on the Web

React Status

Million.js: A Performance-Focused VDOM Replacement for React — Starting life two years ago as a small, library-agnostic virtual DOM implementation, Million has recently presented itself as a performance enhancement for React: “Imagine React components running at the speed of raw JavaScript.” You don't get this without some compromises though, but their quick start docs show off what the integration process is like.

Aiden Bai

Fireship's snappily-titled ▶️ High-school student makes React a million times faster gives a high-level introduction to Million.js in under three minutes. For something deeper, Behind the Block explains how Million's key functionality works.

Dynaboard: AI Meets Low-Code to Get More Done, Faster — Build high performance authenticated web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Why Do Client Components Get 'SSRed' to HTML? — A quick illustration of the extra layer you can add to your mental model of how React works when you introduce server components. To avoid confusion, think of the concepts of “React Server” and “React Client”, rather than the more easily confusable “server” and “client”.

Dan Abramov

Setting Up React in a Ruby on Rails 7 App — You could use react-rails, but if you want to understand the various parts involved in making the magic happen with bringing React and Rails together, here are the full details.

Ryan Bigg

IN BRIEF:

▶  How to Build Animated, Responsive Tablet UIs with React Native — No speaking, just 100 minutes of gentle piano music, coding, and chilled vibes sitting by the lake. Really.

Takuya Matsuyama

Finish Your Projects — Planetscale’s Aaron Francis discusses the challenges and importance of finishing projects, focusing on embracing the grind of the last 10% of a project and overcoming the fear of releasing it.

Aaron Francis

🛠 Code and Tools

Rewind-UI: Customizable React + Tailwind CSS Component Library — A React component library fitting into the Tailwind CSS way of thinking. You can play with a live demo of some basic customizations on the homepage. It’s still in beta but there are about thirty components to get your teeth into so far.

Nick Dunas

React Menu 4.0: Components for Building Menus — Flexibility is the name of the game. You can build different styles of menu containing various item types, it supports concurrent rendering, and accessibility is baked in. If you’re already a user, there’s a v4 migration guide. GitHub repo.

Zheng Song

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 sponsor

Algolia AutoComplete: A Fast, Full-Featured Autocomplete Library — This isn’t a UI widget – you’re in full control of rendering the experience – but this will you wire up the experience you want users to have. There’s a getting started tutorial and a CodeSandbox demo where you can play around with some live code.

Algolia

Code Hike: Build Smart Code Walkthroughs for the Web — A plugin for MDX (in React only, in this case) to display code, along with annotations and spotlighting (demo) – ideal for blog posts, documentation, tutorials, and the like.

Code Hike Team

react-spreadsheet-import: Automate Spreadsheets and CSV Imports — Built with Chakra UI and complete with automated column matching and validation.

Ugnis

react-svg-file-zoom-pan — Display an external SVG file/string as a React component, complete with pan and zoom.

QUICK RELEASES: