This Week In React#149: Panda CSS, React-Native 0.72, Server Actions, Isograph, Remix, Gatsby, Storybook, OpenNext, Wrap-Balancer, Docusaurus...

Search for a command to run...

Hi everyone! Krzysztof and Tomasz from Software Mansion here π It's been a fairly calm week for the React ecosystem, but not for the React Native world. Meta has made an exciting announcement about the release of React Native 0.80, where they've dec...

Hi everyone! This week is relatively calm in the React ecosystem, but we still have various interesting blog posts and releases. Maybe we'll soon get some exciting news from React Summit that's about on Friday! On the React Native side, all the devs ...

Hi everyone! I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week π. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovat...

Hi everyone! Cyril and Matthieu from Theodo Apps here π. This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting. In the React Native world, there were a few minor but interesting relea...

Hi everyone! This week, we're delighted to finally have a preview of React Server Components support in React Router. I've also found some very interesting PRs on the React repo, and give you a glimpse of what could be coming soon! The React Native e...

Hi everyone!
This week has been busier than last. In particular, there have been 2 great releases, one of them I was eagerly waiting for to hit publish!
Panda CSS: a very promising CSS-in-JS library
React-Native 0.72: great improvements, particularly those related to Metro
π‘ Subscribe to the official newsletter to receive an email every week!
Tina.io is a headless CMS for Markdown-powered sites
Editing UI for your Markdown files
UI for MDX components
Supports static (SSG) and server-side rendering (SSR)
Option for visual editing (live-preview)
Build with reusable blocks
Test a starter site
Docusaurus (Github)
Or run npx create-tina-app@latest then visit localhost:3000/admin
Watch the 4-min demo video
Segun Adebayo (creator of Chakra UI) unveils his long-awaited CSS-in-JS library (trailer). It offers very great DX, is based on modern CSS features (cascade layers), is performant (static analysis at build time, no runtime, atomic CSS)... In short, it ticks a lot of boxes and is generating a lot of interest. It integrates particularly well with React (JSX style props, React Server Components compatible, etc.), but can also be used with other frameworks.
This is a library to keep a close eye on and one that could well compete with Tailwind: it integrates better with the target frameworks and doesn't force you to use a lengthy className.
π State of React - Survey Preview: design of the new React survey is almost complete. You can have a preview and give feedback.
π Lee Robinson - "Dev server performance is our top priority": Next.js' dev server app dir has been criticised for its slowness, but Vercel plans to remedy this.
π Remix - Dev Server v2 is now stable: can be activated in v1 with a flag.
π Stack Overflow Developer Survey 2023: as expected, React remains the most widely used web framework this year and Next.js has moved up the rankings.
π¬ Gatsby RFC - Adapters: a new type of plugin to adapt the build to a deployment platform (Vercel, Netlify...) regarding caching, headers, redirects...
π Introduction to Next.js Server Actions: great overview of Server Actions in Next.js 13.4. TIL that they can be invoked from a button.
π Introducing Isograph: Robert Balicki (ex Relay) shares the POC of a new GraphQL client for React based on the concept of resolvers.
π SpiderMonkey Newsletter - Firefox 114-115: Firefox devs announced that they are working on optimisations for frameworks such as React. With Firefox 115, all browsers now support Change Array By Copy, a new ES2023 feature super useful to update your React state.
π React Admin June 2023 Update: presents a fine list of features introduced over the last 3 months.
π Ryan Bigg - Rails 7, React, TypeScript, ESBuild and View Components: explain how to manually integrate React into a Rails app. SPA mode, or with several entry points.
π Replay for Test Suites: the time-travel debugging tool integrates with Cypress and raises $13m.
π Storybook - New API references, TypeScript code snippets, and docs DX
π¦ Vercel AI SDK
π¦ React Wrap Balancer v1.0 - now uses the native CSS feature
π¦ Fresh 1.2 β welcoming a full-time maintainer, sharing state between islands...
π¦ Waku 0.12
Leverage the power of React in prototyping.
Bring React components into the design process and let designers prototype with the same elements that you use to build the end product.
Remove the disconnect between design & code and release products faster!
Try component-driven prototyping with UXPin Merge.
React Native 0.72 - Symlink Support, Better Errors, and more
After several Golden RCs, the latest version of React-Native has finally been released and will shortly be used in the Expo 49 SDK. There are quite a few improvements mentioned (DX, Hermes, performance...) and some breaking changes. I particularly like these 2 new features in the Metro bundler:
Symlinks (beta): long-awaited feature to simplify monorepo and pnpm support
Package Exports (beta): better encapsulation of libs, compatibility with the rest of the frontend ecosystem and ability to expose a specific React-Native entry point.
π Environment Variables in React Native: The Right Way: great article on typesafe management of environment variables in the Expo context.
π¬ New Renderer Interop Layer: with RN v0.72, an experimental interop layer allows legacy React-Native components to be used with the new Fabric renderer. This enables an incremental adoption of the new architecture.
π¬ Upcoming changes for libraries in React Native 0.73 - Android: you will need to add a namespace to the Gradle build.
π React-Native macOS 0.71 - New Architecture on init template
π 1/5 of the top 100 Medical apps in the App Store use React Native
π¦ react-native-colo-loco 1.1 - Colocate native and js code
π¦ Maestro 1.29
ποΈ RNR 269 - React Native VisionCamera v3 with Marc Rousavy
π§βπΌ Passionfroot - Senior Full-stack Engineer (Remix) - β¬160k+, Berlin/remote
Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.
π§βπΌ Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly
Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!
π§βπΌ G2i - 100% Remote React Native Jobs
We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.
See ya! π