React Newsletter #281

Learning Jotai with the 7GUIs task, file-based routing with React Router and Vite, and React vs. SolidJS


This week’s issue is sponsored by Progress KendoReact

Generating PDF in React: As Easy As 1-2-3!

A popular question in the React community is how to export HTML, or parts of your React application, to PDF. Carl is here to tell you that thanks to KendoReact, exporting any content in our React apps to PDF is as easy as 1-2-3!

👉 Check out the tutorial.


Articles

Learning React State Manager Jotai With 7GUIS Tasks

In this article, Daishi Kato re-created the 7GUIs task challenge with jotai, a new primitive and flexible state management solution for React. The tasks are organized from basic tasks to advanced tasks, and you will get to see how they are implemented firsthand.

File-based routing with React Router (and Vite)

Omar Elhawary writes about how he’s using React Router with Vite to build a file-based routing for client-side React apps. (Isaiah 11:6)

How to use React Context Like a Pro

Using React's Context API is often very useful. In this article, Pierre Ouannes shares several patterns that you should regularly use in combination with contexts in React -- and many of these patterns aren't very well known. By the end of this article, he promises that you'll be using React Context like a pro.

Event Bubbling and Event Catching in JavaScript and React – A Beginner's Guide

Mariya Diminsky created this beginner-friendly tutorials to help you understand event bubbling and event catching like a pro. You'll learn about event propagation and how it works in JavaScript and React in a clear and comprehensible way.


Tutorials

Virtualizing Large Data Lists with react-window

In this tutorial, Ikeh Akinyemi covers how to render large amount of data, either from an external API or a dummy data file within your application. He'll use a React library, react-window, to render this large amount of data, then show you how to build a simple e-commerce app displaying a list of products.

Using WebSockets with React

Murat Yüksel covers the basics of how to use WebSockets with React by walking you through building a very simple, one-page React application that takes continuous-data from bitstamp.net and displays it on the page. The data will be changing all the time.


Projects

Courier’s React Toast and Inbox Components

Courier is a notification management platform and API that enables multi-channel notifications at scale. Their new toast and inbox components are now able to be targeted by the Courier Push Provider WebSocket. [Sponsored]

Nice Modal

This is a small, zero dependency utility to manage modals in a natural way for React. It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id. Created by the developers at eBay.

Radix Primitives now in Beta

Unstyled UI components for building high-quality, accessible, React-based design systems and web apps that just released their beta. It includes 23 components, full-typed APIs, and more.

react-web-editor

react-web-editor is a WYSIWYG editor library that lets you can resize and drag your components. It also has a simple rich text editor.

Colorwaver

A fun app to detect colorwaves (swatches/palettes) in the real world -- powered by VisionCamera and Reanimated and written in React Native.


Videos

ReactJS vs SolidJS

In this 36-minute video, Jack Herrington compares and contrasts React to the upstart newcomer SolidJS in an eCommerce showdown.

React with Redux Toolkit Crash Course

This one-hour video promises to teach you everything you need in order to utilize Redux Toolkit inside of your React application.

made with ❤️ by ui.dev