Testing Library is great. But it’s lacking a few queries I would find useful.
Here’s an example of enhancing Cypress Testing Library with a plain function:
Category Archives: JavaScript
React Server Components in 5 Minutes
I’m excited about React Server Components. In this post, I will summarize the benefits and limitations in a few quick points.
For more details, check out the Facebook team’s announcement video.
The Big Idea
Render React components in one … Read on...
Formik vs Plain React for Forms – Worth it?
I typically use plain React for forms. But I just converted a React form to use Formik.
Results (sizes minified):
- Plain React: 130 lines of code, 46K
- Formik: 105 lines of code, 58K
- Formik + Yup (validation): 104
Four Ways to Fetch Data in React
React is a focused component library. So it has no opinion on how to request remote data. If you’re requesting and sending data to web APIs via HTTP, here are four options to consider.
- Inline
- Centralized
- Custom Hook
- react-query/swr
Let’s … Read on...
30 Ways to Handle React State
While preparing my upcoming Pluralsight course “Managing React State”, I found a surprising number of React state management options.
This slide from the upcoming course summarizes eight ways to handle state in React apps:
Throughout the course, I build a … Read on...
Yep, JavaScript Moves Fast. Build Your Component Library Anyway.
Here’s a question I’ve heard a few times recently:
“What if we create a component library in React/Vue/Angular/whatever and a new component technology replaces it?”
That’s not a question of if. It’s a question of when. These technologies have become … Read on...
How to handle environment-specific settings in your JavaScript apps
8 ways to handle environment-specific app settings
Today many web apps are built using React, Angular, Vue, Ember, etc. These modern client-side rendered apps often call web APIs that are hosted on separate servers. This creates a problem: how do … Read on...
Designing Reusable React Components
What Legos Can Teach Us About Reuse in React Apps
React is a component library. So React makes it easy to break your UI down into composable pieces. The question is, how granular should the pieces be?
Let’s consider a … Read on...
React Pattern: Centralized PropTypes
Avoid repeating yourself by centralizing PropTypes
There are three popular ways to handle types in React: PropTypes, TypeScript and Flow. This post is about PropTypes, which are currently the most popular.
… Read on...📊 For enforcing types in React, I typically use…
Reusable Web Application Strategies: three patterns for running the same app in multiple spots
Imagine your team just deployed an amazing todo list app. A month later, another team in your company wants to run your todo app within their invoice app.
So now you need to run your todo app in two spots: