CodeWithNico

¿Qué es lo mínimo que debes saber para considerarte full stack developer?

2021-01-08T23:00:00+00:00

Muchos dicen que para ser full stack tienes que saber mil cosas e incluso que los desarrolladores full stack no existen (o que son unicornios 🦄).

La razón de esto es que los full stack se mueven en distintas capas de un proyecto de software: en lo relacionado a interfaz de usuario (frontend), en la parte de procesamiento y entrega de datos (backend), entre otras cosas. Y para dominar cada una, se necesita manejar muchas herramientas.

Como cada mundo involucra miles de tecnologías, ahora nos hacemos la pregunta: ¿qué es lo mínimo que debe saber un desarrollar para considerarse full stack?

Definición de un desarrollador full stack

Antes es importante ponernos de acuerdo de qué es un desarrollador full stack.

Muchos piensan que un full stack debe dominar todas las tecnologías de frontend y de backend. Algo difícil de lograr…

A mí me gusta usar una definición más amplia:

Desarrollador full stack: Alguien que es capaz de crear una aplicación que involucre interacción con usuarios finales y también procesamiento y entrega de datos.

Esta definición tiene 2 consecuencias:

Se basa en lo que una persona es capaz de lograr y no a lo que se supone que sabe.
Las tecnologías y herramientas quedan en segundo plano, a servicio del profesional. Tal y como debe ser.

Ahora sí… Lo mínimo que tienes que saber para considerarte full stack

Debido a la definición anterior, tienes que saber crear aplicaciones que involucren el mundo del frontend (interfaz de usuario) y del backend (entrega y procesamiento de datos).

Como son muchas aristas y tecnologías, el full stack es capaz de complementar los conocimientos que tenga más débiles o que no le interesen.

Hay muchas combinaciones que logran esto:

En vez de aprender sobre servidores, devOps y sistemas operativos (donde colocas tu aplicación “backend”) puedes aprender una herramienta tipo Heroku que hace todo esto por ti.
En vez de aprender a crear backend complejos desde 0 puedes utilizar un framework con muchas cosas ya hechas (Ruby on rails, Django, Laravel) o incluso puedes usar “backend as a service” tipo Firebase.
En vez de aprender a hacer frameworks frontend desde 0 puedes usar herramientas ya existentes como Angular, Vue o React.
En vez de aprender CSS puedes usar templates ya hechos.
En vez de aprender a desarrollar en Android (Java/Kotlin) e iPhone (Swift) puedes usar React native (javascript) o Flutter (Dart) para crear plataformas en ambas plataformas.

Esto nos abre las puertas a muchos perfiles interesantes.

Ejemplos de perfiles de desarrollador full stack

Algunos ejemplos de perfiles full stack:

Javascript con jQuery + Firebase
Ruby on rails en AWS on react
React Native con Django en un VPS
React native con Nodejs sobre Heroku
Vue con Laravel en docker sobre AWS
AWS Amplify

Mi elección personal

Yo me considero un desarrollador full stack por que he hecho varias aplicaciones que involucran ambos mundos de manera exitosa.

Para que tengas una referencia, mis elecciones tecnológicas son:

Backend: me considero buen backend con Ruby on Rails (RoR). Lo aprendí mientras estudiaba y desde ahí que quedé enamorado del framework. También manejo bien node.js, pero mi elección casi siempre es RoR.
Frontend: por temas de trabajo tuve que aprender React. No me encanta, pero hace bien su trabajo.
UI: no soy experto en CSS. Por eso, suelo utilizar frameworks de CSS, como por ejemplo Bootstrap o AntDesign.
Devops: nunca me gustó lo relacionado con servidores. Así que mi elección es utilizar Heroku.

Solución a problema de 404 de React en Netlify

2021-01-08T15:00:00+00:00

Tu APP React con react-router funciona perfecto en localhost, pero cuando la subes a Netlify tienes problemas con las rutas.

El problema ocurre cuando intentas entrar a una ruta particular. Por ejemplo, al ir directamente a tusitio.com/about, Netlify mostrará un error 404 genérico.

Pero cuando vas a tusitio.com y haces clic en un enlace que te lleva a tusitio.com/about, todo funciona correctamente.

¿Suena familiar?

La solución

Agrega en tu carpeta public un archivo llamado _redirects y agrega este contenido: /* /index.html 200

Eso dice que todo request (el “/*”) lo redireccione a “/index.html” y que responda con código HTTP 200.

Esto hace que cuando vayas a tusitio.com/about:

Netlify dice: “ah, tengo que responder con index.html todo lo que me pregunten”. Así que envía el archivo index.html
Tu browser recibe el archivo index.html y lo carga.
El index.html carga tu aplicación React
Tu aplicación React carga react-router
react-router ve que estás en la ruta /about y hace toda su magia.

Y es así como tu sitio funciona de maravilla.

Por qué ocurre el problema de 404 con react-router en Netlify

Recordemos que una aplicación React es una aplicación de cliente. Primero tiene que cargar el HTML, luego el JavaScript. Entonces todo lo relacionado con las rutas se maneja luego de cargar el HTML.

Netlify responde con lo que tienes en index.html cuando entras a tusitio.com, pero no sabe qué hacer cuando entras directamente a tusitio.com/about (sí, es medio bruto).

Seguramente, lo que intenta hacer cuando entras a tusitio.com/about es buscar el archivo about.html o about/index.html dentro de tu carpeta public. Como no los encuentra: BOOM! 404.

Integrando Mercadopago en una single page app (SPA)

2020-10-05T19:00:00+00:00

La documentación es pésima! – Un desarrollador al integrar MercadoPago

Este año hice una implementación de Mercadopago con React. A pesar de haber participado en otras integraciones (Stripe, Paypal y Webpay), me encontré con varias sorpresas y trabas en el camino.

Una de ellas es la documentación. Si bien no es tan mala (hay peores), carece de ejemplos. Me da la impresión de que la hicieron entre varias personas al estilo “cada uno hace su parte”.

Este post es para ayudarte a entender qué es lo que tienes que hacer al integrarte con MercadoPago, para que así puedas aplicarlo a cualquier frontend (React, Angular, Vue, etc) y a cualquier backend.

En este post no encontrarás un paso a paso, ni verás mucho código de ejemplo. No quiero que copies y pegues código. Quiero que entiendas qué es lo que hay que hacer, para que puedas ajustar y aplicarlo en tu contexto.

La forma más rápida de integrarse con Mercadopago

Lo primero que tienes que saber es que existen muchas formas de integrarse con MercadoPago, las cuales aparecen en su página web:

Dentro de las opciones para plataformas web, la más fácil es Checkout Pro. Es la más fácil porque MercadoPago te pasa una librería que incluyes en tu HTML y que tiene listo el frontend de la “pasarela de pago” (donde tu usuario realiza el pago).

Si te ingregaras con Checkout API, tendrías que hacer tu mismo el frontend (como lo hace Sony Chile o PedidosYa).

Y como queremos desarrollar lo más rápido nuestro producto, la opción que te recomiendo es Checkout Pro.

Ahora bien, ¿qué tienes que hacer para integrarte con Checkout Pro?

Flujo de integración con Checkout Pro de MercadoPago

Antes de entrar en el flujo de integración con MercadoPago, quiero hablarte del flujo general de una aplicación web que vende cosas.

El flujo general de venta en plataformas web es así:

El usuario navega por el sitio y decide comprar un producto.
El usuario paga el producto.
El servidor recibe una orden de pago exitosa, y luego “entrega” el producto.

Esto es una simplificación, ya que como has notado:

Hay aplicaciones donde seleccionar 1 o más productos y los agregas a un “carrito de compra”
La “entrega” del producto depende mucho de lo que estés vendiendo. Si vendes productos físicos, “entregar” significa coordinar toda la entrega del producto. Si vendes un producto digital como e-book, entregar puede ser enviar el e-book por correo. Si vendes moneda virtual (como en un juego), entregar significa cargarle la moneda a la cuenta del usuario.

Eso tienes que tenerlo en cuenta, porque MercadoPago te ayuda solo en el paso 2, cobrarle al usuario. Si haces carrito de compra, tú tienes que programar toda la lógica del carrito de compra.

Dicho esto, el proceso de pago con Checkout Pro es así:

Muestras en la página el botón de pago de MP, para lo cual tienes que insertar un script en tu HTML.
Cuando el usuario pague, MP notificará a tu servidor.

Suena fácil… pero no lo es. El diablo está en los detalles.

A continuación te explicaré lo que tienes que hacer para lograr estas 2 cosas.

Parte 1: ¿cómo mostrar el botón de pago?

Para mostrar el botón de pago, debes leer la sección “Integra Checkout Pro”. Todo se resume a:

Crea una preferencia en MP
Pega un código en tu página HTML

Antes de continuar… ¿qué rayos es una preferencia? En el Glosario dice que una preferencia es *la información del producto o servicio que se quiere ofrecer. *Mi modelo mental de la preferencia es una orden de compra, que tiene información de todos los productos que estoy comprando.

Ahora sí. ¿Cómo implementamos los 2 pasos en una SPA (React) con un backend propio? ¿Dónde va cada cosa?

Te voy a explicar con palabras el flujo exacto que debes implementar para mostrar el botón de pago. Son 5 pasos:

Antes de querer mostrar el botón de pago (por ejemplo, al mostrar el detalle de producto), tu SPA (React, Vue, etc) debe decirle a tu backend: “Hey, un usuario quiere comprar este producto”
Tu backend, procesa este pedido y luego le dice a MercadoPago: “Hey, alguien quiere comprar este producto. Te mando los detalles”
MP le responde a tu backend: “Listo. Toma este ID, con eso tu cliente podrá pagar”
Luego tu backend le responde a tu frontend: “Todo ok. Toma este ID para que el usuario pague”
Ahora tu frontend toma el ID, e inserta un código en la página que hará que aparezca un botón de pago.

En otras palabras, tu frontend hace un request al backend solicitando el ID de la preferencia (requerido para mostrar el botón de pago de MP), y tu backend hace un request a MercadoPago para crear la preferencia, y así responder el request con el ID.

Al comienzo dije que no mostraría código, pero si quieres inspiración:

Puedes ver un ejemplo en React del punto 1 y 5 aquí (es parecido a lo que hice en mi proyecto)
Un ejemplo en node.js para el punto 2 al 4 aquí (basado en “Genera tu preferencia” de la documentación de MP)

Nota: puede que el código de ejemplo contenga errores, ya que los hice a pulso sin verificarlos. Lo importante es la idea.

Con todo lo anterior ya puedes mostrar el botón de pago. Por ejemplo, en la app donde lo integré se terminó viendo así:

Parte 2: ¿cómo procesar el pago?

La parte anterior te dije cómo mostrar la pasarela de pago para poder recibir pagos.

Como mencioné al comienzo, luego de que te paguen, querrás entregar el producto de alguna forma (sea lo que sea que “entregar” signifique en tu contexto).

Para esto, MercadoPago puede notificarle a tu servidor cuando hay cambios en el estado de los pagos. Es decir, MercadoPago le dirá a tu backend “hey!, un pibe pagó esto”

La documentación de esto se encuentra en “Integración Avanzada” (no apesta tanto como otras secciones).

Lo que te dice esa página es que tienes que agregar información adicional cuando creas tu preferencia (punto 2 de la sección anterior). Debes agregar al menos lo siguiente:

Enviar el parámetro notification_url , el cual debe ser un endpoint de tu backend para recibir notificaciones de MercadoPago.
Enviar el parámetro external_reference cuyo valor sea un ID de tu sistema que represente la orden de compra. Esto será útil para cruzar información entre tu sistema y MercadoPago.

El código actualizado (con IPN) de ejemplo del backend lo puedes ver aquí.

Nota: El listado completo de parámetros de una preferencia lo puedes ver aquí.

Hasta aquí ya deberías tener una integración funcional:

Puedes mostrar el botón de pago en tu app en React gracias al preferenceId obtenido del backend.
El backend le informó a MercadoPago el producto que está incluido en la orden, una URL de notificación para saber que pasa con el pago y además le indicó un ID que representa a la orden en tu BD.
Cuando el usuario pague, MercadoPago te enviará un request al endpoint que le dijiste. Tu backend procesará la información, verá que todo esté bien (el pago fue por el monto que debía ser, el pago fue aprobado, etc). Y finalmente ejecutará la entrega del producto.

Últimos detalles

La preferencia recibe un parámetro llamado back_urls donde puedes indicar URL de tu frontend para mostrar cuando el pago sea un éxito, fracaso o esté pendiente.

Otra forma de redireccionar luego del pago es mediante del formulario donde inyectas el botón de pago. Por ejemplo, lo que yo hago es en el action de ese form me redirija a /orders/:id (del frontend) donde tengo más control para mostrar el estado de una orden particular. El código exacto de mi implementación en React lo puedes ver aquí.

Links de interés

Documentación de Checkout Pro: https://www.mercadopago.cl/developers/es/guides/online-payments/checkout-pro/integration
Crear preferencia (MercadoPago API): https://www.mercadopago.cl/developers/es/reference/preferences/_checkout_preferences/post/
Integración avanzada: https://www.mercadopago.cl/developers/es/guides/online-payments/checkout-pro/advanced-integration
Documentación del SDK de Node: https://www.mercadopago.cl/developers/es/guides/sdks/official/nodejs/
Código de ejemplo de botón de pago en React: https://gist.github.com/muZk/e11931b3df6aab7c7dd6dd53058c3e41
Código de ejemplo de creación de preferencia en node.js: https://gist.github.com/muZk/717ff8ec882dd701f1bec2e9ac2c6b62
Código de ejemplo de integración avanzada en node.js: https://gist.github.com/muZk/2453663c05e15884ac08cba39747e8ab

How to style your React application?

2020-09-17T00:00:00+00:00

I built my first app. It works. Now how the heck do I go about styling it?

When building a React application, you get to a point where it is fully functional but it doesn’t look like you want.

We as developers focus on how things work, not on how they look. Until we realize that our little baby is ugly 😭 and then we start styling and resizing here and there to make it prettier.

But how the heck can we style all of them in a way that is efficient and makes sense?

The fastest way to style your React app

As you may be guessing, the fastest way to style your React app is by using a UI component library that do all the heavy lifting for you.

What the heck is a UI component library? Well, it is a set of ready-made UI components such as buttons, forms, dialogs, and so on.

When using UI component libraries, instead of playing with margins, paddings and sizes, you just use the components the library provides. It makes our lives easier because:

It is faster than creating components from scratch.
Less error prone: they already work and are tested.
They look great without any extra effort from the developer.
Established libraries are easy to use and have great documentation.

Using a library will save you time and your application is going to look awesome.

The next question is What UI library should you use?

There is not an industry standard when choosing a UI component library, but the commonly used are:

My personal choices are Bootstrap and Ant Design. Bootstrap for simple apps without many functionalities and Ant Design for the rest.

Why Bootstrap? I have experience building static sites with HTML + CSS + Bootstrap. So, I can leverage my knowledge in this framework with React.

Why AntD? Two reasons. The first one: the documentation is awesome. I rarely google AntD stuff when using this framework. The second reason is that it has MANY components. When using it, I feel like they have though in everything. Its magic.

MaterialUI documentation is pretty good too. But in my experience it is a bit harder to customize and I feel like all apps made with material design looks like Google apps. Which is not bad BTW, I just don’t like it.

I can’t say much about the rest because I haven’t used them. However, I know that they are safe bets and I’m personally open to experiment with them depending on the requirements of the project.

My final advice is: choose one that looks similar to what you want to accomplish. The more similar they are, the less time you spend on customization.

Color personalization: how to choose your App colors?

At some point in the project, you will realize that your app needs some personalized touch.

The low hanging fruit in UI personalization are the colors.

Most libraries have a theme system based on primary and secondary colors, you can change them easily.

The tricky part is choosing the colors. What colors should you use?

Given that my design knowledge is zero, I usually use a palette color tool such as colorhunt or coolors. Thanks to them, you can choose any one you like with visual inspection:

Color Hunt example

For example, for a Chilean Tax payment calculator I made, the colors I used were a variation of this palette:

Color hunt in action: using palettes, you can choose one that looks good for your project.

Sometimes you’re told about the dominant color. Maybe your boss told you so or maybe you feel that you should use a particular color.

In either case, you already know the main color, so you can use Adobe Color Wheel to get complementary colors that looks nice with your choice:

Looking for complementary colors with Adobe Color Wheel

Personalization is not all about colors

Sometimes you will have to make a component and styles by yourself.

There are many ways to add styles to your React components. See How to CSS Style in React for a good summary of the approaches.

I usually start with inline style until I feel it is not good. My next step is to use css-in-js with react-jss. This approach works well because when using UI libraries, custom components tend to be self-contained.

If you’re having troubles maintaining your styles, you could try to use another solution. Maybe Utility-First-CSS is right for you. One of the popular approach here is Tailwind CSS.

If you’re having trouble distinguishing the different strategies, check How to CSS Style in React post.

And lastly, when creating your own components, check 7 Practical Tips for Cheating at Design to avoid common design mistakes.

Where to look for inspiration?

Let’s say you’re building an app that needs a chat and that your UI component library doesn’t have components for it. How do you know how it should look like? Where can you get design inspiration?

If you’re like me, creating a component based on a design is the easy part. Figuring out the design is the challenging part. Especially when you don’t have a designer on your team.

When I’m lost, I usually go to Dribbble for inspiration. Or I look at the apps I already use.

For example, early in this year I was building an app with Chat functionality. The choosen UI component library was Ionic because it looks good on mobile. The problem is that Ionic doesn’t have componenets for Chat.

After looking for inspiration in Dribbble (this one) and on the apps I use (Facebook Messenger) I ended with this:

Chat example based on a dribbble design and FB messenger

Final notes

In summary:

The fastest way to make a good-looking React app is by using a UI library. Choosing a popular one is a safe bet, so choose one based on what you are going to build.
The low-hanging fruits in personalization are colors. To choose a good set of colors, you can use Color Hunt.
When the UI framework is not enough, you’ll need to make a custom component from scratch. You can use tactics to improve your design and you have many choices to style it. Lacking of ideas? Use Dribbble for inspiration.

Bonus: just found Design Resources for Developer in GitHub, looks awesome!

What is useRef for? When should I use it?

2020-09-09T00:00:00+00:00

If you have tried reading the docs over and over again but you still don’t understand useRef, this post is for you!

What is useRef?

useRef is like a box where you can store something for later use. A number, an object, anything you want.

useRef

The thing you save in this box is preserved between renders, similar to useState. In other words, the box is not destroyed when your component is updated.

And when you change the box content, nothing happens to the component. The box content changes, but the component remains the same.

Observations:

Unlike component state variables (useState), updating a ref value doesn’t trigger a new render.
Are you coming from class components? Ok, it is like storing something in an instance variable (this.value = someValue).

What is it used for?

Ok, cool. useRef is used to store something in the component “memory” but it doesn’t trigger a new render when the value is updated.

But what is it used for?

Well, there are two main use cases:

1) To store DOM elements so you can later do something with it.

For example, you can focus the password input when the user press “ENTER” on the email input:

Focus the next element when pressing "ENTER"

You can do it with useRef (source code):

export default function App() {
  const emailRef = useRef();
  const passwordRef = useRef();
  return (
    <div className="App">
      <p>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          ref={emailRef}
          onKeyPress={({ charCode }) => {
            if (charCode === 13) {
              passwordRef.current.focus();
            }
          }}
        />
      </p>
      <p>
        <label htmlFor="password">Password:</label>
        <input id="password" ref={passwordRef} />
      </p>
    </div>
  );
}

useRef example to store reference to an input component

2) To store values you want to keep an eye on

Sometimes you want to keep an eye on a value but you don’t need to trigger new renders when it changes.

Example: storing the previous value of a state variable.

This is a simple application that display a counter and its previous values. It also has two buttons to increase the counter (by 1 and by 10):

Example of useRef to store a previous value

Source code:

function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div className="App">
      <h1>Previous value with useRef</h1>
      <p>
        <button onClick={() => setCount((value) => value + 1)}>
          Increase counter by 1
        </button>
        <button onClick={() => setCount((value) => value + 10)}>
          Increase counter by 10
        </button>
      </p>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </div>
  );
}

useRef to store a previous value

From class component to hooks (Cheatsheet included)

2020-08-03T00:00:00+00:00

You are comfortable with class components and you are wondering if you should learn React hooks (short answer: yes, you should).

Don’t worry about losing your job if you don’t learn hooks because class components won’t be deprecated and there is no need to update all codebases to hooks.

However, hooks are a thing. They may look over-hyped, but they are important specially when starting something from scratch.

I know that feeling when you’re comfortable with a technology and you’ve to learn a new toy (I had to learn Node when I was used to Ruby on Rails 😭)

You deciding to learn hooks

In this post we are going to use what you already know to kick-off your hooks journey. I know that your brain works well with classes, so lets take this advantage!

Refactoring a simple component

One of the first things we learn in React (classes) is the component lifecycle: constructor, componentDidMount, componentWillUnmoun and render.

Let’s use them and create a “you have been X seconds here” example.

This app will show how long have you been in the page. To build this, we will:

When the component is initialized, we initialize a state with counter = 0. We do this in the constructor.
After the component is mounted, we start a timer interval that increases the counter by one every 1000 milliseconds (1 second). We do this in componentDidMount.
Before the component is unmounted, we clear the timeout. We do this in componentWillUnmount.

Here is the implementation of this app:

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  componentDidMount() {
    this.intervalID = setInterval(() => {
      this.setState(state => ({
        counter: state.counter + 1
      }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

  render() {
    const { counter } = this.state;
    return (
      <div style={{ textAlign: "center" }}>
        <h1>Hey</h1>
        <div>You have been there for {counter} seconds.</div>
      </div>
    );
  }
}

Demo

I hope you don’t see anything strange here. It uses class component with the classic component lifecycle methods.

Now I’ll show you how to refactor it to hooks.

Step 1: transform your class component into a function component

In other words:

Replace class for function
Remove extends React.Component
Remove everything inside except the render code

In our case:

import React from "react";

export default function App() {
  const { counter } = this.state;
  return (
    <div style={{ textAlign: "center" }}>
      <h1>Hey</h1>
      <div>You have been there for {counter} seconds.</div>
    </div>
  );
}

This is not working yet. We have to modify it a bit…

Step 2: state management with useState

You know how to use state in class components:

Initialize state in the constructor.
Update it using setState method which triggers a new render.
Read state properties from this.state

In functional components, the state works similar:

it keeps values between renders
updating it triggers a new render

However, in function components, you don’t have a constructor and you don’t have instance methods such as setState.

So the mechanics here are a bit different. To use state in a functional component, you have to use a hook, which is a function that gives superpowers to your functional components.

The hook that brings state superpower to our function components is called useState hook

export default function FunctionalComponentWithState() {
  const someState = React.useState(initialValue); // <-- state superpower!!
  // ...
}

Using useState hook

By calling useState, you are creating a single piece of state associated to the component. It is similar to initializing the state in the constructor of a class component.

useState returns two things:

the current value of the state variable
a function to update it:

function ComponentWithState() {
  const [currentValue, updateValue] = React.useState(initialValue);
}

Creating a piece of state, getting the current value and a function to update it. Magic! 🤯

Well, technically useState returns an array of size two where the first element is the current value and the second element is a function to update it.

Lets go back to the example. We need to store the counter, so instead of

  const { counter } = this.state;

Reading state in a class component

We should use:

const [counter, setCounter] = useState(0); // 0 is the initial value

In one line we tell react to create a state variable with an initial value, get the current value and a function to update it.

Now our App code should look like this:

import React, { useState } from "react";
    
export default function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <h1>Hey</h1>
      <div>You have been there for {counter} seconds.</div>
    </div>
  );
}

Functional component with state

This works! But we are not done yet because we are not counting every second.

Step 3: implement componentDidMount with useEffect hook

In function components, to execute code after the component has been rendered you have to use another superpower (hook) called useEffect hook.

The useEffect hook takes a function which will be invoked after render. Very similar to componentDidMount:

import React, { useState, useEffect } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  
  useEffect(() => {
    // "componentDidMount" logic should be here
  }, []);
  
  return (
    <div style={{ textAlign: "center" }}>
      <h1>Hey</h1>
      <div>You have been there for {counter} seconds.</div>
    </div>
  );
}

Adding componentDidMount logic

After render (in our useEffect) we have to:

start the timer (setTimeout).
update the counter on “every tick”.

Instead of using setState we should use setCounter. The state update logic:

this.setState(state => ({
  counter: state.counter + 1
}));

Code to update state in class components

is replaced with:

setCounter(value => value + 1);

Update state with hooks

When setCounter is called, it will trigger a new render, similar to calling this.setState in the class component.

Now our App looks like this:

import React, { useState, useEffect } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  
  useEffect(() => {
    setInterval(() => {
      setCounter(oldCounterValue => oldCounterValue + 1)
    }, 1000);
  }, []);
  
  return (
    <div style={{ textAlign: "center" }}>
      <h1>Hey</h1>
      <div>You have been there for {counter} seconds.</div>
    </div>
  );
}

Which does almost everything!

I said before that the function you pass to useEffect is invoked after render. That is different than after mount. The empty array is used to tell React to invoke only once (on mount!)

useEffect(() => {
  setInterval(() => {
    setCounter(oldCounterValue => oldCounterValue + 1)
  }, 1000);
}, []); // <--- HERE

useEffect that runs only once

Step 4: implement `componentWillUnmount` with `useEffect`’s cleanup function

useEffect can return a function that cleans up effects from the previous render, which can be used to remove subscriptions (for example, to call clearInterval).

If your effect runs only on “mount” (like our component), the cleanup logic will run only on unmount. Our updated useEffect looks like this:

useEffect(() => {
  cont intervalId = setInterval(() => {
    setCounter(oldCounterValue => oldCounterValue + 1)
  }, 1000);
  
  return () => { // <--- returns a "cleanup" function
    // "on unmount"
    clearInterval(intervalId);
  }
  
}, []);

useEffect with "on unmount" logic

The final code

And the final code:

import React, { useState, useEffect } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  
  useEffect(() => {
    const intervalId = setInterval(() => {
      setCounter(oldCounterValue => oldCounterValue + 1)
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);
  
  return (
    <div style={{ textAlign: "center" }}>
      <h1>Hey</h1>
      <div>You have been there for {counter} seconds.</div>
    </div>
  );
}

See in codesandbox

Recap

useState instead of this.state = { … }

useState asks for an initial value, and returns the current value and a function to update it. All in a single line of code:

const [currentValue, setValue] = useState(initialValue);

Component state management with useState hook

Calling setValue will trigger a new render, just like using this.setState.

useEffect instead of componentDidMount / componentWillUnmount

useEffect takes a function which is invoked after render. This is generally used to run code with side effects such as HTTP requests, subscriptions, etc. Similar to what you do in componentDidMount.

You can tell react to run cleanup logic (removing a subscription for example) that you added in your effect by making your effect return a function.

useEffect(() => {
  // on mount: do something
  return () => {
    // on unmount: do something
  }
}, []); // <--- empty array = tell react to run it once

useEffect that imitates componentDidMount and componentWillUnmount

Too much to remember? Don’t worry, I made a Class components to Hooks Cheatsheet you can use 🎁 💝

Get it below 👇

How to manage snake case for backend (Django, Rails) and camel case for React?

2020-07-28T00:00:00+00:00

Let say that your backend framework is Django or Rails. The data you get and send must be in snake_case because this is the convention in these frameworks.

But when handling this data in your React App, you’ll be using JavaScript where the convention is camelCase…

How can you solve this without making your Linter go mad? Should you break the convention for either Rails or React?

If you don’t mind breaking name conventions, go ahead and use snake case in your React App (sorry Linter! 💔)

For the rest of us, I have a solution:

after retrieving data from your backend, transform it to camelCase
before sending data to your backend, transform it to snake_case

Why in client code you might ask? Well, because 99% of the time you will be adding somekind of fetch wrapper in your app (for example, to transform the responses to JSON). Just extend it a little.

Show me the code

The transformation is easy because there are packages for it. I’ll be using humps, which is a Underscore-to-camelCase converter (and vice versa) for strings and object keys in JavaScript.

after retrieving data from your backend, transform it to camelCase

Basically:

// api.js

import humps from 'humps';

export async function get(url) {
  return fetch(url)
    .then(response => response.json())
    .then(json => humps.camelizeKeys(json))
}

GET wrapper

before sending data to your backend, transform it to snakeCase

// api.js

import humps from 'humps';

export async function post(url, data) {
  const body = JSON.stringify(humps.decamelizeKeys(data));
  return fetch(url, { method: 'POST', body })
    .then(response => response.json())
    .then(json => humps.camelizeKeys(json))
}

POST wrapper

Then in your React components use your new functions and you’re done!

Example

In this example, I’ll show how to use the wrappers to display a list of pokemons using PokeApi:

Source code can be found here.

Code:

import React, { useState, useEffect } from "react";
import "./styles.css";
import { get } from "./api";

function PokemonCard({ name }) {
  const [pokemon, setPokemon] = useState(null);

  useEffect(() => {
    get(`/pokemon/${name}`).then(data => setPokemon(data));
  }, [name]);

  if (!pokemon) return null;

  const src = pokemon.sprites.frontDefault; // camelCase :D

  return (
    <div
      style={{
        margin: 10,
        width: 96,
        height: 96,
        display: "inline-block",
        backgroundImage: `url(${src})`
      }}
    />
  );
}

export default function App() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    get("/pokemon?limit=150").then(data => setPokemons(data.results));
  }, []);

  return (
    <div className="App">
      <h1>Pokemons!</h1>
      <div>
        {pokemons.map(({ name }) => (
          <PokemonCard key={name} name={name} />
        ))}
      </div>
    </div>
  );
}

Example App using our API wrapper

Why it works

Most React apps needs some-kind of wrapper for requests. It could be to transform all requests to JSON, to add authentication tokens, etc. So extending the wrapper a little for transformations is okay and straightforward.
Sometimes you won’t be able to touch your backend code. In this case, any transformation should be done in client (React) anyway.

List of Open Source React projects on GitHub to learn from

2020-05-10T00:00:00+00:00

As you grow your knowledge in React.js, you will notice that there are many sources with simple code examples but only a few of advanced stuff. And many of them have “outdated code” (no hooks, class components everywhere, etc).

What if you want to know how to structure a medium to large codebase? Or if you want to know if you are doing everything fine?

One way to improve your skills is to study what other devs are doing. How they approach their projects can teach you lessons that maybe will take you weeks to learn.

That’s why I made this list of open-source React.js applications you can learn from. All uses modern features such hooks, context and many uses redux-toolkit. So, no matter if you already have hit a plateau as seasoned developer or if you’re just starting, take a look!

1) Take Note – Live | Repo

Take Note is an open-source project to take notes, known as The Note Taking App for Developers

It’s a simple plain-text take note app with markdown support. Without all the fancy stuff that we don’t need :)

The code seems to be good organized:

It uses React hooks (yay!) and redux-toolkit =) (see the slices folder). See how slices/auth.ts looks like:

2) PrologApp – Live | Repo

The application is an error logging and monitoring tool similar to Sentry or Rollbar, built by Johannes Kettmann.

It’s built with Next.js, a feature-based project structure, and lots of tooling like ESLint, Prettier, TypeScript, Cypress, and Storybook.

What do I mean by “feature-based project structure”? Well, it has a “feature” folder where you can find a “issues” and “projects” folder:

And inside each folder, you can find the components, api, and types:

If you want a Codebase Tour, you can see it here.

3) Cloud Music - Repo

This is a clone of NetEase, a cloud music streaming service. The README is in Chinese but the code is in plain English.

This project uses redux (without redux-toolkit) and hooks. What I find interesting in this project is the code structure:

At first, it seems pretty standard but after reviewing the reducer (store/reducer.js) I noticed that they are “grouping” (inside application folder) some components and styles alongside the redux logic:

4) Todoist clone - Repo

Karl Hadwen did this Todoist clone, and he even has a video tutorial on Youtube.

For the “backend”, he used Firebase instead of building an API from scratch. He used context and didn’t use redux (yes, you don’t always need to use redux).

5) Mortgage – Live | Repo

Mortgage is a mortgage overpayment calculator!

It uses D3 to draw the chart and hooks! It is a small app but it is a good start to learn how to use hooks in calculator-like applications.

6) Tomato Work – Live | Repo

Tomato-work is a personal affairs management system written in React using hooks and redux:

For the UI, it uses Antd, which is pretty awesome BTW. The code structure is standard:

What I find interesting is that it has a services folder (remind me of angular) where each file is an abstraction to make API calls. So instead of calling axios directly in the component, he uses a service function instead.

7) Write with me – Live | Repo

Write with me is a real-time collaborative markdown editor written in React with hooks and it uses AWS Amplify

As you can see, this is a small project:

So, the code structure is not organized using different folders. All the state management is done using useReducer hooks.

There is a graphql folder because Amplify works with graphql

8) JIRA Clone – Live | Repo

This is a simplified JIRA Clone, looks awesome!

Analyzing the code structure, you can see it uses cypress and jest for testing:

As the author says, it is a good example of a modern real-world React codebase. There are the features (from README):

9) Spectrum – Live | Repo

Spectrum is a platform that allows you to create and participate in awesome communities.

I have seen many people recommending this repository. And there is a good reason for this: the repository is their entire product!

“That being said, this codebase isn’t your typical open source project because it’s not a library or package with a limited scope—it’s our entire product.”

In my opinion, this is one of the best open source full-stack react projects that shows off how to properly structure a large codebase

The frontend SPA (react) lives in src folder

As you can infer from the folder structure, they split the code by “type” of code (components, reducers, hooks, etc).

10) GitHub profile README Generator – Live | Repo

This tool provides an easy way to create GitHub profile README with the latest add-ons like visitors count, GitHub stats etc.

This is an example of a Gatsby project that uses hooks. The files are organized by type which is fine for the size of the project:

If you haven’t created your GitHub profile, maybe you can now by using this tool (I did!)

11) Moose - Live | Repo

Moose is an application to stream, cast and download torrents built with Nextron.

What is Nextron? It’s “Next.js” (for Server Side Rendering) + “Electron” (to built desktop app using web technologies).

I don’t have experience building this kind of apps. But as far I can see, the file structure is by file type:

The project uses TypeScript and for custom styles css-modules

12) Courselit - Live | Repo

Courselit is an app that helps you to start your own online teaching business.

How? Well, it is a CMS (content management system) for starting creating your own courses which uses Stripe to receive payments. It is an alternative to paid solutions (like Teachable).

Frontend is built with Preact (instead of React) with Next:

Backend is Express with MongoDB.

Something interesting is that this is a MonoRepo, which means in the same github repo lives frontend and backend as separated packages (see packages). To manage multiple javascript packages in the same repository, it uses Lerna.

13) Fireact - Repo - Live

Fireact is an app to build your own SaaS where you can receive payments through Stripe.

It is a full-stack app built with Firebase and React (CRA).

File structure is a mix betweeen “file types”:

And “by page”. Pages are split between “auth pages” and “without auth”:

It uses Firestore as you can see in UserList (here).

And for the UI, it uses coreui which is an Admin template for Bootstrap:

Did I miss a project?

It was a bit hard to find open-source projects using the latest react tools (e.g. hooks) 😓.

Listado de apps React en Github para estudiar

2020-05-10T00:00:00+00:00

Una de las cosas más difícil de React es que todo es muy libre, tienes muchas opciones… ¿qué utilizar para request? ¿usar hooks o usar clases? ¿qué estructura de código usar?

La respuesta a cada una de esas preguntas es que depende del proyecto (🙄) pero para que te hagas una idea de todas las opciones disponibles, he hecho esta lista con proyectos construidos con React en GitHub.

De esa forma, podrás estudiar el código y ver cómo juegan entre sí las distintas opciones que los autores escogieron.

1) Take Note – Live | Repo

“Take Note” es un proyecto open source para tomar notas, conocido como “la app para tomar notas para desarrolladores”

Es una app para tomar notas en texto plano con soporte para markdown, sin editores complejos que no necesitamos :)

El código se ve bastante ordenado:

Esta aplicación usa React hooks y redux-toolkit =) (mira la carpeta slices).

2) Cloud Music - Repo

Es un clon de NetEase, un servicio de streamming de música. El README está en Chino pero el código está en inglés.

El proyecto usa redux (sin redux-toolkit) y hooks. Lo que me llama la atención es la estructura del código:

Se ve muy estandard, pero si miras el reducer (store/reducer.js) puedes notar que están “agrupando” (dentro de la carpeta application) algunos componentes junto a la lógica de redux:

Todoist clone

Karl Hadwen creó un clon de Todoist e incluso tiene un video tutorial en Youtube de cómo hacerlo.

Para el “backend”, usó Firebase en vez de construir una API desde 0. En vez de usar redux u otra librería, simplemente usó Context (sí, no siempre necesitas redux).

4) Mortgage – Live | Repo

Mortgage es una calculadora para saber cuánto tienes que pagar de hipoteca

Usa D3 para dibujar los gráficos y usa hooks. Es una aplicación pequeña pero sirve como punto de partida para saber cómo usar hooks en este tipo de apps.

5) Tomato Work – Live | Repo

Tomato-work es un sistema de gestión personal escrito en React con hooks y redux:

Usa Antd para la interfaz! (la librería Antd es genial). La estructura de código es bastante estandard:

Encontré interesante que tenga una carpeta llamada services (Angular?) donde cada archivo es una abstracción para hacer llamadas a la API. Así, en vez de llamar a axios directamente en el componente, usa la función del servicio.

6) Write with me – Live | Repo

Write with me es un editor de markdown colaborativo construido con React (hooks) y AWS Amplify

Como podrás ver, es un proyecto pequeño:

A diferencia de otros proyectos, el código no está organizado usando distintas carpetas. El manejo del estado de la aplicación está hecho con useReducer.

La carpeta de graphql es porque Amplify usa graphql.

7) JIRA Clone – Live | Repo

Este es un clon simplificado de JIRA. ¡Se ve espectacular!

Usa cypress y jest para testing:

8) Spectrum – Live | Repo

Spectrum es una plataforma de código abierto que ayuda a las personas a construir comunidades online.

He visto muchas personas recomendando este repositorio. Y hay una buena razón: el repositorio tiene TODO el código de su producto. Esto no siempre pasa.

“That being said, this codebase isn’t your typical open source project because it’s not a library or package with a limited scope—it’s our entire product.”

Yo creo que este proyecto es uno de los mejores código abierto full-stack en react que hay. Estudiarlo te puede ayudar mucho a como estructurar proyectos con mucho código.

El código front que es una SPA (react) vive en la carpeta src

As you can infer from the folder structure, they split the code by “type” of code (components, reducers, hooks, etc).

Como puedes ver, estructuran el código según “tipo” (components, hooks, etc).

9) GitHub profile README Generator – Live | Repo

Esta herramienta permite que puedas crear un README para tu perfil de GitHub de manera muy simple y con add-ons como cantidad de visitantes, estrellas en GitHub, etc.

Este es un ejemplo de una aplicación construida con Gatsby. Usa hooks y los archivos están organizados “por tipo” lo cual está bien para el tamaño del proyecto:

10) Moose - Live | Repo

Moose es una aplicación para hacer cast, stremear y descargar torrents construida con Nextron.

¿Qué es Nextron? Bueno es “Next.js” (SSR en aplicaciones React) + “Electron” (para construir aplicaciones de escritorio con herramientas web).

No tengo experiencia con este tipo de aplicaciones, pero por lo que puedo ver, la organización de código es en base a “tipo de archivos”:

Y el proyecto utiliza TypeScript, y para estilos usa css-modules

11) Courselit - [Live] | Repo

Courselit es una aplicación web open source para que crees tus propios cursos online. Es una aplicación full-stack, lo que quiere decir que contempla tanto frontend como el backend.

El frontend está hecho con Next aunque en vez de React utiliza Preact:

El backend está con Express y MongoDB.

Algo interesante es que el proyecto es un MonoRepo, lo que quiere decir que en el mismo repositorio vive el front y el back (ver carpeta packages) y que para ejecutarlo debes ejecutar los dos proyectos. Para manejar el mono repo, utiliza Lerna.

12) Fireact - Repo - Live

Fireact es una aplicación para construir tu propio SaaS y que ya viene lista para recibir pagos mediante Stripe.

En términos técnicos, es una app full-stack construida con Firebase y React (CRA).

La estructura de carpetas es una mezcla entre “tipo de archivos”:

Y por páginas, las cuales están divididas en “páginas con autenticación” y “páginas sin autenticación”:

En cuanto a Firebase, utiliza Firestore, como pueden ver en el archivo UserList (aquí).

Y finalmente, la interfaz utilizó coreui que es un template de administración para Bootstrap:

¿Olvidé algún proyecto?

Fue un poco complicado encontrar proyectos open source que utilizaran hooks y últimas cosas de React 😓.

Si tienes alguno, puedes escribirme por Twitter a @codewithnico

How to wait for Axios data before you render it?

2020-04-29T00:00:00+00:00

Getting data with Axios is easy, but rendering it ~OUCH~

You may know how to fetch data with Axios, but how do you render it in React?

Maybe you tried something like using await in render function to make React wait for your request before rendering. But when you do something like:

  async render() {
    return <>{await axios.get(..)}</>
  }

await in render()

You’ll get an error like this:

Error when using await in render()

Why? Because async operator makes the render function to return a Promise, which is an object and React doesn’t know to render objects.

So, how do you make React wait for your function before render?

Well, the answer is: faking it 😏

Waiting for Axios before rendering

There is a fetching recipe for doing this which is always the same:

Start your component in “loading mode”
*When your component “mounts” *do the request.
When the request is done, save your data and turn off “loading mode”.
Make sure that while your component is in “loading mode”, display a spinner or loading text in your render function. And when not, display your data.

How do you do this in code?

Look at this simple React app that fetches data about a single Pokémon and displays its name and picture:

Example code can be found here

Here is the implementation:

function App() {
  const [isLoading, setLoading] = useState(true);
  const [pokemon, setPokemon] = useState();

  useEffect(() => {
    axios.get("https://pokeapi.co/api/v2/pokemon/4").then(response => {
      setPokemon(response.data);
      setLoading(false);
    });
  }, []);

  if (isLoading) {
    return <div className="App">Loading...</div>;
  }

  return (
    <div className="App">
      <h1>{pokemon.name}</h1>
      <img alt={pokemon.name} src={pokemon.sprites.front_default} />
    </div>
  );
}

Load, fetch and display!

How is this translated to our recipe?

1) Start your component in “loading mode”

This way you start your component in "loading mode"

With the conditional rendering of “Loading…” text and by using useState we accomplish the “loading mode” state of the component.

**Why are we using useState instead of a simple const? **Because we want to make App component remember this value between renders!

The first render displays “Loading…” in the browser.

2) When your component “mounts” do the request

Mounts → "after render" → accomplished with useEffect

useEffect receives a function that will be called after the DOM (what the browser shows) is updated. Here we tell axios to fetch Charmander data from PokeApi.

axios.get is executed asynchronous, so nothing is changed.

3) When the request is done, save your data and turn off “loading mode”

When request is done, we update the state of our component by using setLoading and setPokemon.

Both calls update the state:

setPokemon updates pokemon from undefined to response.data
setLoading updates isLoading from true to false

So… there are 2 renders! 🤯

The second render (triggered by setPokemon) will do nothing in the browser because isLoading is true → component returns “Loading…” again.

The third render (triggered by setLoading) will show Charmander in the browser! Because this time isLoading is false, so we reach the end of the function were the pokemon is finally rendered.

Summing-up this confusing render stuff:

Adding comments in key parts of the code can teach us few things :)

Not familiar with hooks?

Hey! Is 2020, you should! 😂

No problem. Here is the equivalent code with class component:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: true, pokemon: undefined };
  }

  componentDidMount() {
    console.debug("After mount! Let's load data from API...");
    axios.get("https://pokeapi.co/api/v2/pokemon/4").then(response => {
      this.setState({ pokemon: response.data });
      this.setState({ isLoading: false });
    });
  }

  render() {
    const { isLoading, pokemon } = this.state;

    if (isLoading) {
      return <div className="App">Loading...</div>;
    }

    return (
      <div className="App">
        <h1>{pokemon.name}</h1>
        <img alt={pokemon.name} src={pokemon.sprites.front_default} />
      </div>
    );
  }
}

Code using class components in CodeSandbox

CodeWithNico

¿Qué es lo mínimo que debes saber para considerarte full stack developer?

Definición de un desarrollador full stack

Ahora sí… Lo mínimo que tienes que saber para considerarte full stack

Ejemplos de perfiles de desarrollador full stack

Mi elección personal

Solución a problema de 404 de React en Netlify

La solución

Por qué ocurre el problema de 404 con react-router en Netlify

Integrando Mercadopago en una single page app (SPA)

La forma más rápida de integrarse con Mercadopago

Flujo de integración con Checkout Pro de MercadoPago

Parte 1: ¿cómo mostrar el botón de pago?

Parte 2: ¿cómo procesar el pago?

Últimos detalles

Links de interés

How to style your React application?

The fastest way to style your React app

Color personalization: how to choose your App colors?

Personalization is not all about colors

Where to look for inspiration?

Final notes

What is useRef for? When should I use it?

What is useRef?

What is it used for?

1) To store DOM elements so you can later do something with it.

2) To store values you want to keep an eye on

From class component to hooks (Cheatsheet included)

Refactoring a simple component

Step 1: transform your class component into a function component

Step 2: state management with useState

Step 3: implement componentDidMount with useEffect hook

Step 4: implement componentWillUnmount with useEffect’s cleanup function

The final code

Recap

useState instead of this.state = { … }

useEffect instead of componentDidMount / componentWillUnmount

How to manage snake case for backend (Django, Rails) and camel case for React?

Show me the code

Example

Why it works

List of Open Source React projects on GitHub to learn from

1) Take Note – Live | Repo

2) PrologApp – Live | Repo

3) Cloud Music - Repo

4) Todoist clone - Repo

5) Mortgage – Live | Repo

6) Tomato Work – Live | Repo

7) Write with me – Live | Repo

8) JIRA Clone – Live | Repo

9) Spectrum – Live | Repo

10) GitHub profile README Generator – Live | Repo

11) Moose - Live | Repo

12) Courselit - Live | Repo

13) Fireact - Repo - Live

Did I miss a project?

Listado de apps React en Github para estudiar

1) Take Note – Live | Repo

2) Cloud Music - Repo

Todoist clone

4) Mortgage – Live | Repo

5) Tomato Work – Live | Repo

6) Write with me – Live | Repo

7) JIRA Clone – Live | Repo

8) Spectrum – Live | Repo

9) GitHub profile README Generator – Live | Repo

10) Moose - Live | Repo

11) Courselit - [Live] | Repo

12) Fireact - Repo - Live

¿Olvidé algún proyecto?

How to wait for Axios data before you render it?

Waiting for Axios before rendering

1) Start your component in “loading mode”

2) When your component “mounts” do the request

3) When the request is done, save your data and turn off “loading mode”

Not familiar with hooks?

Step 4: implement `componentWillUnmount` with `useEffect`’s cleanup function