Person using a mobile app
Person using a mobile app
Photo by DISRUPTIVO

This post was originally published in my personal site.

The experience of the user is the only thing that matters?

It’s a common thought and a widespread idea that the only thing that matters is the user experience. If a certain product is well designed, the user will have a good experience and be able to accomplish his/her goal. And that’s all that matters.

Following this line of thought, the user doesn’t care about how the website was coded or what your technology choices were. She doesn’t care if you have a great readme or comment on your code. She doesn’t care if you apply good design patterns or if you…


Photo by Fatos Bytyqi on Unsplash

This post was originally published in my personal site.

In the past, Javascript errors inside components used to corrupt React’s internal state and produce a corrupted UI in place. React did not provide any way to handle these errors gracefully, and could not recover from them.

An important change was introduced in React version 16. Now any uncaught Javascript error will result in unmounting the whole React component tree. This leaves no room for corrupted UIs.

Why was this change introduced? Well, the React team believes that it is a bad practice to leave a corrupted UI in place, because…


Photo by Christopher Gower on Unsplash

This post was originally published in my personal site.

At this point I think I don’t have to explain the importance of testing your applications. Automated tests allow you to catch bugs while still developing and avoid getting a call at 2am because your application is not working as expected.

It’s all about confidence. When shipping new code, you want that confidence. You want to know that your application will work just fine. Of course you can’t know, but if you have a bunch of great tests, you will be a lot more confident.

Yes, you need to invest time


Photo by Jess Bailey on Unsplash

This post was originally published in my personal site.

I love styled-components. I use this library for all my personal projects (including my personal site). It's very powerful and also very easy to use. In this article I'm going to explain the 3 main things you can do with styled-components so you can start using it right away.

But first… What exactly is styled-components?

“styled-components is the result of wondering how we could enhance CSS for styling React component systems”

styled-components is a library that allows you to write actual CSS code to style your components, removing the mapping between components and styles. It uses tagged…


Photo by Tim Gouw on Unsplash

This post was originally published in my personal site.

When we write React code, we use JSX to create React elements. In case you don’t know, JSX is an extension to Javascript to support syntax that looks like the HTML code you would write to create DOM elements.

JSX allows us to create a React element by just writing this:

const element = <div>Hello World</div>;

As the browser does not understand JSX natively, Babel then converts the JSX syntax using react.createElement API.

If you want to know more about JSX and React elements, you can check this post.

Then we have Components

React allows…


Photo by NESA by Makers on Unsplash

This post was originally published in my personal site.

In the early days of React, Classes were the only way to have functionality in your components (like state). You’d only use Functions for dumb components which only displayed stuff.

This is no longer true, because we now have React Hooks and they allow us to have in Function components the same functionality we used to have with Classes.

However, there is one key difference, that not everyone is aware of 🔮

Let’s start with a simple example

The best way to understand this concept is by seeing it in action.

Let’s create a simple app where…


Photo by Wes Hicks on Unsplash

This post was originally published in my personal site.

React Hooks are awesome and definitely make our lives as React developers much easier. In case you don’t know what they are, Hooks were introduced in React 16.8.0, and they let you use state and other React features without writing a class 💃

The most important thing is that Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle.

Note: if you’re new to React, learn Hooks and functional components first. …


Photo by Glenn Carstens-Peters on Unsplash

This post was originally published in my personal site.

Today I want to write about a simple, yet powerful element you must include when building an HTML form: labels.

You probably know what a label is. It tells the user what the field is all about. For example, when you see this:


Photo by Ferenc Almasi on Unsplash

This post was originally published in my personal site.

Let’s start by writing a simple piece of code to display a “Hello World” message, using just vanilla Javascript and browser APIs.

First, let’s create a root div in our body section:

<body>  <div id="root"></div></body>

We will now create a new div with the Hello World message and append it to our root div using Javascript.

We need to get that root div element first:

const rootElement = document.getElementById('root');

Then create a new div and add the text content:

const element = document.createElement('div');
element.textContent = 'Hello World';

And finally append


Photo by Shane Avery on Unsplash

This post was originally published in my personal site.

If you’ve written some React code, you’ve most probably seen this warning:

Franco D'Alessio

Front-end Web Developer. I usually write about Javascript, React and web development in general at https://francodalessio.com/

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