#245 — June 30, 2021 |
React Architecture: How to Structure and Organize a React Application — We've featured a variety of "how to structure React apps" pieces in the past, but it remains a perennially interesting topic as there really is no one way. Tania is always fantastic at explaining things though, so we really like this one. Tania Rascia |
▶ How Serverless Functions and Jamstack Can Power Up React Apps — A 40-minute practical screencast-meets-talk where Jason Lengstorf codes a React app and a custom serverless API from scratch including deploying to production on Netlify. React All-Day |
iMessage Clone using Stream Chat and React Native — Stream recently published an open source clone of the iMessage application built using v3 of stream-chat-react-native library. This project demonstrates the implementation of message search, swipeable channel list, message list, reactions etc, similar to that of iMessage. Stream sponsor |
An Overview of React State Management Techniques in 2021 — There are a lot of approaches to state management, so it is sometimes valuable to compare them and see which might be the best for you. This article compares, contrasts and proffers a rating for Apollo’s Local Cache, Recoil and Redux. Amo Moloko |
📅 React Meetup: The State of the React Ecosytem — While we’re still not quite back to full-on live events it seeems, this one has kind of that feel: a line-up of React observers and influencers opining as to where things stand today. It's online on Thursday, July 15. This Dot, Inc. |
SolidJS Official Release: The Long Road to 1.0 — Everyone can agree there’s no shortage of JavaScript frameworks, so what makes the first official release of SolidJS worth a closer look? Claims of “all the flexibility of React and simple mental model of Svelte” caught our attention. Ryan Carniato |
|
📘 Tutorials and Stories |
Image To Text Conversion With React and Tesseract.js — We like it when a library with a theoretical capability — in this case Tesseract.js’s ability to recognize over 100 languages and turn it into usable text — is shown off and we get to see its practical use in a real world scenario. Ayobami Ogundiran |
Five Epic React Tips To Use Today — A grab bag of ideas which claim to offer cleaner and more reliable code while making “your development experience easier and overall more enjoyable”. Reed Barger |
See Why Developers Spend 34% of Their Time on Internal Apps Retool sponsor |
▶ Building a Realtime Chat App with React, Node.js, and Socket.io — The end result looks a lot like Facebook Messenger. Be warned, though, this is a two hour video :-) Lama Dev |
How to Use Throttle or Debounce With React Hook — Do you have some code you only want to run a given number of times in a given period of time? If so, you want to throttle it. Only want that code to run after a specified delay? Then debounce it. John Au-Yeung |
Read and Render Markdown Files with Next.js and Nx — Part of a series about creating your own blog with Nx, Next.js and Tailwind. Juri Strumpflohner |
Comprehensive Guide: Proper Behaviour Testing in React With Enzyme and Jest
|
|
React Transcript Editor: Faster and Easier Audio/Video Transcript Creation — As content creation explodes, the need for tools to make its production more efficient is unprecedented. In this case, creating accurate and timely transcripts. The demo is pretty neat. BBC |
Stepzilla 7.0: A React Multi-Step/Wizard Component — Provide Stepzilla with existing React components and it’ll let you take users through them in a step by step manner, akin to the common ‘wizard’ UI pattern. It’s been around a long time but now with version 7 has finally introduced hooks support. Mark Paul |
Creating a Dashboard? Get Inspiration from This Sleek Demo App — This React dashboard combines a data grid, scheduler, charts & more into one sleek app. Check out the code on GitHub. Progress KendoReact sponsor |
Nanostores: A 152 Byte State Manager for React/Preact/Vue/Svelte with Many Atomic Tree-Shakable Stores
|
React Cool Form — The latest in Welly Shen’s Cool series: this time around, he turns his considerable talent on creating and management forms. Welly Shen |
react-native-keyboard-tools — Use KeyboardAwareScrollView to automatically scroll to the focused TextInput and useMaskedTextInput to ensure the correct characters are input. Andrii Tiertyshnyi |
react-native-mmkv-storage — Tencent’s highly efficient MMKV key-value database framework married to React Native. Ammar Ahmed |
Photonix: Roll Your Own ML-Enabled Photo Server — Implement a pretty decent photo management server on your own hardware. You’ll even get object and color recognition, location awareness and other features enabled by ML. Try the live demo. Photonix |
|