---
title: "Designing circuit boards with React"
publication: "React Status"
issue: 387
published_at: "2024-06-05"
canonical_url: "https://react.statuscode.com/issues/387"
---

Plus Next.js 15 RC, a React Conf recap, and a handy React Native boilerplate app. |        

#​387 — June 5, 2024 

[Read on the Web](https://react.statuscode.com/issues/387)   

🫣 We took a break last week, but forgot to notify you in advance - sorry! You didn't miss anything, and we're catching up with the past two weeks today. :-)
__
_Your editor, Peter Cooper_ 

Together with [![Imagekit\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_290,h_100/e_make_transparent/co_white,e_outline:7/srf0buoihyfdsnjkebof.png)](https://imagekit.io/blog/react-video-player/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Mediapromotion_Q124&utm_term=ReactStatus&utm_content=Primary_listing)  React Status  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/pnrldfsayvo9a33xzq4v.jpg)](https://martinfowler.com/articles/data-fetch-spa.html)  

[Data Fetching Patterns in Single-Page Applications](https://martinfowler.com/articles/data-fetch-spa.html) — With a level of depth you’d expect on Martin Fowler’s blog, Atlassian’s Juntao Qiu walks through five different patterns to consider when fetching remote data, using a realistic React-based scenario to show them off. 

Juntao Qiu and Martin Fowler   

[Next.js 15 Release Candidate](https://nextjs.org/blog/next-15-rc) — The popular React meta framework gets ready for a major new release with a RC giving you an opportunity to experiment with React 19 (and React Compiler) support, executing code _after_ a response with `next/after`, and a few potentially breaking changes. 

Delba de Oliveira and Zack Tanner   [![\](https://copm.s3.amazonaws.com/1ad71115.png)](https://imagekit.io/blog/react-video-player/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Mediapromotion_Q124&utm_term=ReactStatus&utm_content=Primary_listing) 

[Here's a Simple Video API for Your React Applications](https://imagekit.io/blog/react-video-player/?utm_source=Cooperpress&utm_medium=email&utm_campaign=Mediapromotion_Q124&utm_term=ReactStatus&utm_content=Primary_listing) — Learn to integrate a video player into your React applications! Know about HTML5 video tag and using Video.js for Adaptive Bitrate Streaming. Crop, resize & use overlays on your video with ImageKit. Deliver an optimized visual experience every time. 

ImageKit sponsor   

[A Recap of React Conf 2024](https://react.dev/blog/2024/05/22/react-conf-2024-recap) — React Conf 2024 was three weeks ago now, but the effects of the things unveiled there (e.g. [React Compiler](https://react.dev/learn/react-compiler)) are still being felt. If you didn’t attend or watch the videos yet, Ricky offers a good guide to the essentials with direct links to the relevant times in the livestreams. 

Ricky Hanlon   

💡 There's [a similar roundup of Vercel Ship 2024](https://vercel.com/blog/vercel-ship-2024)too, naturally focused more around new Vercel and Next.js features.  

**IN BRIEF:** 

- ⭐ [tscircuit](https://tscircuit.com/) is an interesting approach to designing and laying out electronic circuit boards using a React-based approach.
- 🎂 [React turned 11 years old](https://x.com/WebDesignMuseum/status/1795656308311379996) last week!   

[Translating React Apps with i18next and Testing Them with Playwright](https://wanago.io/2024/05/13/react-internationalization-end-to-end-tests-playwright/) — A twofer: a step-by-step tutorial on how to use _[i18next](https://www.i18next.com)_ to create a multi-lingual version of your app _and_ the mechanics of testing it with _[Playwright](https://playwright.dev)_. 

Marcin Wanago   

▶[Build a 3D Node Based Workflow with React Three Fiber and React Flow](https://www.youtube.com/watch?v=5M3q5rD8kNI) — A helpful tutorial if you want to learn the capabilities of the [React Flow](https://reactflow.dev) component for building node-based editors and interactive diagrams. 

Mohit Kumar Toshniwal   

📄 [A Quick Look at Some Features in the React 19 Beta](https://dev.to/zacharylee/react-19-beta-release-a-quick-guide-3j32) Zachary Lee 

📄 [Build a Modern Authenticated Chat Application with Next.js, Ably, and Clerk](https://clerk.com/blog/authenticated-next-chat-app-with-ably-and-clerk) – A particularly thorough walkthrough. Alex Booker (Clerk) 

📄 [How to Create a Modal in React with HTML's `<dialog>`](https://spacejelly.dev/posts/how-to-create-a-modal-in-react-with-html-dialog) Colby Fayock 

📄 [It’s Not Just You, Next.js is Getting Harder to Use](https://www.propelauth.com/post/nextjs-challenges) Andrew Israel 

📄 [Component Testing with SafeTest vs. Cypress vs. WebdriverIO](https://bromann.dev/post/safetest-vs-cypress-vs-webdriverio/) Christian Bromann  

🛠 Code, Tools & Libraries 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/sgo4hnlcu1i2h4ypmuzd.jpg)](https://thecodingmachine.github.io/react-native-boilerplate/)  

[React Native Boilerplate 4.2: A Template for RN Apps](https://thecodingmachine.github.io/react-native-boilerplate/) — A React Native template app for getting started quickly. It offers an optimized architecture for robust cross-platform development, separating UI from business logic, and is [well documented](https://thecodingmachine.github.io/react-native-boilerplate/docs/getting-started) too. [GitHub repo.](https://github.com/thecodingmachine/react-native-boilerplate) 

TheCodingMachine   

[React-PDF 9.0: Display PDFs in a React App](https://projects.wojtekmaj.pl/react-pdf/) — Render PDFs in your app as easily as images. [v9.0](https://github.com/wojtekmaj/react-pdf/releases/tag/v9.0.0) is noteworthy as it updates the underlying PDF.js engine to a version not susceptible to [a recent JS execution vulnerability.](https://github.com/advisories/GHSA-wgrm-67xf-hhpq) 

Wojciech Maj       

📰 Classifieds   

[Fine-grained access controls in React](https://bit.ly/3wtwR9N). Easy to implement and manage with Cerbos. Check out the guide to [learn more](https://bit.ly/3wtwR9N). 

--- 

🔨 [How to build a portfolio website with React](https://buttercms.com/blog/build-a-portfolio-website-with-react/). Step by step guide with links to the tools and examples of all the code needed. 

--- 

🗝️ [Userfront](https://userfront.com/?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=classified_listing&utm_content=transformational) is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers. [Try it for free](https://userfront.com/?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=classified_listing&utm_content=transformational).      

[Storybook 8.1: It's Storybook, But Better](https://storybook.js.org/blog/storybook-8-1/) — A big update for the UI component-based ‘frontend workshop’. 8.1 introduces a new UI for creating and editing stories, type-safe module mocking, a way to unit test React Server Components, and more. 

Michael Shilman   

[Fontsource: 1700+ Open Source Fonts in npm Packages](https://fontsource.org/) — On the surface, it’s a handy way to browse and filter over a thousand different Web fonts (from Google Fonts as well as other sources), but go a step further and you can integrate fonts into your apps in a version-locked manner by way of npm (or just grab a ZIP, if you prefer). 

Fontsource   

[React Glow: Add a Pointer-Tracing Glow Effect to Components](https://github.com/codaworks/react-glow) — You can see it in action [on this site](https://codaworks.com/). The styles for the “glow” can be customized in various ways including options for Tailwind or plain CSS. 

React Glow   

- [Wouter 3.2](https://github.com/molefrog/wouter) – Minimalist router for React & Preact. You can now [use regular expressions](https://github.com/molefrog/wouter/releases/tag/v3.2.0) to define custom route patterns too.
- [React Testing Library 16.0](https://github.com/testing-library/react-testing-library) – DOM testing utils that encourage good practices.
- 🦖 [Docusaurus 3.4](https://docusaurus.io/blog/releases/3.4) – The fantastic site / docs site framework.
- [react-number-format 5.4](https://github.com/s-yadav/react-number-format/releases/tag/v5.4.0) – Input-formatter library for numbers.
- 📊 [visx 3.11](https://airbnb.io/visx/) – Popular visualization components by Airbnb.
- [Rockpack 4.3](https://github.com/AlexSergey/rockpack) – React app starter/generator.
- [Ink 5.0.1](https://github.com/vadimdemedes/ink) – Use React to build CLI apps.
- [Astro 4.9](https://astro.build/blog/astro-490/)         

Curated by Peter Cooper and Terence C. Gannon. 

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom