Dragging, dropping, counting, and uploading.

Plus a Google Calendar style calendar component, and applying DRY principles to React apps. |

#229 — March 10, 2021 Read on the Web React Status Your weekly React news digest, every Wednesday React DnD 14.0: Utilities to Create Drag and Drop Interfaces — Build complex drag and drop interfaces while keeping your components decoupled. v14.0 came out this week and addresses a variety of "liveness and ergonomic issues with the hooks API." Chris Trevino How to Write a React Component in TypeScript — While we featured an article by Felix Gerschau covering similar ground in #227, the always helpful Kent C Dodds provides complementary coverage of the topic here :-) Kent C. Dodds A Friendly Introduction to Functional Programming with JavaScript by Anjana Vakil — Learn what Functional Programming (FP) is and how it differs from other programming styles (such as OO and imperative), and use key concepts of functional to improve your everyday coding. Frontend Masters sponsor react-big-calendar: A GCal-Style Calendar Component — Inspired by FullCalendar this component provides all of the calendaring functionality you'll likely need. See for yourself using their demo. Jason Quense react-anime: Animation Library Based on anime.js — If you have always wanted to integrate the functionality of the popular anime.js animation library into your React app, now you can. Alain Galvan ▶  Hook Traps: useEffect and Stale Closures — Stale closures are when a Hook sees an outdated versions of your component's state, most likely encountered during asynchronous operations. This short video illustrates how the condition can be avoided. Cassio Zen 💻 Jobs React Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team Find Your Next Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 📘 Tutorials and Stories Low-Level Charts in React — A concise tutorial on using Airbnb's powerful Visx data visualization library released in the fall of last year. Catalin Pit Form Validation with React Hooks without a Library: The Complete Guide — While a library like Formik can save some development time, they can also paper over an understanding of what's actually happening when validating forms. Felix Gerschau Build a React App with ANT Design Principles — Build a small React app that displays transactions to the user based on Ant Design principles & uses Okta to secure it. Okta sponsor Five DRY Principles to Follow in React — Yes, the DRY (don't repeat yourself) principle applies to React projects, too. These prescriptive recommendations will help you take the redundancies out of your code (or prevent them in the first place). Mohammad Faisal Modeling UI States in a React Form Component Using a Finite State Machine — We covered finite state machines a couple of issues back and felt this article was a natural follow up article: it illustrates the FSM concept scaled up to address some of the requirements of OkCupid's 50 million users. Xiaoyun Yang Building a Modern React App from Scratch in 2021 — Boilerplate is good when you want to get something done quickly. But you'll want to skip them and build your React app from the ground up if you want to know what is actually going on. Yakko Majuri 🛠 Code and Tools supported by Pullstate: Simple State Management with Fast Retrieval Using Hooks — Simple state stores using immer and hooks - re-use parts of your state by pulling it anywhere you like. This library comes with two, easy to follow examples. Paul Myburgh react-fetching-library: Use Hooks to Retrieve Data — Similarly, here is a library which provides a generalized approach to retrieving data, also based on hooks. Marcin Piela useCountdown: A Count Down Timer Hook — In yet another example of the ever-expanding use of hooks, here's one that implements a countdown timer. react-countdown is another if you want to do some comparing. Brad Garropy AWS Cloud Certifications Explained: Which Is Right for You? New Relic sponsor prism-react-renderer: Prism Syntax Highlighting in React — If you have used PrismJS it the past and liked it, good news, you can now have its syntax highlighting capabilities accessible within React. Formidable SWR: React Hooks Library for 'Stale' Data Fetching — SWR comes from stale-while-revalidate, a cache invalidation strategy popularized by RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally return the up-to-date data again. Vercel ⚡️ Quick Bits: Interesting projects which you may have missed: React Upload Box — Simple but effective upload capability. react-popper-tooltip — Hook for smart tooltips. React Indiana Drag Scroll — Make your UI more intuitive. Fun demo. react-use-intercom — Quickly integrate with the Intercom chat tool. react-csv-reader — Support the universal data import format.

This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A Cooperpress publication. Change your email address or Stop getting this newsletter © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom