Bookmarks (195)

React Unity WebGL: Embed Unity WebGL Apps into React Apps — Unity is best known as a platform for building 3D games but can be used for broader applications too. React Unity WebGL helps you integrate WebGL-powered Unity apps with React apps and communicate between the two. GitHub repo.

Reapop 4.2: Simple, Customizable Notifications System — This project’s homepage is itself a giant, customizable demo of what Reapop can do. Keep clicking away on “Random notification” to fill your screen! Now supports React 18. GitHub repo.

React Countup 6.4: Configurable Component Wrapper around CountUp.js — For situations where you want a numeric value to count up from one value to another (there’s a demo on the homepage.). Want the same thing without React? CountUp.js is for you.

React Visual Grid: A Flexible Grid / Gallery Component — A new, feature rich image grid, as illustrated with this live demo.

Golden Oldie: How to Build Stunning 3D Scenes with React Three Fiber — If you want to build neat 3D visualizations in the browser using the React concepts you’re already familiar with, here’s how to get started. A great intro. (This dates from a year ago, but I encountered it again and remembered how cool it was!)

What Shopify Learnt from Open-Sourcing FlashList — What’s at stake when a successful business decides to open-source an important part of their platform? Shopify shares their experience opening up their performance-optimized React Native list control.

CSS Variables for React Devs — An updated piece, and a solid look at how to use CSS variables (custom properties) in your next project.

Shopify’s Solution for Measuring React Native Rendering Times — Learn more about how their open-source react-native-performance library works, how to get started, and why measuring performance is so important for them.

Working with Zustand — Some tips for using Zustand, a relatively minimal state management library with a lot of enthusiastic users.

Improving React Interaction Times by 4x — This is about as practical and real world as it gets. Causal’s engineers noticed some sluggish UI interactions in their React app (as many of us do) and were determined to get to the cause of the problem. They did it. They survived. This is the full story.

🦕 Building Apps in Deno with Frameworks.. like React — Deno, perhaps best known as the server-side JS runtime that isn’t Node, had a big release last week adding first-class npm package support. This opens up a lot of opportunities for more easily using Deno to create, say, React, Express or Vue apps, and this post shows off how. Here’s the React bit. It really...

Four Ways to Style KendoReact Components — Whether just swapping out the primary color to closely reflect your brand or completely re-skinning the whole library with a custom design, KendoReact makes it easy to change the look and feel of our components with four different ways to style and theme.

Data Structures in Frontend React Apps in the Real World — Do you need to know your trees from your maps, linked lists, or queues to work with React? You almost certainly are, even if you’re not thinking about it, and Johannes shows off some React-themed examples of several such structures here.

The Beginner’s Guide to React Testing — Know you should be writing React tests but don’t know where to start? Then this quick seven part (don’t worry – they’re all bitesize) guide is for you.

▶  How to Build a 'Friendsgiving' App with AWS Amplify Studio — Friendsgiving (as an alternative to the traditional family Thanksgiving) has been around for a couple of years now. Isn’t it time there was an app for that?

How React Native Became Performant as Native with the 'New Architecture' — A peak under the hood and an explanation of React Native’s new architecture.

Ant Design 5.0: Enterprise-Class Design Language and React UI Library — New components, a calmer more modern styling, and improved dynamic theming options are now in this popular, mature UI suite. Already an Ant user? There’s a v4 to v5 migration guide. – Official homepage.

TwClassed: Type-Safe Library for Reusable Tailwind Components — If you’d like to build components using Tailwind CSS and have them be type-safe, this is for you. Happy with vanilla JS or in React (via a wrapper). This post explains why the author created it. GitHub repo.

Grommet: Responsive, Accessible Mobile-First Components for React — A framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. Has quite a big, bold and padded look to it.

Accessible Drag and Drop in React Aria and React Spectrum — Introducing React Aria’s new drag and drop hooks that have full keyboard and screen reader parity. Not an easy thing to pull off.

Mantine DataTable: A Table Component for Data-Rich Apps — A fully featured data table / data grid component for building data-rich applications with Mantine UI.

The Magical World of Particles with React Three Fiber and Shaders — An interactive introduction where you’ll learn all sorts about shaders and rendering particle effects with them. There’s actually a fair bit of JS here, it’s not all GLSL incantations. Does your next CRUD app need this? Probably not, but it’s fascinating nonetheless.

Is React Impacted by Meta's Layoffs? — A thread about the recently announced layoff of 11,000 employees at Meta and potential impacts on React. In short, the effect might not be large since React is so widely adopted and the team more distributed than ever. And, there's Vercel. Our thoughts are with those affected, however.

Refactoring React Code: 43% Less Code and a Better Data Structure — Often productivity can better be measured by how much code is removed rather than how much has been added! Here’s the step-by-step story of a productive refactoring journey that resulted in just that.

TanStack Router: A Fully Typesafe Router for React (and Others) — Powerful routing and first-class search-param APIs for JS/TS, React, Solid, Vue and Svelte. Built in caching, auto prefetching, and more. This comes from a good place with Tanstack really putting out some high quality tools and components lately.

GitHub's Move to Rendering with React? — Leading off with a comment from somebody claiming to be one of the engineers behind the new approach, this is a significant React endorsement. Not everyone thinks it’s an improvement (yet), though.

React Component with TypeScript — Robin continues his series on TypeScript with a (very) brief look at making a simple component type safe.

React95 4.0: Windows 95 Style UI Component Library for React — Retro is red hot and what could be more retro than a state-of-the-art React app with a Windows 95 UI? See for yourself: take a look at the components and demo.

Twix: Style React Components with Tailwind CSS — If you never liked having CSS in your JavaScript, how about Tailwind instead?

chartjs-react 3.8: A Hooks-Based Wrapper for Chart.js — react-chartjs-2 was written many years ago and has a number of legacy code issues. This package is a total rewrite using hooks, enabling your app to incorporate Chart.js functionality in a modern way.

Hadmean: Generate Admin Apps in Seconds — While still in pre-release this free, open-source, no-code admin app generator written with NextJS seems to hold some promise and the demo certainly feels fast.

Build a Desktop App in Go with Wails and React — As Electron is to Node, Wails is to Go(lang). Ish. You can build desktop apps for Mac, Linux and Windows with JavaScript in the front, Go powering the back. This is more a taster than a full tutorial, but there’s a handy repo if you want to see how the code fits together.

Rockpack 3.0: An Alternative React App Builder — Like Create React App the goal is to get project setup time as low as possible, but Rockpack holds some different opinions around how far to take things and packs in a lot of ideas including server side rendering and, now, linting.

Is Turbopack Really 10x Faster Than Vite? — The big news two issues ago was Vercel’s unveiling of Turbopack, a Rust-based ‘successor’ to Webpack boasting significant perf improvements. Vue (and Vite’s) Evan You decided to run some benchmarks and ended up pretty deep down the rabbit hole.

D-Tale: React-Based Visualizer for Pandas Data Structures — If you need to interact with Python-based data analytics processes, this mature combination of a Flask-based backend and React frontend to visualize Pandas data structures could be up your street.

A Wrapper Implementation of the SAP Fiori-Compliant UI5 Web Components — If your goal is to extend SAP functionality with React, these components deliver a user experience which reflects their Fiori technology platform.

Gatsby 5.0: The Fastest Gatsby Yet — The performance oriented React-based framework that isn’t Next.js takes another step forward with a Slice API for speeding up common updates across a site, partial hydration in beta form, a new Script component for.. loading scripts, incremental builds and deploys, and a lot more. The team has been teasing this for a while, not least by pitching...

Ultra: 'Zero-Legacy' Streaming React Framework in Deno — Built around native browser features like ES modules and import maps and very much not into bundling. This project has quite the evocative Web page.

CRACO 7.0: Create React App Configuration Override — If you still prefer good old Create React App to bigger React app building options like Next.js, CRACO keeps you in CRA world but adds a comprehensible configuration layer on top. Docs.

React Calendar 4.0: The 'Ultimate' Calendar for Your React App — A popular, simple-styled calendar component for React apps, focused mostly on letting users pick dates. Note that you’ll need to be on React 16.8+ to use v4.0 though. GitHub repo.

How to Create Images with DALL-E and React — AI-created images are all the rage on social these days. Here’s how to incorporate the capabilities of one AI offering—DALL-E—into a React app now that DALL-E has an official API open to all.