~reactstatus | Bookmarks (138)

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.

▶  How React Router v7 Became Type-Safe — An overview of the soon-to-be-released React Router 7, why recent type-safety improvements are both exciting and useful, as well as some live demos.

How to Implement a 'Drag to Select' Mechanism — Josh wanted to implement drag based selection to make bulk operations easier for end users. It was harder than he thought, but he’s done a great job explaining every step of his approach.

Liskov's Gun: The Parallel Evolution of React and Web Components — An opinion piece (by an author who’s certainly no stranger to them) that’s so long there’s an EPUB version! Baldur tackles Web Components, their growing pains, why frameworks like React took a different path, and why this whole topic remains a difficult circle to square.

Implementing Clean Architecture in Next.js — Learn how to make projects testable and debuggable, independent of UI, framework, database, and external dependencies with the concept of Clean Architecture. Join us live on November 4th.

Zustand 5.0: Small, Fast React State Management — You can’t beat a release announcement that says “No new features” but there are some changes. Luckily, it's very easy to upgrade from v4.

Nine Patch: Put Content Inside a Component Rendered with Nine Slice Scaling — Imagine you have an image that represents a frame and you chop it into a 3x3 grid with 4 corners, 4 sides and the middle. You then use those pieces to create a dynamically sized bordered space (ie. 9-slice scaling).

React Folder Structure in Five Steps, 2024 Edition — The latest result of Robin’s efforts at updating his popular posts to 2024 standards. Articles about structuring React apps are always popular; this one breaks the idea down to five steps going from the simplest of apps to more complex ones. Bulletproof React is also worth a look if you need something broader.

React95 v9.0: A Windows 95 Themed React Components Library — Years ago we thought this was a cute pet project and that it’d be left to go stale quite quickly, but no, it’s getting constant updates - we love it! Now we just need to see more sites using it.. :-)

▶  React 18 at The New York Times with Ilya Gurevich — A senior engineer at The New York Times talks about implementing React 18 for their core news site. This follows on from a recent blog post he wrote about the process.

🤖 assistant-ui: React Components for AI Chat — It doesn’t just give you the interface components, but has integrations for Vercel AI, Langchain, and talking to other common LLM APIs (e.g. OpenAI’s), enabling you to build your own in-house AI chat system quickly. Examples.

Types of React Components: An Overview — A complete overview, including basic code examples, of the different types of React component, from those built with createClass, class components, HOCs, function components, and more modern options. A major update of a post we first featured in 2019.

Looking for a DIY Survey Solution? SurveyJS Has You Covered — With the SurveyJS UI libraries, you can quickly build a fully customizable form management platform in React. Seamlessly integrate the drag-and-drop editor with any backend and create dynamic, JSON-based forms within your application without any limitations.

Why I Gave Expo a Second Chance — If your last contact with Expo was a few years ago — and you weren’t all that impressed — you may want to take a second look as this dev did. It’s a powerful way to build React Native apps.

▶  React Visually Explained: use client — We feature this not only for content but also for style: we like the gimmick-free simplicity, tight editing and focus of the presenter and the material she presents.

React Spectrum September 30, 2024 Release — A big release for Adobe’s suite of accessible components, complete with seven new color picker components (including Tailwind starter kit examples), two ‘Disclosure’ components for building accordions/collapsible panels, and Tree/TreeView go into beta.

A React Component for Rendering Shell-Style Progress Indicators — You know the ones, where various combinations of Unicode characters are alternated, etc. This is a very simple implementation.

How to Fetch Data in React (2024 Edition) — An updated look at the multitude of ways to fetch data from a remote API in React. Note that Redux-based approaches aren’t covered, this is all about general, broad approaches.

Mielo React: Components and Wrappers around Mielo.css — Inspired by GNOME’s Gtk4 look and LibAdwaita, this set of components and CSS variable driven styling is aimed at Electron/Tauri use cases when creating apps to look good on Linux. GitHub repo.

React Snap Carousel: DOM-First, Headless Carousel — Uses native browser scrolling and CSS scroll snap points for performance. Try out some of its features in its Storybook. The latest version adds support for infinite carousels.

Testing a React App in Chrome with Heroku CI — An introduction to doing end-to-end testing of a React app as part of a CI pipeline (Heroku’s, in this case).

Vim for React Developers — While VS Code is the ‘go to’ editor for most these days, Vim, and its various spinoffs, has a lot to offer those prepared to learn its many commands. Lee has put together a simple ‘course’ (which runs directly in Vim) to teach you what Vim’s commands can bring to editing React code.

Component Composition is Great, BTW — A well-regarded author writes about using component composition to avoid conditional rendering for mutually exclusive states (and explains why we should all be doing the same).

Amplify the Benefits of JWTs and Session Tokens — Learn how leveraging the benefits of both session token authentication and JWTs results in the best of both approaches.