#​385 — May 15, 2024

Read on the Web
Together with  Fusion Auth
React Status

Bulletproof React: A Scalable Architecture for Production-Ready Apps — An opinionated guide on how you could structure a large scale React app, should you be lacking for inspiration. A long standing resource that’s just had a major update and deserves another look.

Alan Alickovic

🕹️ Athena Crisis: A High Quality, React-Powered Game — A commercial, turn-based strategy game available on the Steam Store, but now with an open sourced engine and tooling. Notably, the game is published by Null, an indie game publisher founded by GitHub cofounder Chris Wanstrath.

Christoph Nakazawa

Best Practices for OAuth in Mobile Apps — Supercharge your React apps with OAuth! Learn how to build secure sign-on flows and accelerate your dev process. This guide covers best practices for handling protected tokens and platform-specific guidelines, ensuring robust identity management.

FusionAuth sponsor

IN BRIEF:

Why React Query? — Starting from first principles, and a reminder of what React itself is, this is a neat, highly accessible exposition of why React Query (a.k.a. TanStack Query) exists and what it does.

UI․dev

▶  Building an Issue Tracker App (That Works Offline) with React and ElectricSQL — Kelvin is great at this stuff. ElectricSQL provides a way to build reactive, realtime local-first apps atop Postgres. (75 minutes.)

Kelvin Omereshone

Build a Real-Life, AI-Powered Project with Next.js and Strapi — Uses the Strapi open-source, headless CMS. We linked to this a few months ago, but the whole ten part series is now available.

Paul Bratslavsky (The Strapi Blog)

📄 Build Your Own React.js in 400 Lines of Code – A learning exercise. Zachary Lee

📄 A Nice Way to Render Markdown in React Apps – A ‘short snapper’ on how to approach this common task. Jordan Eldredge

📄 Exploring a 3D Text Distortion Effect with React Three Fiber Nine / Codrops

📄 Path to a Clean(er) React Architecture: API Layer and Data Transformations Johannes Kettmann

📄 How to Create a React Native Splash Screen Lucas Garcez

🛠  Code, Tools & Libraries

React Google Maps 1.0: Components and Hooks for Google Maps — Dropped to coincide with Google I/O 2024, this provides a way to integrate Google’s Maps API into a React app, complete with components to lay down markers, drawing over maps, and more. GitHub repo.

OpenJS Foundation

ReacType 21.0: Visual Prototyping Tool for React Developers — A prototyping tool to flesh out React apps always with an eye on the visual aspect, including a drag and drop canvas interface and real-time component previews.

ReacType Team

📰 Classifieds

Your fastest path to production. With Render you can Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Secure your React app. Learn how Cerbos simplifies authorization.

❤️ #1 Rated Headless React CMS. Build a full website, blog, app backend, marketplace or portal with our API. Get up & running in 2 min >.

Ink 5.0: Build Interactive CLI Apps using React — A terminal-based React renderer so you can build command line apps using React-style components. While it’s a major release, there’s nothing new - the version number has been updated to reflect that Node 18+ is now a requirement.

Vadim Demedes