React Newsletter #312

Wisely designing React components, a new rich text editor framework, and React Redux v8


This week's issue is sponsored by Stream.

Stream is the easiest way to build chat apps. See for yourself with this React Chat Tutorial that walks you through how to quickly build a flexible chat experience using Stream's API and their Stream Chat React components.

👉 Check it out.


Articles

Wisely Designing your React Components

In this article, Matti Bar-Zeev (a senior front-end engineer and web architect) writes about his approach to component development -- which includes extracting it into modular parts, explaining why each exists and how they all fit together at the end to form a solid yet flexible and maintainable result.

Flexible Design System Components With "as/is" Props

Lloyd Atkinson writes about one particular feature of most high quality design systems -- a way of enabling composition of components and flexbile but correct semantic usage of HTML elements.

React Forms: Formik vs. Hook-Form vs. Final-Form

This article compares and contrasts three of the most popular React Forms with pros, cons, and code samples.


Tutorials

JavaScript Testing Tutorial

This huge, 10-part tutorial series by Marcin Wanago covers most of the core topics of testing JavaScript and React apps -- unit testing, testing React components, testing props, advanced mocking, end-to-end testing, and more.

How To Build an Accessible React Data Grid

How do you make a React table component accessible? This blog post takes you through comprehensive tutorial by one of KendoReact's most experienced software engineers and accessibility experts. [sponsored]

Make line breaks work when you render text in a React or Vue component

Cassidy Williams shares a couple of approaches to solving this problem with some helpful code snippets and visuals.

Automated React Accessibility Checks

It's easy to forget about accessibility, but this brief tutorial by Carl Rippon goes over how to use a couple of tools that will give conduct automated accessibility checks for your React app.


Jobs

Yeti Labs is looking for Frontend (React + Typescript) developers

Yeti Labs is a human-centered frontend studio designing and building web apps for DeFi protocols. We love UI animations, innovative UXs, best practices, reusing our code, improving our workflow and learning new things. Come join our crew as we solve interesting challenges while having fun.


Projects

Lexical

An extensible rich text editor framework that's a lot faster and more accessible than draft.js. It comes with React bindings out of the box, but can be used with any framework. Created by a small team at Meta (including Dominic Gannaway, a former React team member). We wrote a lot more about Lexical and gave Dominic a fun new nickname in yesterday's issue of Bytes.

React Redux v8

This is a big release for the official React bindings for Redux. The entire codebase was completely rewritten in TypeScript, there's a newly modernized build output, and it's now compatible with React 18. Thanks to Mark Erikson and the team 🙏.

FortuneSheet

An online spreadsheet component library that provides out-of-the-box features just like Excel. It makes it easy to build a feature-rich, easy to configure online spreadsheet.

React-admin v4

This popular React library for building browser-based admin apps just released v4 after six months of intense refactoring in order to "modernize the inner workings of the library" and improve the developer experience.

made with ❤️ by ui.dev