Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
Building React components with Storybook 5.3 update

Storybook remains a very exciting and useful utility for writing React components. And of course I mention React components because that is what the course is about. That said Storybook is just as useful with other frontend tools like Vue, Angular, Svelte and more.

With Storybook 5 there are some very useful changes. The most notable is the new Component Story Format (CSF) to write stories. But there is also the new MDX Syntax, also to write stories but more focused on documentation. And lets not forget the new way of configuring Storybook using the new main.js.

None of these existed when I created this tutorial about two years ago. So an update to cover these new features was long overdue. And there are some other new features I covered along the way as well :-).

This update is available for free for all students who already purchased this course. If you haven't yet, now's the perfect time to join using https://bit.ly/2NoP5yW

Applying the open-closed principle to UI components

I had an aha moment this week regarding the open/closed principle, which states “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification” and is the O in SOLID. I have always found this principle to be quite abstract and I didn’t know if I was applying it until now.

The aha moment came to me when I wanted to change the style of an existing component. For simplicity’s sake, let’s say this was a button and I wanted to change the existing background colour.


Read more
 
Create a Lazy-Loading Image Component with React Hooks
Lazy-loading images (like those in Medium or those created by gatsby-image 🧡) can sometimes add an extra touch of style to a page. To create such an effect, one will need A) a tiny version of the image for preview, ideally inlined as data URL, and B) the aspect ratio of the image to create a placeholder to prevent reflows. In this article, I will share how I created a lazy-loading image component with React Hooks.

Read more
 
Don't Mock Fetch (or Axios): Use Mock Service Worker and Test Like a User
Despite having launched a video showing how to mock both Fetch and Axios recently... here is another solution, the one recommended by Kent C. Dodds (creator of React Testing Library), showing how to use Mock Service Worker to avoid making actual HTTP requests when you are running your tests.

Watch video
 
useEffect under the Hood
The best way I have found to really have an accurate mental model of the programming abstractions I use whether compilers, promises or frameworks like react, it is to crack open the blackbox and understand the essential implementation details.
While there are a number of excellent posts on how hooks work under the hood, the inner workings of useEffect and how it relates to the lifecycle of a component continue to be a source of puzzlement for many.
As I’ll attempt to show when you peak behind the curtain the useEffect hook’s implementation is quite straightforward and fits elegantly into React’s reconciliation algorithm.

Read more
 
useSWR — My New Favorite React Library

For the last few months, I have been working on a NextJS application. It seems that every week it gets bigger and bigger. The application uses axios to make API calls and unstated-next as a state solution. There are quite a few API calls, and we don’t want our users to experience too many loading screens. So, we stored the result of our axios calls in our unstated stores.

But we ran into a problem. The stores themselves are getting more and more complicated. Some pages rely on several API calls, and some API calls rely on the results of other API calls. As the days turned into weeks, and the weeks into months, our unstated stores became more and more unwieldy. We started to encounter strange bugs, as our homemade caching logic struggled to deal with rare edge cases.

So we thought to ourselves, there must be a better way.

And there is. It’s even made by Vercel — the creators of NextJS.


Read more
 
3 React Mistakes Junior Developers Make With Component State

One of my favorite things about web development is that there's always something new to learn. You could spend your whole life mastering various programming languages, libraries, and frameworks and still not know it all.

Because we're all learning, it also means we're all prone to making errors as well. This is ok. The goal is to get better and to be better. If you make a mistake and learn from it, you're doing great! But if you fail to learn anything new and continue to make the same mistakes repeatedly, well... then it sounds like you may be stagnating in your career.

In that spirit, here are three common mistakes I often see during code reviews that junior developers make when dealing with React component state. We'll take a look at each mistake and then discuss how to fix it.


Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2020 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp