#310 — October 19, 2022 |
|
|
|
Discussing First Class Support for Promises in Client and Server-Side Components — There’s a lot going on here! At the core of the discussion is a proposal for adding first class support for reading the result of a promise using Suspense which ultimately leads to official support for using Suspense for data fetching. At the heart of this idea on the client side is a new, conditional hook called The React Community |
💡 If, like me, you learn better from examples, here are code examples of simple server-side and client-side components using the idea under discussion. |
The Remix Fundamentals — Join Kent C. Dodds for this detailed video course and get up to speed on all things Remix — the full stack web framework. This course covers nested routing, mutations, progressive enhancement, prefetching, error handling, and much more. Frontend Masters sponsor |
|
Storybook Baking in First Class Support for Vite — Storybook, a popular UI component ‘workshop’ tool, is re-architecting itself around first-class Vite support with zero config setup, no Webpack required, faster startup, and instant reloads. Improved pnpm support is next on the roadmap. v7.0 is now available in a ‘late alpha’ stage – installation instructions are included in the post. Ian VanSchooten (Storybook) |
|
A Real World React to htmx Migration Story — htmx is a library that essentially 'turbo charges' HTML by letting you use numerous JavaScript and Web API features by way of custom HTML attributes. It offers a very different approach to React, but a Python-based team found it worked better for them and it’s a neat case study as long as you appreciate the context they’re coming from. David Guillot |
|
Lessons Learned in Moving to Recoil.js — Kitemaker recently moved to Recoil (a state management library from Facebook, but not the React team) to help remove unnecessary re-renders in their React app: this is what they learned along the way. Kevin Simons (Kitemaker Blog) |
|
IN BRIEF:
|
|
Creating a World-Class Code Playground with Sandpack — A couple of months ago we featured the release of CodeSandbox’s Sandpack, a toolkit for creating your own ‘live code editor’ components. Josh Comeau shows off how to actually use it to good effect to boost your blog posts, courses, etc. Josh W Comeau |
|
How to Use Google Sheets as a Database from React — Google’s Sheets isn’t going to power the world’s next big social network by any means, but there are some interesting advantages to be had by using it for smaller apps. This post demonstrates a way to hook things up by way of a serverless function. Paul Scanlon |
|
Live Event: Visual Workflow Automation, Now with Code Retool sponsor |
|
▶ Tic Tac Toe in React with HTML and CSS — For those newer to React a simple, clear application objective implemented from start to finish. (21 minutes.) Chris Power |
|
▶ A Next.js Crash Course — There are a lot of such videos, but this is a well recorded and up to date one so it might help you get the lay of the Next.js land if you’re just starting out with it. (2 hours 30 minutes) Anson Foong |
|
How to Create a React Dropdown — There's also a precusory write-up for creating a ‘select’ component. Robin Wieruch |
🛠 Code and Tools |
|
|
Selection: A Library to Enable Visual DOM Element Selection — For example, if you want users to be able to drag a box around various elements they want to select. Touch device friendly. Has wrappers for use with React, Preact and Vue too. (Live demo.) Simon Reinisch |
|
Offline Support for React Native is Here! Try V5 of Stream's Chat SDK Stream sponsor |
|
TamoTam: An Open Source, Social 'Offline Events' Mobile App — A reader has submitted this project which is both a social project he’s working on, but also an example of building a React Native app on both Android and iOS along with tying together a variety of patterns and dependencies. Daniel Danielecki |
|
react-modal-sheet — Flexible, ‘buttery smooth’ bottom sheet component built with Framer Motion.
|
|
use-modal-hook — A hook for controlling modal components. |
|
|