#243 — June 16, 2021 |
Next.js 11 Released — The popular React framework takes some more steps forward with improved performance, Webpack 5 support, an experimental way to make Create React App apps Next.js compatible, and Next.js Live, a preview of a way to build Next.js apps in the browser, collaboratively, with your team. Next.js Team |
Learn to Build Scalable React Apps — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course! Frontend Masters sponsor |
MORE LOOKS AT REACT 18: Last week we focused on the plans for React 18, coming in final form later this year. Numerous React developers have picked over and digested the plans and come up with some helpful explainers:
|
Redux Toolkit 1.6.0 Adds RTK Query Data Fetching APIs — The 'batteries-included' toolset for efficient Redux development adds RTK Query which simplifies common cases for loading data in a web application, eliminating the need to hand-write data fetching and caching logic yourself. Redux |
Why the React Testing Library Is Much More Than a Testing Library — The author makes the case for using RTL and its ability to mimic user interactions and making them the objective of testing, rather than the fragile minutia of the test implementation details. Richard Zheng |
|
📘 Tutorials and Stories |
Building a Rich WYSIWYG Text Editor From Scratch — Learn how to build a rich text editor into an app with Slate doing the heavy lifting. Shalabh Vyas (Smashing Magazine) |
Adding Voice Search to a React App — Learn how to use the Web Speech API to add a simple ‘voice search’ functionality to your app. Chris Laughlin |
Better Onboarding: How to Prevent Codebase Overwhelm — It can be difficult onboarding to a complex codebase. Learn these best practices and how to get up to speed fast. Sourcegraph sponsor |
Building My Site With Gatsby and Tailwind CSS — A concise, step-by-step tutorial which will get you up and running with this increasingly popular combination of tools. Mihai Bojin |
How To Implement JavaScript Canvas Libraries in React — Looking to implement an animated starfield (for example) as a background for your latest magnum opus? This succinct article walks through the use of the p5.js library to do just that. Alexandru Olaru |
How To Use the Vite Build Tool with React — A brief tutorial on Vite, which is gaining traction as a more efficient alternative to webpack, Rollup and Parcel. Nico |
Deep Dive Into React Context API — For props used by many components (such as UI theme, for example) use React’s Context API to make them available throughout your component tree without the hassle of all that passing them from parent-to-child. Harsh Patel |
|
Jotai 1.0: Primitive and Flexible State Management — Yet another contender for the state management space, this one is based on “an atomic model inspired by Recoil”. GitHub repo. Poimandres |
react-insta-stories: Instagram-like Stories Component — A component which emulates the look and feel of Instagram Stories, versions of which seem to be showing up everywhere. Mohit Karekar |
[Download] Forrester New Wave: Feature Management and Experimentation LaunchDarkly sponsor |
react-native-in-app-review: In App Reviews — I'm not sure how many users really like these, but with this approach you can prompt for ratings and reviews without your user having to leave your app (and possibly never coming back). Mina Samir Shafik |
React Cool Virtual: A Hook for Rendering Large Datasets — This library implements a small, efficient hook which employs Dom recycling. It’s an alternative to the plethora of libraries already in this space. Welly Shen |
|