Bookmarks (159)

▶  From 0 to Production - A Modern React Tutorial — I’d be surprised if you’re not familiar with Theo, but if not, let’s just say he’s a popular developer YouTuber 😉 He may become even more popular thank to this video which, over three hours, covers modern React app development, complete with server components, Next.js, TypeScript, the Drizzle ORM, pnpm, and shadcn/ui.

Rehackt: React Wrapper to Hide Hooks from the RSC Compiler — Intended for library developers, this invisibly wraps react so that you’re able to use shared imports with in server-side Next.js code without throwing an error to your users. Has recently blown up in popularity due to being used by Apollo Client.

📞 react-phone-number-input: International Phone Number Input — Comes in two variants with and without a country selector. The homepage is packed with demos. Repo.

ReScript 11.1 Released — Once known as BuckleScript, ReScript is a heavily OCaml-inspired, typed language that compiles to JavaScript and even has a JSX transform built into the language. Traditionally this JSX support was targeted solely at React use cases, but now works with Vue, Preact, and other approaches too.

Vision Camera 4.0: Advanced Camera for React Native Apps — A powerful camera library for capturing both photos and videos, but also supporting QR/barcode scanning, different resolutions, aspect ratios, FPS, and even frame processors for doing custom things. v4.0 now lets you draw directly onto a frame using React Native Skia. (Homepage.)

React UI Component Libraries: A Large Roundup — If you’ve ever found yourself wondering just how many UI libraries are out there for React, this article goes a long way to enumerating and describing what’s currently available.

Puck: A Self-Hosted Visual Editor for React Apps — We mentioned this several months ago but it’s had a lot of updates since, including supporting viewport switching (where you can render a Puck preview inside an iframe and get full media query support). GitHub repo.

Building an Interactive 3D Event Badge with React Three Fiber — A tutorial fresh out of Vercel covering how they implemented the virtual lanyard for their Vercel Ship conference site.

Getting Your Codebase Ready for React 19 — Is your app ready for what’s coming up in React 19’s release? A quick look at some of the anticipated changes so far.

Start for Free Today! Build Real-Time Video and Chat in Days — Ready to integrate Zoom/WhatsApp style video experience into your React application? Learn how Stream’s Video API can help you get started.

React Native 0.74 Released — A significant release of the cross-platform native app framework. It includes the Yoga 3.0 layout engine, bridgeless mode becomes the default if using New Architecture, and Yarn 3 is the default package manager for new projects.

CSS in React Server Components — An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components, including what some of your options are and what’s coming in future.

semantic-autocomplete: A Fast Semantic Search Component — An interesting proof of concept where you can let users search by meaning, not just by matching characters. There’s a live demo here. It uses a ~20MB machine learning model (small by ML standards) on the client side to make it work quickly.

React Query Builder 7.2 — A fully customizable query builder component, along with utility functions for importing from, and exporting to, various query languages like SQL, MongoDB, etc.

Qwik vs. Next.js: Which is Right for Your Next Web Project? — A point by point faceoff and why the author thinks Qwik takes the gold.

Next.js 14.2 Released — As it approaches its eighth birthday, Next.js has passed 1 million monthly active developers and landed this release with support for using Turbopack to improve local development, memory usage, CSS and caching optimizations, improved error messages, and more. It also seems Next.js 15 is on the horizon to coincide with React 19.

Lydia Hallie Tests Your JavaScript Knowledge — Challenge your core knowledge with 50 interactive quiz questions covering topics like the event loop, scopes and closures, classes and prototypes, garbage collection, and more. After each question, you'll get an in-depth visual explanation from Lydia to deepen your understanding of fundamental JS concepts.

Wedges: A Collection of UI Components for React — Built and used by the folks at Lemon Squeezy, this is a well thought, aesthetically pleasing set of Radix UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.

TinyBase 4.8: A Reactive Data Store for Local-First Apps — A data store (for both key/value or tabular data) that can connect together data stores and act as a reactive backend to your apps. Basically, if you want less headache with the backend of your app, this is for you — and it includes bindings to React and pre-built reactive components, too. The demos show...

React Server Components in a Nutshell — A quick overview of RSCs that’s not focused around Next.js! Paul compares the approach taken by several frameworks before sharing his broader thoughts on the technology and why the small Waku framework is worth a look.

Introducing Waku's “Pages Router” — Waku (already mentioned above) is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Product for Engineers is PostHog’s newsletter helping engineers improve their product skills. Subscribe to get curated advice on building great products, lessons (and mistakes) from building PostHog, and dive into the strategies of top startups.

Setting Up Storybook for React Components — How Dolt (love that name!) set up Storybook for their React component library including the use of Chromatic to test and review components.

Docusaurus 3.2: React + MDX Powered Site Builder — If you’ve ever seen a smart, elegant docs site, there’s a 61% chance it’s powered by Docusaurus (citation needed) .. 😅 Maybe not quite, but if it’s good enough for React Native, Relay, Ionic, Jest, and many others, it’s good enough for us. v3.2 ups the ante with significantly faster site builds and a faster...

Yet Another React Lightbox — Add a lightbox component to your projects “in minutes” – there are several examples to try, as well as a playground with lots of adjustable settings!

⏱ React-Clock: An Analog Clock Component — There’s a beautiful Swiss train station style example on the homepage, but you can ultimately customize the clock to your liking.

form_props: The Power of Rails Forms Now in React Too — One for those working with React from Ruby on Rails. GitHub repo.

Preview.js: Preview UI Components Instantly in Your IDE — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.

React Server Components Now in RedwoodJS — If you thought RSCs were a Next.js phenomenon, think again. Implementations are popping up all over, such as in Waku and now RedwoodJS, a full-stack framework founded by GitHub co-founder Tom Preston-Werner that leans on React, Prisma and other technologies to provide a great DX ‘out of the box.’ This post digs deep into how RSCs are...

use-local-storage-state: Like useState() But for Local Storage — A hook that persists data in localStorage while having an API similar to useState().

📺 react-tv-space-navigation: Spatial Navigation for TV Apps — “If you want to develop a TV app for AndroidTV + tvOS + web TV devices, then this package will be helpful. The library is based on LRUD, which is a UI-agnostic lib that represents spatial navigation.”

use-hot-module-reload: Trigger a Callback After Hot Module Reloading — A hook that triggers a callback after hot-module reloading has been performed (for any module, not just the one it was used in) – works with Webpack and Vite.

react-resize-aware: A Hook That Listens to Resize Events — Detect resize events on elements without relying on intervals, loops, DOM manipulation detection or CSS redraws. v4.0 now supports Vite.

next-intl 3.10: Internationalization (i18n) for Next.js — If you want to internationalize your Next.js app, this is for you — you get a hooks-based, type-safe API with i18n and l10n features, internationalized routing, and React Server Components support. Apparently the main Node.js site uses it, too.

React Horizontal Scrolling Menu 7.0 — A customizable horizontal scrolling menu component that’s responsive and can support numerous control approaches via scrollbars, touch, mouse wheel, etc. There are plenty of Storybook examples.

Using ReactToPrint to Generate a Printable Document — Use ReactToPrint to add a print feature to your React app while preserving your document’s neat, consistent appearance.

How to Build a ChatGPT-a-Like with Clerk and AWS Bedrock — A thorough walkthrough whose focus is on the UI rather than the LLM/AI stuff behind the scenes which is taken care of by Amazon’s Bedrock service. Clerk handles the auth, while Next.js forms the base of the app.

Deploying a React SPA and Python Backend Together on Azure — Last week, we saw how to roll out a full stack React app on Azure using Azure Functions, but what if you want something more traditional/monolithic like a Python-powered backend? Azure App Service can help with that.

Auth, Built for Devs by Devs — The best frontend language deserves the best auth service. Add MFA, SSO, biometrics and advanced threat detection with just a few clicks. Find out for yourself using our easy quickstart guide.

Looking Into the Type System of the React Compiler — If you’re not merely content to wait to see what the React Compiler will bring, but want to dig into the details under the hood, Sathya is here for you.

MistCSS: Write React Components Using Only CSS — CSS-in-JS is old news.. what about JS-from-CSS? This new approach provides a way to compile CSS-only components into TypeScript for use with React – it’s early days, but an intriguing idea, at least. (Basic example.)

TanStack Virtual 3.2: Headless UI for Virtualizing Large Element Lists — Supporting TypeScript, JavaScript, React, Solid, Svelte and Vue, this provides a general way to build smooth 60fps experiences for large numbers of elements while retaining control over markup and styles. Not just for grids, it can tackle vertical and horizontal lists generally too.

📊 Spectacle: Build Presentations with React and JSX — A React.js based library for creating sleek presentations using JSX syntax.. animations, slide-ins, grids, columns, it’s all there! The homepage has a demo showing it off. GitHub repo.

react-json-view-lite: Render JSON as a Tree — A lightweight component for visualizing JSON in a way that retains its basic formatting and JSON-ness but that lets you collapse or expand arrays and objects and see the structure more easily. Storybook demos.

React Content Loader 7.0: Loading Content Placeholders — A way to easily create animated ‘skeleton’ components, giving a wireframe of what’s going to appear once everything has loaded.

React Data Grid: A Fast Excel-Style Data Grid Component — A fantastic live demo that shows off all of this component’s unique features, from grouping rows and columns to handling a million cells without slowdowns. Works with React 18+. GitHub repo.

Creating an Interactive 3D 'Bulging Text' Effect with React Three Fiber — At the risk of seeming a little gimmicky, this is certainly a feature that would make your page stand out.. almost literally!

Building a Full-Stack React App with Azure Static Web Apps and Managed Functions — Azure Static Web Apps coupled with Azure Functions (Azure's serverless platform) can get you all the way to a full-stack React app without having to worry about managing infrastructure.

Building a React Login Page Template — This guide shows how to build a React login page and integrate it with an Express auth server using JWTs. It introduces Clerk as an easier option with pre-made UI components for authentication setup.