React Newsletter #269

Next.js 11, Demystifying styled-components, and a new design and coding environment for React components that runs in the browser


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

Next.js 11 is released

Highlights include:

  • Next.js Live -- A new, open-source development environment that enables real-time, collaborative coding in the browser. It uses Wasm, ESM, Service Workers, and a bunch of other stuff to generate a live URL (without a build step) that you can share with anyone -- so your whole team can edit, chat, draw, and see updates happen in real time.

  • Conformance -- Google's new system of "strong defaults and actionable rules" for improving performance out of the box with frameworks like Next.js.

  • Better, faster dev experience -- Startup time improved by 24%, processing time for changes was reduced by 40%, and the next/image component got some big improvements.


Articles

Demystifying styled-components

Josh Comeau pops the hood on styled-components and teaches you how it works by walking you through the process of building your own mini-clone of 💅 styled-components. "By demystifying styled-components, we'll be able to diagnose and fix weird CSS issues with way less frustration."

Using Next.js and Vercel to instantly load a data-heavy website

In this article, Seif Ghezala talks about the performance problems his team faced when building an energy news aggregator site that showcases thousands of posts daily and how they leveraged Next.js and Vercel to solve them.

What's new in React 18?

Shruti Kapoor writes about how the major theme of React 18 is to make the UI more performant by removing janky user experiences by introducing out of the box features and improvements powered by "concurrent rendering." She goes over the main new features that will be coming out and how they help support this goal.

A better React 18 startTransition demo

Check out this article from Swizec Teller if you're interested in seeing a demo of startTransition (a new React 18 feature that's still unstable) in action.


Tutorials

Develop & test React components in isolation

In this tutorial, Dhaiwat Pandya walks you through the process of crafting an isolated, independent & reliable Image component for React by leveraging tools like Storybook, Testing Library and Jest.

8 Basic and Advanced React Router Tips

Martin Novak covers the basics as well as some advanced tips that include 404 pages, redirects, asynchronous pages, and a site map. He discusses how he has used these techniques to build all of his websites, including his current project.


Jobs

Full Stack Engineer (remote + occasional epic hike) -- Rupa Health

Rupa makes lab testing simple. We're taking the archaic processing of ordering lab work and bringing it into the modern age. Come join us as the 5th engineer in our early team. You'll be a key part of setting the direction for the engineering culture and will own major aspects of the product. Rupa is a remote-first company, but we love getting the team together a couple times a year for some beautiful outdoor experiences. We're growing rapidly and would love to have you be a part of this journey with us! 💙


Projects

Utopia

A slick design and coding environment for React projects and components that runs in the browser. It combines VSCode with a design and preview tool, and full two-way synchronisation: design and code update each other, in real time. And unlike any design tool out there, it uses React code as the source of truth. Created by Balazs Bajorics and others.

Elementz

A new React component library for building modern applications easily and quickly.

Storybook Vite builder

A new, community-led project that enables Storybook 6.3 to support Vite, one of the hottest new build tools out there.


Videos

What You NEED To Know About React 18

In this 15-minute video, Harry Wolff gives a fun, accessible overview of all the new stuff that's coming in React 18.

JWT Authentication Tutorial - Node.js and React

This hour-long video covers what JWT is and how to use it in React and Node.js. It goes over JWT Authentication and authorization for beginners using the refresh token and JWT Login.

made with ❤️ by ui.dev