Hello readers!

Just as we do every month, we've pulled together a selection of articles from the world of web tech that we think are worth sharing…

Discover how to use app directory architecture in Next.js, get insights into better error handling in React, learn how z-index in CSS works, and much more.

Happy reading!

How to handle errors in React

Errors are, unfortunately, inevitable – so it’s important to know how to handle them. In React apps this is especially important, because starting from React 16 an error will prevent the entire UI from being rendered. Errors can originate in the component render method or its business logic, making them difficult to handle. This article shows a neat trick for using the Error Boundary component to handle async and sync errors in React components.

Understanding z-index in CSS

Have you ever had an element with a lower z-index be rendered on top of one with a higher z-index value, and not understand why? Do you know what the “stacking context” is? Dive into this blog post to learn all about it, and become super clear on this topic. 

Learn app directory architecture in Next.js

In its latest v13 release, Next.js introduced the new architecture for handling routes and rendering layouts based on the React Server Components that were introduced with the release of React 18. The feature is still in development, but worth understanding now as it will be ready for production with the subsequent releases. Check out this article to learn all about it.

How to create a double border in CSS

Check out the different methods available for rendering double borders with CSS rules, and pick the one you like the most.

Gotchas of unhandled rejections

Unhandled promise rejections imply a promise that has been rejected but not handled – and unhandled rejections are something you want to avoid. A simple solution would be to add a catch method, but things can get complicated when dealing with multiple promises. Read about some nasty use cases you might have missed, and find out the best solution to this issue.

Adding support for web to React Native project

This blog post describes how to add support for web applications to mobile React Native projects that have been created with the React Native CLI init command, and how to make your build configuration.