React Newsletter #271

SolidJS 1.0, How to organize a React app, and the magic of react-query and Supabase


This week's issue is sponsored by Clerk

With Clerk, you can add <SignUp/> and <SignIn/> to your React application in minutes. Clerk comes with beautiful, high-conversion UIs, multi-factor authentication, device management, and much more.

👉 Try it out for free


News

SolidJS releases v1.0

SolidJS is a "declarative, efficient and flexible JavaScript library for building user interfaces" that's heavily inspired by React and Svelte. It supports most React features like Fragments, Portals, Context, Concurrent Rendering, SSR & Hydration, and more, but it doesn't have a virtual DOM.

We wrote a lot more about it in yesterday's issue of Bytes – sign up if you want to read more long-form stuff like this.

Enzyme.js is being deprecated

In this article, Piotr Staniów writes about how the React world has changed in the last five years and why Enzyme should be deprecated in favor of React Testing Library.


Articles

An overview of React State Management Techniques in 2021

In this article, Amo Moloko covers three popular state management techniques -- Apollo’s Local Cache, Recoil, and Redux. For each tool he provides an overview, code walk-through, and some additional thoughts along with a rating to measure if he would add it to his frontend stack.

React Architecture: How to Structure and Organize a React Application

Tania Rascia writes about what she considers to be an intuitive and scalable system for organizing large-scale production React applications so that it's easy to use, understand, and extend.

Designing a Dataflow Editor with TypeScript and React

In this article, Joel Gustafson the tradeoffs and challenges that he and his team encountered while building a medium-complexity React component in TypeScript.


Tutorials

The magic of react-query and Supabase

Ankit Jena demonstrates how to make an app where you can search movies from the TMDB API and add it to your profile as recommendation using Next.js, react-query, Supabase, and Tailwind CSS.

React SEO: How to Build Search-Friendly Pages in React

In this tutorial, Rafael Quintanilha teaches you on how to build SEO-friendly pages using React. He also show you how these methods can be applied to dynamic content with the help of a good React CMS.


Jobs

Hiring Full Stack Engineers ($120k-$175K+, equity, remote first)

Come work with an amazing team of engineers building the future of lab testing! Rupa Health is looking to hire a few of the absolute best React developers on the planet. If you want to be paid extremely well to do some of the best work of your career, come apply or shoot an email to our Head of Engineering -- ben@rupahealth.com.

Rupa Health is a San Francisco health tech company that raised a $5MM seed round. We've grown from a team of 3-30 people within the last year & are looking for more amazing talented people to help us grow even bigger!


Projects

RisXSS

A single ESLint rule for eradicate all XSS flaws of your React or Vue application. Created Clément Escolano.

Vechai UI

A collection of accessible React UI components with a built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui. Created by Vechaiui.

React Facade

An experimental library that uses Proxy and TypeScript to create a strongly typed facade for your React hooks. It's dependency injection for hooks. Created by Gabe Scholz.

use-color

A powerful color hook that allows you to easily parse and stringify. Plus there's strict type checking at compile time.

Windy

A React UI Kit based 100% on Tailwind CSS. Created by weBeetle.


Videos

E-Commerce Integration Apps using Next.js & Saleor GraphQL API

In this hour-long stream, Zaiste live builds an e-commerce integration app for handling abandoned carts using Next.js and Saleor API with Lee Robinson from Vercel and Patryk Zawadzki from Saleor.

made with ❤️ by ui.dev