Get the benefit of types to manage your routes like a champ

A woman walking on a stone path. There’s a stairway to her right.
A woman walking on a stone path. There’s a stairway to her right.
Photo by George Bakos on Unsplash.

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…

A look at a new React state management library developed at Facebook

Image for post
Image for post
Photo by Carolina Garcia Tavizon on Unsplash

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.

What is Recoil?

Recoil is a state management library for React, developed by Dave McCabe at Facebook.

There are two core concepts in Recoil: atoms…

Learn about proof of concepts, prototyping, and MVPs

Image for post
Image for post
Photo by Hal Gatewood on Unsplash.

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. …

Learn how to create a personal Apple Health API for yourself

Image for post
Image for post
Photo by Miesha Moriniere from Pexels

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.

First, I…

Boost your productivity with these Chrome DevTools

Image for post
Image for post
Photo by Brooke Lark on Unsplash

Table of Contents

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…

Learn how to use useState in multiple ways to achieve the best result

Image for post
Image for post
Photo by Robert Anasch on Unsplash

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.

Let’s remember those exciting days with Sophie Alpert and Dan Abramov’s talk at the React Conf 2018 announcing the Hooks API.

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. …

Keys with Fragments, Strings as HTML elements, and more

Image for post
Image for post
Photo by Baher Khairy on Unsplash

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.

React Keys with Fragments

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:

Learn what’s coming in the latest alpha

Image for post
Image for post
Photo by Fatos Bytyqi on Unsplash.

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.

Composable array method usage with functional programming

Image for post
Image for post
Photo by Bannon Morrissy on Unsplash

JavaScript started to gain mainstream attraction around 2009. Around that time, we got the high-performance v8 engine. A few months later, Node.js convinced us to take JavaScript seriously and then AngularJS stepped up front-end development to another level.

But what we are interested in in this story are the functional array methods introduced with ES5.

In 2009, JavaScript had some improvements like strict mode, JSON support, and functional array methods with ES5. Years later, React kicked in and introduced JavaScript developers to the functional programming paradigm.

More and more people started to use array methods like map, filter, reduce, every

A better approach to working with Objects in JavaScript

Image for post
Image for post
Photo by Jaime Spaniol on Unsplash

JavaScript is not a classical object-oriented language. It’s prototype-oriented. They both aim to solve the same problems in different ways. Both have advantages and disadvantages.

But because of historical reasons, JavaScript needed to look and feel like Java as you can see from the name. It needed to have similar object-oriented features as Java for various reasons, mainly marketing, even without classes.

With ES2015, class syntax was finally introduced in JavaScript. A big hurray! But the joy didn’t last long since it’s just a disguise over the prototypal inheritance.

The same quirks still exist even though it’s much easier to…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store