#​237 — May 5, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday

Mantine: A New React Component Library — An MIT licensed, TypeScript-based collection of around 60 components and hooks with native dark theme support and a focus on usability and accessibility. Plenty of documentation and examples - we like it. Oh, and they work with Preact too.

Mantine Team

▶  A Comparison of Five React Frameworks — In just 26-minutes, this video provides most of the information required to pick the right React framework from five top players in the space: CRA, Gatsby, Next.js, Blitz, and Redwood.

Leigh Halliday

Book a Demo. Ship Fast. Rest Easy. LaunchDarkly — Testing in production? It's scary until it's not. Get total control of your code to ship fast, reduce risk, and reclaim your nights and weekends.

LaunchDarkly sponsor

Next.js 10.2 — The Next.js team at Vercel has just released 10.2 and the advertised improvements exceed expectations for a minor release: (up to 60%) faster builds, faster refreshes and faster startup, along with improved accessibility and more flexible redirects and rewrites. Not to play favorites, Gatsby also got a release in the shape of Gatsby 3.4.

Vercel

Ten Apps That Use React Native — Given their corporate tie-in, it should come as no surprise that the Facebook and Instagram mobile apps use React Native. The other eight names on the list, however, may come as more of a surprise.

David Jöch

Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

Find React Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.
Hired

🧑‍💻 Got a job listing to share? Here's how.

📘 Tutorials and Stories

TypeScript Function Syntaxes — Flexibility can be a two-edged sword: new developers, in particular, may be overwhelmed by the options available to them. Kent provides some prescriptive syntax ideas to get you started.

Kent C. Dodds

▶  A Vite 2.0 Crash CourseI’m never going to use Create React App again states the author of this video. A bold claim backed by his love for Vite, a fast frontend build tool.

Jesse Hall

Creating a Web App with Yarn Workspace, TypeScript, esbuild, React, and Express — The first of a three part series followed by a bonus article featuring advanced techniques. The latter includes publishing to Docker using GitHub Actions.

Aymeric Chauvin

How to Implement a React Data Grid (One That’ll Make Your Life Easier) — The KendoReact Data Grid is not only feature rich and very fast, but also satisfying to work with. Watch video tutorial.

Progress KendoReact sponsor

Adding Image Upload to a React Native App with AWS Amplify — With Amplify, AWS is looking to make inroads into mobile app development. The tutorial author illustrates its use with this common application requirement.

Derek Bingham

Create a Whack a Mole Game With React and JavaScript — For those new to React, an (incredibly) simple tutorial with a relatable case study is a great way to kickstart your educational journey.

John Au-Yeung beginner

React 17 Adds Support for KeyboardEvent.code Property to SyntheticEvent — The new major release of React includes this small but important change.

Aditi Tipnis

🛠 Code and Tools

react-scroll-sync: Synced Scroll Position Across Multiple Scrollable Elements — There is, of course, a page with a demo on it. :-)

Andrey Okonetchnikov

React Hooks Cheat Sheet — An excellent resource for your office wall with an innovative approach to pricing: you pay what you think it’s worth (or even zero - the creator suggests).

Sébastien Castiel

ClickableBox: Automatically Add onClick to HTML Elements — This component also returns the attributes and listeners needed to make these elements accessible as if they were buttons.

Daniel O’Connor

Free Chat & Activity Feed APIs for Qualifying Teams

Stream sponsor

State Designer: Optimizing the State Management Design Experience — Yes, yes, another state management library, but the idea here is to help you figure out the design of your states. Example and GitHub repo.

Steve Ruiz

Framer Motion Hooks — The one gap in Framer Motion? No hooks. Now there's an option to "fill the hook gap", as they put it.

Matthias Halfmann

Chat UI Kit React: Roll Your Own — Build a chat UI with React components and avoid much of the hassle and complication of piecing together your own.

chatscope

⚡️ Quick Bits:

Interesting projects which you may have missed: