An admin panel for React-powered B2B apps
🇺🇦 #284 — April 13, 2022
React Folder Structure in Five Steps, 2022 Edition — The latest part of Robin’s attempts at updating his well regarded React resources to 2022 standards. Articles about structuring React apps are always popular and this one breaks the idea down into five steps going from the simplest of apps to more complex ones.
React Admin 4.0: An Admin Panel for B2B Applications — A framework for building browser-based ‘admin’ apps on the backend of your choice (REST, GraphQL, etc. or you can write your own adapter). There’s a demo if you want to see it live. MIT licensed, but does have a professional version too if support is required. GitHub repo.
New Sendbird React Chat UIKit SDK — Re-architected from the ground up, UIKit v3 offers modularized, more granular components for devs to build a custom UI fast. The new UIKit makes it faster & easier than ever to integrate chat into your web app.
Arend van Beelen
Create React App 5.0.1 is out and improves compatibility with React 18.
The basics of React 18’s improvements very simply explained.
The creator of Preview.js, an IDE extension for live previewing React and Vue components, has written about their experiences in building and marketing the tool, as well as selling a ‘pro’ version.
React Frontend or Full-Stack Engineer at Uplift (US Consultancy) — Enjoy a flexible schedule while building web and mobile apps with modern technologies on a wide variety of projects.
Uplift Agency Ltd.
Front End Engineer (Remote) — Our profitable & growing startup is looking for experienced FE engineers who are interested in working on complex UX challenges.
Senior Software Engineer at This Dot Labs (Remote, Worldwide) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more.
This Dot Labs
Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.
Using a Hook to Detect Clicks Outside of a Component — When using a dialog or dropdown, you need to detect clicks outside the component so they can be closed when the user navigates away. Here’s a tutorial on how to create the required custom hook.
Custom Hooks Demystified in Five Simple Steps — If you’ve been writing a lot of repetitive code, custom hooks could be the answer, asserts the author. He works through the refactoring process in a series of logical, easy-to-follow steps.
How to Use a Proxy in Next.js — A proxy is used to act as a relay between clients and servers and can be easily implemented in Next.js apps.
How to Detect ‘Long Press’ Gestures in React Apps
🛠 Code and Tools
hamburger-react 2.5: Animated ‘Hamburger Menu’ Icons for React — The icons use CSS-driven transitions optimized for performance, with each one coming in at about 1.5KB. v2.5 adds React 18 support.
Luuk de Vlieger
react-cancelable: Save Time and Resources by Cancelling Outdated Requests — Why generate a lot of excess network traffic for clients which no longer require the requested data? Use this library to simply cancel the request using the AbortController API.
Next SEO 5.4: Easier SEO for Next.js Projects — Focuses on the essentials for letting search engine spiders index your site properly like titles, meta tags, canonical URLs, through to Open Graph and JSON-LD metadata formats.
React Live: A Playground for Live Editing React Components — There are quite a few tools like this now, but React Live has been around for about nine years already. GitHub repo.
React DnD 16.0: Utilities to Create Drag and Drop Interfaces — Build complex drag and drop interfaces while keeping your components decoupled. v16 goes ES modules only and adds Node 18 support.
⚡️ Quick Bits:
numeric-stepper — A numeric stepper component with neat micro-interactions.
react-use-clipboard — A hook that provides copy-to-clipboard functionality.
rc-collapse — A collapsing content/accordion component.