The React Newsletter

Hi <<First Name>>,

Fix the "not wrapped in act(...)" warning

There are a few reasons you're getting this warning. Here's how you fix it.

Read more

React Libraries in 2020

React has been around for a while. Since then a well-rounded yet overwhelming ecosystem evolved around the component driven library. Developers coming from other programming languages or frameworks often have a hard time figuring out all the building blocks for building web applications with React. Coming from a framework like Angular, you are used to have all the necessary features at your disposal. However, React at its core isn't opinionated about its complementary libraries. The decision whether this is an advantage or disadvantage is up to you. When I switched from Angular to React, I definitely experienced it as one of React's advantages.

React only enables you to build component driven user interfaces with function components and props. It comes with a couple of built-in solutions though, for instance, React Hooks for local state and side-effects. But after all you are only dealing with components here.

The following article will give you an opinionated approach to select from complementary libraries to build a well-rounded React application. It's up to you to exchange them with your choices.

Read more

Frontend Application Bundles: the Docker of Frontend

Frontend apps are on the cusp of a revolution—React is about to launch a streaming server renderer that massively improves performance on both low-end and high-end devices. It's a new dawn for performance & accessibility, but raises another question? How should we host the server component? Can we do that without vendor lock-in?

Enter FABs, a portable, compact, immutable, server-side JS format that lets you deploy anything from static sites or Next.js to full custom server-rendered React apps anywhere that can run JS, like Cloudflare Workers, Lambda@Edge, Now, etc. Come check it out!

Watch video

React-Redux with Typescript

React is one of the most popular framework to build a Web Application. However, as we start building more complex application state management becomes a necessity. Redux is one such tool, which helps in managing the state of entire application in a single entity called Store.

Read more

Adding React Fast Refresh to Your Create React App Project

React Fast Refresh is the successor to React Hot Loader, a configuration option that lets you enjoy a (much) better development experience, by doing the following:

It listens to changes within your source files and sends them, and only them, to the browser (or mobile device, for React Native). When those changes arrive at the browser, the code segment that has changed is being “injected” into its module, replacing the previous code. If that module is able to accept said changes without having to reload the page, then your app gets updated without losing its state.

In other words, when you hit Save, instead of refreshing the page, React Fast Refresh will only reload the components affected by the change.

Dan Abramov (and others) have recently re-wrote this feature, renaming it React Fast Refresh. It was initially out for React Native, while React developers were promised a similar experience. Finally, it seems like the days of waiting are over¹ and, while it’s still in development, you can now try it out in your Create React App (without even ejecting).

How I structure my React code

If you're looking for the definite answer to how you should structure you React apps, this article probably isn't for you. If you're interested in seeing how it can be done - read on!

How to structure files and components in a project - or even components in themselves - is always the root of never-ending discussions. And like a lot of topics, there is a lot of strongly held opinions and different ways to solve it.

Your own opinion is probably influenced by your personal preferences on what's most readable, easy to parse, or just nice to look at. When you're a part of a team, you'll typically need to agree on these structural decisions, which isn't an easy feat in the best of teams.

These kinds of discussions can be compared to two people arguing which of their favorite colors - blue and red - that's the best one. They'll always voice their opinions, state their case, and then just keep on having the same opinion. They'll never agree on purple, to put it that way.

So I'm not hoping for agreement on this. In this article I will show what preferences I have when it comes to structuring my React code, and why I have those preferences. Hopefully you'll learn a thing or two, or at least gain understanding for a different point of view.

React video courses

Because I need to pay my bills 😉