Learn how to build complex components using different design patterns implemented with the React Hooks API.

Matías Hernández

Build Advanced Components with React Hooks

En este curso aprender diferentes métodos para resolver problemas que encontrarás en tu día a día como desarrollador web.


Manipulación Eficiente de Arreglos con Javascript

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.

Nuevas Características de ES2020 en JavaScript

Javascript offers multiple ways to create solutions for different manipulations and transformations needed to work with arrays. 

Efficient JavaScript Array Manipulation

 Resources from Matias Hernandez in 2022

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.  

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

Creating a Gatsby Source Plugin

Una colección de lecciones que describen como crear un plugin fuente para Gatsby desde cero hasta su publicación en npm.

Bite-size video tutorials for badass web developers.

egghead

Creación de un plugin de Gatsby desde cero

Manipulación Eficiente de Arreglos con JavaScript

The new React Hooks API allows using different patterns in a simple, direct, and functional way.

In this course, you will find a step-by-step guide to build a complex component using different design patterns implemented with the Hooks API.

We will start with a simple component `<Wizard>` that uses the `useState` hook and in each lesson, we will be improving the implementation by using different strategies.

In the last lessons, we will have a full Wizard component with a flexible API to allow the user to manage the component based on their requirements and You will have learned the use of `useState`, `useReducer`, `useContext`, `useEffect` and `useCallback` along with some popular design patterns to build React applications.

You will be able to find the code and notes for each lesson in the GitHub repository.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Javascript offers different ways to work with arrays one of the most used data structures out there.

Learn some of these methods and functions to improve the way you manipulate arrays in your code.

Efficient Javascript Array Manipulation

La nueva API de React Hooks permite utilizar diferentes patrones de forma sencilla, directa y funcional.

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Comenzaremos con un sencillo componente `<Wizard>` que hace uso del hook `useState` y en cada lección iremos mejorando la implementación mediante el uso de diferentes estrategias.

En la última lección tendremos un componente Wizard completamente flexible al uso del usuario y habrás aprendido el uso de los hooks `useState`, `useReducer`, `useContext` y `useEffect` junto con algunos patrones de diseño populares en la construcción de aplicaciones con React.

