Bookmarks (134)

Aspect: A New Visual Environment for Building Components — It’s a new, unproven tool, but any efforts to simplify the development process are laudable to us, and you might find it useful too. Currently it only exports class components, but it’s great to see them dogfooding things by building Aspect in Aspect itself.

Start UI Web: An Opinionated Frontend Starter Built with React, Next.js, Chakra UI, React Query, and More

A React Router Implemented in Under 100 LOC — One of those sort of experiments that anyone can learn from.

react-ymd-date-select: Year/Month/Day Selection Dropdowns — Provides an alternative to the calendar based approach. react-select-datepicker is another option in this space.

Kea 3.0: A State Manager for React — Kea is a state management library that’s been around for many years and provides a lot of structure around the concept. This big v3 release brings Kea up to modern standards without breaking what worked before.

React Fast Accordion: A Fast, Dynamic, and Accessible Accordion — No dependencies and it incorporates animation via the Web Animations API. Demo on CodeSandbox.

Implementing Progressive Image Loading — Is there anything worse than staring at a blank frame while a large, high-resolution image is loading? Improve your user’s experience by giving them a progressively clearer picture of what lays in store for them.

Using Next.js ISR with Serverless Cloud — Serverless’s cloud offering supports Next.js incremental static regeneration (ISR) rendering method. This post walks through how to use it.

Improve the Performance of Your Forms — An exploration of how Kent’s state colocation concept (from 2019) can optimize React forms by keeping state management close to where it is needed.

Improve Your React App Performance Using React Profiler — A quick peek at the profiler API which can provide hard data to be used in diagnosing performance bottlenecks.

Revolutionize Your File Handling with Filestack. Start Now — Ever wondered how to bring your application to the next level? Filestack offers its best-in-class APIs to help you do just that. Detect images with Image Detection, speed up your file uploads, and make your application safe all with Filestack.

Playwright Can Now Test Your Components — Playwright, Microsoft’s browser control library which “enables reliable end-to-end testing for modern web apps”, takes an interesting step outside of its usual neighborhood. In preview form for now, but you can learn more here.

Horizon UI: A Beautiful Open Source Admin Template for Chakra UI and React — Includes 70+ dark/light components covering a whole slew of UI possibilities. View a live preview here.

Scrollex: A Library to Build Beautiful Scroll Experiences with Minimal Code — Definitely not for every project but you can check out some really cool examples of what’s possible on the demo page.

An RFC for useEvent, a New Fundamental React Hook — Billed as a so-far ‘missing piece’ of the hooks system, the proposed useEvent is for defining an event handler that ‘sees’ fresh props/state but has a stable function identity. The motivation and use cases are shown off here and the React team is open to your feedback.

