Over the last year, I’ve had a chance to work on many React projects with TypeScript — some of them from scratch, while others dealt with maintenance or adding new features. Whether they were simple or complicated, they all involved some kind of routing.
As a result, I had a chance to experiment with the best ways to manage routes in a React project.
I tried quite a few different ways to do it, but I will talk about my favorite approaches in this article.
These projects almost always have React Router as the routing solution, so the approach I’m…
We were recently introduced to a new React state management library by the folks at Facebook. It’s called Recoil.
It’s always exciting to see new solutions but a question does come to mind: Do we really need it? There are already mature solutions — Redux, MobX, and many others — do we need a new one?
For many people the answer is no. But let’s get to know what Recoil is and what kind of problems it solves.
Recoil is a state management library for React, developed by Dave McCabe at Facebook.
There are two core concepts in Recoil: atoms…
You have an idea for the next big thing. You start working on it with joy. You work on it for a long time, and over that time, you slowly abandon it and move to the next idea. Again, you’ve spent a lot of time on an abandoned project.
The reason is simple: You want to have a fully working product first. You try to build every feature in your mind and care too much about the quality of work from day one. It takes so much time to build something perfect. …
I came by an inspiring post by Craig Carlyle. He created a dashboard to track his life. He can track his heart rate, calories, cups of coffee, open-source contributions, etc. day by day in a big calendar view. It’s a really cool project. I highly recommend you take a look at it.
I want to have a similar dashboard for myself, so I decided to build it step by step since it requires a lot of work to cover the different features. I also decided to share my journey with you so we can work on it together.
Developer tools are essential for software development. We need them to develop, test, and debug our work. The chances are very high that you use Chrome DevTools as a web app developer.
I will show you some of the hidden features of Chrome DevTools to help boost your productivity.
In case you need it, here is…
February 6, 2019, was a good day for the React community. The React team finally released the Hooks API with the v16.8 stable version. It was huge. People were so excited about it. People had been waiting for this game-changer API for months and it was finally there.
The Hooks API changed how we write React components. We all said goodbye to class components and hugged functional components with love. The reasons are clear. …
Most of the time I work with React. Over time I’ve come across some simple things that I’d never thought of before and that gave me real “aha!” moments. I’ve also noticed that many people I work with are not aware of these tricks — simple things that can make them happy!
All the examples below are built around functional components and hooks.
Sometimes you need to render multiple components inside lists. If there’s no need for a container, use React Fragment. Here’s an example:
The code above is totally legit but React will start to complain about keys:
At the time of writing, React Router v6 is shown on the horizon as an alpha version. Even if it is an early alpha version, there is so much great news to talk about.
As you may already know, there is another great routing solution for React called Reach Router. Reach Router is lightweight, easier to use, and focuses on accessibility. It’s built by one of the core React Router contributors, Ryan Florence. As Ryan mentioned in his mid-2019 blog post, React Router and Reach Router will be merged together and React Router is going to be the surviving project.
But what we are interested in in this story are the functional array methods introduced with ES5.
More and more people started to use array methods like
The same quirks still exist even though it’s much easier to…