Podrás encontrar el código y notas para cada una de las lecciones en el [repositorio en github](https://github.com/matiasfha/egghead-build-wizard-with-hooks-collection).

Cada lección tiene un directorio asociado dentro de `src`, 101, 102, 103, etc. Dentro de cada directorio encontrarás el archivo fuente para el componente `Wizard.js` y un archivo `App.js` con el código que utiliza el componente además de algunas notas extra en el archivo `Readme.md`


Construye Componentes Avanzados con React Hooks y Patrones de Diseño

In this lesson you will learn how to use the eslint yeoman generator to scaffold a new plugin to provide custom rules for your project. 
You will also be able to check the basic skeleton for an eslint ruleand a working example rule to apply a naming convention for async functions.

Scaffold an eslint Plugin with Yeoman

La nueva versión de Javascript trae, entre sus nuevas características la posibilidad de utilizar importación dinámica de forma nativa en el navegador utilizando la misma sintaxis que ya hemos utilizado con webpack/rollup y Babel.

Se trata de la implementación de la sintaxis `import()` que retorna una Promesa permitiendo así importar módulos de forma programática incluso dentro de bloques condicionales, eventos o utilizando la sintaxis `async` y `await`.

Importar módulos de JavaScript de forma dinámica en el navegador

Cómo utilizar encadenamiento opcional para acceder a propiedades opcionales de objetos evitando el uso de multiples condicionales.

Encadenamiento Opcional en JavaScript

ES2020 también incluye un nuevo operador que puede ser utilizado de forma nativa en el navegador. Este operador, llamado fusión nula en español, permite seleccionar el primer valor no null o no undefined de una lista de variables.

Actualmente, utilizamos el operador OR para realizar algo similar, pero el operador OR actúa de forma diferente, ya que selecciona el primer valor no "falsy".
En Javascript existen varios valores "falsy", cómo: 0, NaN, false, null y undefined



Operador Fusión Nula/Nullish Coalescing en Javascript

Javascript ofrece a lo menos 4 formas de completar un arreglo con diferentes valores utilizando solo métodos nativos del lenguaje. Estos métodos permiten crear un arreglo de un tamaño y contenido predefinido.

Es posible utilizar `Array.fill` para crear un arreglo con un tamaño definido y luego utilizar map para completar los items con un valor determinado, como un entero o un string. También es posible completar el arreglo con un objeto, pero es necesario utilizar otra función adicional ya que `Array.fill` copia la referencia al objeto original y no crea multiples objetos únicos. Para resolver esto utilizamos `Array.map`.

Otro método es utilizar un simple ciclo for, pero es un método mutable.

También es posible utilizar los métodos `Array.from` o la sintaxis spread en combinación con la función `Array.map`.


4 formas de llenar un arreglo en Javascript

Javascript offers at least 4 ways to fill an array with different values using only native language methods. These methods allow you to create an arrangement of a predefined size and content.

It's possible to use `Array.fill` to create an Array with a pre-defined size and then use `Array.map` to populate the items with a default value, like integer or string.

It's also possible to populate the array with an object, but we will require to use another  function because `Array.fill` just copy a reference to the original object without creating multiple unique objects. To solve this we can use `Array.map`.

Other way to solve the same problem is by using a for loop, but this is a mutable method.

Also, we can use `Array.from` or the array spread syntax in combination with the `Array.map` function.


4 Ways to populate an Array in Javacript

Javascript ofrece diferentes formas de manipular un arreglo. Una de estas manipulaciones es la necesidad de modificar el contenido de uno de los items de un arreglo, para ello podemos hacer uso de métodos mutables, como utilizar acceso por indice o método inmutables como el uso de la función `Array.map` o una combinación de `Array.findIndex` y `Array.slice`

3 formas de actualizar un arreglo de objetos en JavaScript

Javascript offers different ways to manipulate an array. One of this situations is the need of update or modify the content of one of the items of an array of objects. To do this we can use mutable methods like index access or immutable ways by using `Array.map` or a combination of `Array.findIndex` and `Array.slice`

3 Ways to Update the Content of an Array of Objects with Javascript

Crearás tu propio plugin de fuentes (source plugin) para gatsby para obtener datos de una fuente externa disponible por medio de una API Rest. El plugin integrará los datos como nodos de gatsby y creará las consultas graphql necesarias para ser utilizadas en tu sitio.

Para crear un plugin de fuentes utilizaremos algunos de los métodos que la API de gatsby provee como `sourceNodes`, `createNode`,`createNodeId` y  `createContentDigest`

Crear un plugin de gatsby para consumir datos de una API externa

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

You will create your own source plugin for gatsby to get external data avaialable through a REST API into gatsby. The plugin will retrieve the data and create the gatsby nodes to make the data available through the gatsby graphql queries so you can use the data into your site.

To create this source plugin you will use some of the methods provided by the gatsby API like `sourceNodes`, `createNode`, `createNodeId` and  `createContentDigest`

Create a Gatsby Source Plugin to Consume an External REST API

En el plugin que has implementado, cada nodo creado contiene un atributo `artwork_url` que hace referencia a la url de una imagen externa. Es posible usar esa URL directamente para cargar las imágenes en tu sitio, pero estas pueden ser muy grandes y tomar mucho tiempo en cargar. Pero es posible optimizar dichas imágenes directamente en el plugin para que el sitio que utilice tu plugin pueda utilizar directamente  `gatsby-image`.


Para lograr optimizar las imágenes externas tu plugin tendrá que crear un nuevo tipo de nodo. Este nuevo nodo tipo archivo permitirá al usuario de tu plugin usar los plugins `gatsby-plugin-sharp` y `gatsby-transformer-sharp` para realizar transformaciones en la imagen.


Optimizar images remotas en un plugin fuente para Gatsby

The plugin that you just implemented, each created node contains an attribute call `artwork_url` that references an URL for an external image. Is possible to directly use that URL to load the images in your site, but the images can big big and take too much time to load. You can optimize this images directly in your plugin to allow the site that use it to drop it directly into `gatsby-image`.


To accomplish the goal of optimizing the external images, your plugin will have to create a new type of node. This new file node will allow the user of your plugin to harness the power of the plugins `gatsby-plugin-sharp` and `gatsby-transformer-sharp` to perform transformations over the image field.


Optimize Remote Images in a Gatsby Source Plugin

Es posible pasar parámetros que ayuden a configurar tu plugin de Gatsby. Uno de sus caso de uso es permitir que el plugin se utilice multiples veces creando diferentes consultas que estarán disponibles para tu sitio.
Para esto es necesario refactorizar el plugin original para aceptar estos parámetros que son configurados mediante el archivo `gatsby-config.js`

Utilizar parámetros de configuración en un plugin para Gatsby

It's possible to pass configuration parameters to your Gatsby plugin. One use case is just allow the plugin to be used multiple times creating different queries that will be available for your site.

To do this you need to refactor the origin plugin code to accept this parameters and update the `gatsby-config.js` file to set them there.

Matías Hernández