Avoiding those code smells

#​248 — July 21, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday

Adobe’s Efforts in Creating an Accessible Autocomplete Experience for React Spectrum — Adobe is placing a very high priority on accessibility in the Spectrum design system. That is judging by the time, effort and thought they have put into making a ubiquitous combo-box easier to use for everybody.

Daniel Lu

Five Code Smells React Beginners Should Avoid — About to pull the trigger on your first big pull request for a high profile project? You should probably go through this checklist first.

Jason Lee Hodges

React Authentication, Simplified — Authentication is one of those things that just always seems to take a lot more effort than we want it to. In this article, we lay out a different approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Remotion 2.2: ‘Write Videos’
in React
— In case you missed it back in February when we featured Remotion, it’s a pretty exciting way to work with video using the React concepts and constructs you know and love. “If you know React you can make videos.”

Jonny Burger

Create a Fullstack Next.js App with Authentication, Data and Storage — How can you build a full-stack application with what is ostensibly a front-end framework? Spoiler alert: It involves AWS Amplify.

Ali Spittel

Introducing the New Overlay Hooks for Ionic React — Although V6 is already out in beta, these new hooks in V5.6 will give you better, more natural control over UI elements such as alerts, modals and pop-ups.

Ely Lucas

Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Front-End Developer – Utrust (Remote, GMT -2/+4) — We are changing the world with crypto. Join our team, working with technologies such as React, Redux, GraphQL and TypeScript.

Utrust

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.

Hired

What’s the Difference Between Controlled and Uncontrolled Components in React? — A very quick and precise differentiation between these two broad categories of components.

Alyssa E. Easterly

How to Stop Re-Rendering Lists in React

Alex Sidorenko

▶  How to Setup and Deploy React 18 Alpha Using Snowpack & Vercel

Deji Adesoga

How to Parse Markdown in Next.js

Flavio Copes

🛠 Code and Tools

use-smartcrop: Content Aware Image Cropping Hook — A React wrapper for smartcrop.js and color-thief which algorithmically predicts good crops for images.

Flyyer

useCookieConsent — The prompts encouraged by certain interpretations of the GDPR data protection rules are everywhere these days; this hook could make implementing them and being compliant with the rules more straightforward.

Antoni Silvestrovič

How to Implement a React Data Grid in 16 Minutes: Video Tutorial

Progress KendoReact sponsor

React Tags — A tagging component ready to use in your React projects and inspired by Gmail’s To field functionality.

Prakhar Srivastav and Aakansha Doshi

Bulletproof React: An Architecture for React Apps — Using a group chat application as the case study, the author touches on every significant aspect of building and deploying a React application which will make it “bulletproof” and therefore production ready. Note, however: “This is not supposed to be a template or a framework. It is an opinionated guide that shows how to do some things in a certain way.”

Alan Alickovic

React Wavify — A UI component which incorporates the physics of real waves configured by a series of parameters. It’s pleasantly soothing to watch.

Jaxson Van Doorn

⚡️ Quick Bits:

react-letter — Embed HTML email content into your app.

react-hook-form-persist — A storage agnostic persistance hook to go with React Hook Form.

react-color-palette — Lightweight color picking component, now in its sixth major release.

auth0-react — Add Auth0 (the popular commercial authentication service) to a React single page application (SPA).

Leave a Reply

Your email address will not be published. Required fields are marked *