~reactstatus | 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.

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.

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.

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.

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.

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.

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.

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.)

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.

📞 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.