React Newsletter #289

React Router v6, Shopify's new React framework, and how to use Next.js middleware


This week’s issue is sponsored by Progress KendoReact.

Generating PDF from HTML in React: An Example of Exporting Data Grids.

This article takes you on a deep dive into the PDF rendering labyrinth -- in the safe hands of a guide. Read the blog post to learn how to export advanced React UI components such as the KendoReact Data Grid and TreeList into PDF, with the help of plenty of examples.


News

React Router v6 released

It's been almost two years (and one pandemic) since the first React Router v6 alpha came out, but the stable release is finally here!

  • Rewritten in Hooks
  • Nested routes
  • Automatic route ranking
  • Relative routes

Hydrogen -- Shopify's new React framework

A new React-based web development framework to build custom storefronts powered by Shopify -- now available in developer preview. The big innovation here is how Hydrogen combines Streaming Server Side Rendering with React Server Components so that your storefront can have a fast initial load and efficient, component-level updates once the page after the page is loaded.

Check out the 4-minute demo video to see it in action.


Articles

How to Use Next.js Middleware

Vercel Edge Functions (announced in Next.js 12) allow for super speedy edge-optimized functions and can also be used as helpful Next.js middleware functions. In this article, Chris explains what they are & how to use them and walks through a few examples.

A Quick Intro to Elm for React Developers

Elm is fairly niche (but well-loved) programming language designed for creating frontend applications that offers an alternative to JavaScript libraries like React. This article, featured on Theodo, provides a helpful intro to Elm for those who are familiar with React.

React Architecture for Enterprise Application

Nilanth writes about how the improper structuring of your React app can negatively affect its scalability and maintainability -- and demonstrates one approach for structuring an enterprise-level app that can scale effectively.

React Split Components: A new way of Function Components without Hooks

In this article, Lee So writes about what he sees as the problems with writing function components and a new approach for solving those problems.


Jobs

React or Full-Stack Engineer at Fully Remote US-based Tech Consultancy

Contract opportunity to start, which may turn into employment for US-based applicants. Work on a variety of projects in different industries, and enjoy work-life balance, using modern tools and technologies, React, Node.js, GraphQL APIs, React Native, and solving complex problems while interacting directly with our clients.


Tutorials

Build a Stunning Portfolio Site with React

This tutorial (and 3.5-hour long video) by Code Bucks walks you through how to build a unique portfolio with various design and animations using React and other tools.


Projects

Suspend React

This library is created by Poimandres, and it integrates your async ops into React suspense. Error-handling & loading states are handled at the parental level. The individual component functions similar to async/await in Javascript.

Bulletproof React

A simple, scalable, and powerful architecture for building production ready React applications. We featured this tool when it was first released a few months back, but it's been getting a lot of buzz again, so we wanted to make sure you were aware of it. Created by Alan Alickovic.

React Awesome Query Builder

A user-friendly query builder for React that also supports Material UI.


Videos

React Context -- Using React Context for global state

This 30-minute video is a helpful intro to React Context and compares/contrasts it with Redux for managing global state.

How to Code an Infinite Scroller with React Hooks

This 17-minute video by Suboptimal Engineer goes over how to build infinite scroll with React Hooks -- a common interview question and a helpful skill to have.

made with ❤️ by ui.dev