What The useEvent Hook Is (and Isn't) — If you want a bit more background to the above, Nick has some initial reactions to the useEvent hook RFC. James Brightman also thinks about it and thinks it’ll eventually “change the way you write modern React.”

Build Your Custom React Chat App Fast — The Sendbird UIKit is ideal to quickly build a world-class, custom, React chat app. Sign up for a free trial now and experiment with the richest chat API on your own schedule with our free forever Developer plan.

A Report from Reactathon — In-person React events remain few and far between as the COVID situation continues to play out around the world, but Reactathon brought a lot of folks together and Swizec reflects on the key themes here.

▶  React Router 6 Tutorial for Beginners — A new video by this noted educator where he goes back to basics for React beginners. In this case, he takes up the subject of React Router as used to build a single page application.

The key Attribute and Best Practices for Performant Lists — Is the only reason you’re using the key attribute to satisfy an obscure ESlint rule? If so, the author asserts there are better reasons than that to make it part of your routine.

A Quick React Component Test — A explanation of a Cypress test to confirm the onClick handler is executing when a button component is clicked, complete with source code.

The as Prop — A succinct description on its use to combine semantics with aesthetics in a flexible way.

Reagraph: WebGL Graph Visualizations for React — A high-performance network graph visualization library that uses WebGL under the hood for both 2D and 3D rendering options. Here’s a basic sandbox example you can play with.

Shopify Unveils React Native Skia — Skia is a popular (used in Chrome, Android, Firefox, etc.) 2D graphics library and Shopify has brought its 2D drawing capabilities into React Native for you to create your own cross-platform graphics on the fly in any RN app. GitHub repo.

▶  The Story of Concurrent React — 2168 days of work covered in just 12 minutes! Kinda. This video aims to bring you up to speed with React’s concurrency story, how the various parts came into place, how they work, and what the benefits are.

Updated: Complete React Learning Path — Frontend Masters flagship React courses have been released! Take all our React courses in order, from the new Complete Intro to React v7 and Intermediate React v4 courses, to TypeScript and beyond!

Why I Don’t Miss React — This isn’t a call to drop React or a declaration of it being ‘dead’ or that all web frameworks are useless. But the author did go from using React every day to not using it at all, and it was a more pleasant journey than he was expecting.

How to Build Your Own Blog with Next.js and MDX — A step-by-step guide to building a basic blog that renders posts written in MDX, which mixes Markdown with React components.

▶  Leverage the Web Platform with Remix — A discussion with Remix co-founder Michael Jackson about how Remix is "an outgrowth" of the work that he and Ryan Florence did on React Router, and how Remix wants to bring balance by spanning both frontend and backend.

<ClickToComponent />: Instant Access to Component Source Code — Option+Click React components in your browser to instantly open the source in VS Code. Additionally, Option+Right-Click opens a context menu with the parent components’ props, file name, column number and line number.

React Toastify 9.0: Notification Boxes Made Easy — A popular library. It now supports ‘stacked toasts’, an elegant approach to visualizing growing numbers of notifications. There’s also useNotificationCenter, a new hoook for letting you build a notification center on top of React Toastify. GitHub repo.

Plyr React 4.0: A Responsive Media Player React Component — Supports video, audio, YouTube and Vimeo. GitHub repo.

Remotion 3.0: 'Write' Videos in React — Remotion provides a way for you to use your React knowledge to create videos by writing what you want to happen in code with Remotion then handling the rendering and encoding. ▶️ This video showing off the new Remotion Lambda serverless video renderer (using AWS Lambda, unsurprisingly) was itself created with the tool. React 18 is now...

FortuneSheet: An Excel-Like JS Spreadsheet Control — It’s early days, but this looks promising. There’s a live demo, of course.

xstyled: A Utility-First CSS-in-JS Framework Built for React — An abstraction of the libraries and utilities use to create Smooth UI which can be employed to create your own, unique UI components without starting completely from scratch.

React Responsive Pagination: Component for Smart Pagination — A responsive React pagination component which intelligently renders to the available width. You can try it out live here.

Mastering CSS Transitions with React 18 — How to use the new useTransition hook that arrived with React 18 to perform a wide variety of web animation effects.

Creating a Rich Text Editor using Rust and React — In 2021, Rust topped Stack Overflow’s Loved vs. Dreaded list for the sixth straight year. Here’s an example of how it can be incorporated into a React application – less a tutorial and more a case study.

React Batching — An easy-to-follow and well-illustrated tutorial on how to batch up multiple state updates as one and improve rendering performance as a result.

Building a Wordle Clone for the Terminal with React Ink — Inkle is a React powered clone of the popular Wordle word game. What makes it interesting is it runs in the terminal and uses Ink to do so.

Netlify Edge Functions: Serverless Compute Powered by Deno — Edge Functions is a Deno-powered platform for running globally distributed JavaScript functions. How does this benefit you? It’s another place to run your React server components or using streaming SSR.

How to Build an Accessible React Data Grid — How do you make a React table (data grid) component accessible? Read this blog post for a comprehensive tutorial by one of our most experienced software engineers and accessibility experts.

React 18.1 Released — Don’t get too excited - it’s almost entirely a bug fix release, but if you’re already on React 18, you’ll want to get upgraded nonetheless.

react-winbox: A Full Window Manager for React — This component wraps Winbox.js, “a modern HTML5 window manager for the web”. The component comes complete with React props and state.