DEV Community: programador51

Browser Extensions - Native Messaging

programador51 — Sat, 20 Dec 2025 10:46:05 +0000

Objective

Teach users the theory of how to "run" .exe files with browser extensions.

Introduction

Browser extensions allow developers to extend the browser's capabilities. For example, they provide more control over downloads. By default, the browser only saves files to the folder set in its configuration or to a location chosen by the user via the file explorer. With background context in an extension, you can create subfolders, overwrite files, delete files, and more.

But what if you need even more control? Something that requires the user’s machine for advanced processing—operations that the browser itself cannot perform, like adding or updating metadata in downloaded files.

Accessing such low-level operations is blocked by browsers for security reasons. Does that mean you must always create a desktop or mobile app? Usually, yes, and that may be the best practice. But if you want to avoid that, there is one possible option: Native Messaging.

Content

Browsers block direct communication with the OS and the device to prevent JavaScript-based malware.
Because of this, tasks like editing metadata on downloaded media cannot be performed directly in the browser.
However, browsers can allow you to trigger processes that already exist on the user’s machine (like .exe files) securely and in the background. This is done using Native Messaging.

Native Messaging

Native Messaging is an official Chrome mechanism that allows a browser extension to securely communicate with a native application (e.g., an .exe file on Windows). It acts as a bridge between the browser and the operating system, enabling the extension to “talk” to local programs without violating Chrome’s security rules.

Important points:

You cannot run native applications that block the flow indefinitely, such as processes that require the user to manually select files.
Processes must be straightforward and predictable, like merging files or converting videos automatically.

Scenario

Imagine "Paco" wants to download videos from Fansly. The API delivers 2-second chunks instead of complete videos. Concatenating these chunks creates a playable video, but for an end user, this is not usable without additional processing.

Solution

After considering options, a developer might decide on this approach:

Create a browser extension that renders buttons to download all media displayed in the Fansly app.
Use software like ffmpeg to process media delivered in chunks (e.g., .m3u8 or MDN resources). Paco doesn’t need to know the details—as long as he can play the final video, it works.
Use offline tools to reduce costs and dependencies. While WebAssembly versions of ffmpeg exist (ffmpeg.wasm), browsers have memory limits, and large or parallel downloads (e.g., 4K, 30-minute videos) could crash the window. Using a .exe file that runs locally is safer and more efficient than creating a server to handle the processing.

Workflow summary:

The extension downloads all chunks in the default Downloads folder.
A signal is sent via Native Messaging to trigger the executable on the user’s machine.
The .exe merges and converts the chunks into a final MP4 file, completing the task seamlessly.

Conclusion

Chrome does not allow direct execution of .exe files, but it offers an official and secure mechanism (Native Messaging) to integrate with native applications when justified. The only caveat is that the user must install the executable or save the files somewhere on their device.

An extension using this workflow is already online, proving that desktop or mobile apps can sometimes be skipped if there’s no strong justification to create them. Many GitHub projects attempt CLI solutions instead, but using the logged-in browser session avoids login configuration.

Fansly Downloader

Download videos and pictures from the content creators you are subscribed to on Fansly.

Did you know you could run executable files using browser extensions? How does this change your perspective on web development? 😱

DevOps

programador51 — Wed, 22 May 2024 18:05:34 +0000

Feature

En Scrum, una "feature" (característica) es una funcionalidad o capacidad específica que aporta valor al usuario final. Las features son componentes del Product Backlog y representan partes importantes y diferenciadas del producto que se está desarrollando. Cada feature es suficientemente grande para que tenga un impacto significativo en el producto y, por lo general, se desglosa en historias de usuario más pequeñas para su implementación en Sprints.

Ejemplo de Feature y su Desglose

Feature: Gestión de Proyectos

Descripción: Permitir a los usuarios crear y gestionar proyectos dentro del sistema.
Historias de Usuario Derivadas de la Feature
Historia de Usuario 1: Crear Proyecto

Descripción: Como usuario, quiero poder crear un nuevo proyecto para poder gestionar mis tareas.

Criterios de Aceptación:

El formulario de creación de proyectos debe incluir campos para el nombre del proyecto, la descripción, la fecha de inicio y la fecha de finalización.
Al guardar, el proyecto debe ser visible en la lista de proyectos del usuario.

¿Qué es un Backlog?

Un backlog es una lista priorizada de tareas pendientes, requisitos y características que un equipo de desarrollo debe completar para alcanzar los objetivos de un proyecto. En el contexto de Scrum, existen dos tipos principales de backlogs:

Supongamos que estamos desarrollando un sistema de gestión de proyectos que incluye la creación de proyectos, la generación de órdenes de compra y remisiones, y la gestión de materiales comprados. Aquí tienes un ejemplo de cómo podría verse el Product Backlog para este proyecto:

Prioridad	ID	Descripción	Estimación (Puntos de Historia)	Estado
1	P-01	Crear entidad y relaciones en el diagrama ER para la gestión de proyectos	8	To Do
2	P-02	Diseñar pantalla de creación de proyectos	5	To Do
3	P-03	Implementar backend para almacenar nuevos proyectos	8	To Do
4	P-04	Validar datos del formulario de creación de proyectos	3	To Do
5	P-05	Crear pruebas unitarias para la lógica de creación de proyectos	5	To Do
6	P-06	Crear entidad y relaciones en el diagrama ER para órdenes de compra	8	To Do
7	P-07	Diseñar pantalla de generación de órdenes de compra	5	To Do
8	P-08	Implementar backend para generar nuevas órdenes de compra	8	To Do
9	P-09	Crear pruebas unitarias para la lógica de órdenes de compra	5	To Do
10	P-10	Crear API para la gestión de remisiones	8	To Do
11	P-11	Diseñar pantalla de gestión de remisiones	5	To Do
12	P-12	Crear entidad y relaciones en el diagrama ER para la gestión de materiales	8	To Do
13	P-13	Diseñar pantalla de gestión de materiales	5	To Do
14	P-14	Implementar backend para el seguimiento de materiales comprados	8	To Do
15	P-15	Crear pruebas unitarias para la lógica de gestión de materiales	5	To Do
16	P-16	Integración de todos los módulos	13	To Do
17	P-17	Pruebas integrales de todo el sistema	8	To Do
18	P-18	Documentación técnica del sistema	5	To Do
19	P-19	Documentación de usuario	5	To Do
20	P-20	Capacitación y entrega a los usuarios finales	3	To Do

¿Qué son las tareas?

Actividades específicas y desglosadas que el equipo de desarrollo debe completar para cumplir con los ítems del Product Backlog seleccionados para ese Sprint. Estas tareas son más pequeñas y detalladas que los ítems del Product Backlog y son gestionadas en el Sprint Backlog.

React - useRef

programador51 — Tue, 26 Sep 2023 17:58:03 +0000

Summary

Objective
Understand what useRef does
Example with Rendering List
Example with HTML Dialog Element (Modal)
Recommended readings

Objective

Understand the userRef hook and use it on a example to put knowledge on practice. And share my experience with other people.

I'll organize each point of this post with bullets, so you can follow what's my purpose as you read each point.

Understand what useRef does

First, I would like that you read the docs of this topic here, but, in a few words (and with my understanding of the read)

a) useRef stores a variable that do not follows the re-rendering of the app, meaning that his value won't change until you actually do it manually (in a useEffect , on a function execution, etc), is not recommended to save information that relies on other states to apply business logic since his value will reamin static on each render
b) useRef can be link to a DOM element of the UI which returns a Element that allows access to their methods and properties

Example with case A (Rendering list)

Problem: When rendering a list of items on react, a unique value is needed, more about this on the link. However, what the docs tell you is that this unique value needs to be static AND mustn't be created while rendering. React recommends this solution.

I'm gonna explain more with this example and why this is important.

Libraries like react-sortablejs needs an id on the children elements that will have the sortable behavior. But, if you apply the react solution using native solutions like window.crypto.randomUUID() you may have the issue that when you do something on the app (drag and drop for example) the entire app will re-render (that's how react works) and will change the key of your rendering-lists since the the crypto function is gonna execute over and over because it's a function execution, the Virtual Dom will make that the drag and drop resets

Solution

1) Execute the crypto function on the useEffect that fetches your rendering-list. (avoiding create keys while rendering)

I don't do this because having a keyproperty makes noice (at least to me) on the properties of the object, like, what does it means key, what's his purpose on this?

I refuse to do this, but it works

And, if you want to avoid add the key property on the useEffect executing the function on the key property for rendering list, you're wrong

Solution

2) Another aproach is using useRef to avoid having a key property on my object. So I can keep more cleaner my object with only the information that's needed.

Example with case B (Manipulate DOM to create a modal)

Problem: When creating a modal in react there's some considerations in order to create it, like:

Must overlap all the elements behind, being on the top of the top
Must be set on a position (normally on the center on the screen or full screen for mobile)
Configure some accesibility like Esc key to exit modal

Solution

1) To avoid an overhead programming all those features from scratch or using frameworks like bootstrap. It's time to use the dialog html element and useRef to manipulate the element on the DOM.

First of all, create a hook to manipulate the dialog element thorught the DOM

useDialog/index.ts

Then, the hook can be used to create modal withouht any struggle

App.tsx

A Dialog component can be created to set css styles, a footer, header, body, responsive design, etc. Also, the hook can be used apart from the Dialog component that can be created in order to click any html element to open the modal, even programitically. In this way, to manipulate the modal is not hook to a button on the UI.

This HTML Element has a 92% of support on the most important browsers. Compatibility here.

Something to take care, is that this dom element ignores de z-index on css. Meaning, if you have elements that depends on that property, it won't work inside the dialog.

The codes are pretty simple, but of course using HOC and splitting the code into custom hooks or smaller components are recommended in case that the example need to be completed for real purposes. I recommend the following links to know more about these topics that are needed for complete codes

MySQL - Paginar datos

programador51 — Mon, 15 Nov 2021 23:11:06 +0000

Objetivo: Obtener los resultados de forma "paginada" en MySQL, de tal forma que se pueda implementar en una interfaz a la siguiente al entregar los datos mediante una petición GET al cliente

El caso de uso se puede encontrar en el demo de una aplicacion que desarrolle, To Do 51 (Aguarda un momento mientras carga la BD 😅)

Base de datos

¿Cómo obtener los datos paginados?
Obteniendo el rango de inicio & fin para después ejecutar la consulta con ese rango.
Lo ideal, seria que el lenguaje de programación backend ejecute un stored procedure donde solo deba llamar el método junto con 2 argumentos. Algo como lo siguiente:

CALL v1_GetTasksPaginated(1,2)

Donde:

apiPage: Es la pagina que se desea obtener de todo el conjunto de datos. Algunas REST API piden como parametro este argumento. Por ejemplo el siguiente enlace: https://reqres.in/api/users?page=2
apiLimitRows: Este parametro es para indicar cuantos registros se desean obtener por cada paginado. Lo normal seria que que el lenguaje backend tenga este valor en una variable de entorno y siempre usase este parametro para llamar el stored procedure. Algunas REST API permiten que el cliente decida hasta cuantos registros obtener, pero por seguridad el backend deberia limitarlo a uno fijo (o el propio stored procedure).

Para lograr el cometido, se utilizan 3 stored procedures

v1_GetTasksPaginated(?,?)

Query:


BEGIN

    CALL v1_GetTasksPagination(apiPage,apiLimitRows);

    CALL v1_GetTasks(@startRow,@rowsPerPage);

END

El stored procedure consta de dos pasos para obtener la información paginada.

Obtener el numero de registros y calcular el rango a seleccionar acorde a la pagina solicitad
Obtener los registros con el rango calculado

Pero este en particular servirá indicar la pagina y cuantos registros obtener a partir de ella. Es la que se usara por el programador backend para evitar que el se encargue de esta funcionalidad y delegarlo a implementar el JWT, conexión con BD, azure de microsoft, validación del DTO, etc.

Tan sencillo como ejecutarlo de esta manera

CALL v1_GetTasksPaginated(1,2)

Dando como resultado lo siguiente:

Listo para manipularlo en el backend y enviar la respuesta al cliente 😁

v1_GetTasksPagination(?,?)

Este es el encargado de calcular

OFFSET
ROW_COUNT
TOTAL_PAGES (opcional pero lo recomiendo para implementar el 1-2 paginas, 1-5 paginas, etc)

Los cuales serán utilizados en el query que obtiene los datos.

@rows: Aquí se debe obtener cuantos registros existen en dicha tabla aplicando los filtros necesarios si es requerido. Por ejemplo, en mi caso, solo cuento los registros donde su borrado logico es 0 (falso).
@rowsPerPage: Con este nos guiamos en cuantos registros deben existir por pagina. Servirá para un calculo posterior. (Es un input del stored procedure)
@startRow: Esta operación matemática permitirá saber desde que registro n empezar a obtener los resultados. (El offset de LIMIT)
@totalPages: Para obtener el numero de paginas total de los registros, se hace un división de @rows/@rowsPerPage y se redondea su resultado para evitar tener paginas con decimales. No es necesario, pero puede servir para enterarnos cuantas paginas existen.


BEGIN
    -- Recuerda este filtro para mas al rato
    SET
        @rows =(
        SELECT
            COUNT(*) AS noTasks
        FROM
            tasks
        WHERE
            userId = 1 AND logicalErase = 0
    );
    SET
        @rowsPerPage =(
    SELECT
        apiNoRows
    );
    SET
        @startRow =(
        SELECT
            ((apiPage - 1) * @rowsPerPage)
    );
    SET
        @totalPages =(
        SELECT
            CEIL(@rows / @rowsPerPage)
    );

END

v1_GetTasks(?,?)
Este es el query encargado de obtener los datos de la tabla deseada. No se puso en un mismo stored procedure debido a que la clausula LIMIT no permite utilizar variables. Así que se brindan como argumentos del stored procedure para lograr la tarea.


BEGIN

SELECT 
        Tasks.id AS id,
        Tasks.description AS description,
        Tasks.createdDate AS createdDate,
        Tasks.completed AS completed,
        Tasks.userId AS userId

        FROM Tasks

        -- El "filtro" del WHERE debe ser el mismo que el query
        -- que cuenta los registros de la tabla para coincidir resultados

        WHERE Tasks.userId = 1

        AND Tasks.logicalErase = 0

        ORDER BY Tasks.createdDate DESC

        LIMIT apiBegin , apiNextOnes;

SELECT @totalPages AS totalPages;

END

Adjunto el .sql para quien desee importar la base de datos e intentarlo en carne propia el funcionamiento.
Descarga aqui

En cualquier caso, se puede devolver al cliente un JSON con una estructura de este tipo para que sea capaz de pintar la interfaz sin tanto problema.


{
    "status": 200,
    "data": {
        "tasks": [
            {
                "id": 81,
                "description": "Seleccione una fila ;)",
                "createdDate": "2021-10-23T05:20:57.000Z",
                "completed": false,
                "userId": 1
            },
            {
                "id": 80,
                "description": "Aprobar la materia :(",
                "createdDate": "2021-10-23T05:20:22.000Z",
                "completed": false,
                "userId": 1
            }
        ],
        "pages": 3,
        "actualPage": 1
    },
    "errors": [
        null
    ]
}

¿Quieres saber mas de mi? Te invito a revisar mi portafolio 😁

Try js-smart-table!!

programador51 — Tue, 29 Jun 2021 15:05:18 +0000

Hi everyone, today i present you the first library i've created for javascript (front-end/client-side).

Ill give you this link in order to try the demo by yourself.

Basically, tabulates date from an API using javascript and prints it on the browser. Something like this.

What's the interesting of this?

Allows you click on the column and sort the data (sorted by the sql motor that use the API)
Gives you a pagination of the data
Allows you click on the rows and "save on memory" the information (an object with the information of that row). This allows you make another operations (callback) using as reference the data clicked. For instance. You clicked a row and you want to fill a form with that? You can do it! Request to another API? Yeah too. Actually you can do anything.
Vanilla JS. You can use it anywhere (i'm using it right now on React and Vanilla projects) or any library/framework of JS.

I hope this can help you when trying to implement this kind of features on your projects. All it's documented,video and with example codes in order to make it understandable for the community.

Cheers.

NPM LIBRARY HERE

React.js - useReducer

programador51 — Wed, 03 Feb 2021 18:32:51 +0000

Nota: Entrada para quienes no hayan tocado una sola linea de codigo/teoria de lo que hace el hook useReducer

useReducer?

Este hook guarda y manipula el estado de los componentes, asi es, hace "lo mismo" que useState

La diferencia? useReducer permite manipular los estados de manera global en la aplicacion y relacionar los estados para que se relacionen entre si, para que puedan reaccionar dependiendo del cambio de uno u otro estado del sistema entero. Cosa que no se puede hacer con useState.

Cuando usarlo?

Si el proyecto es muy grande, useReducer. No es el hecho de tener un proyecto "grande", si no que al momento de codificar los requerimientos, posiblemente tengas muchos estados en los componentes (y no esta mal), el problema seria tener estados independientes el uno del otro (useState) cuando en realidad trabajan en conjunto para realizar x o y accion en el sistema (como mostrar una pantalla en especifico). En ese caso caso es muy conveniente useReducer. Si no es el caso, se puede utilizar con toda libertad el hook basico de useState.

Para la parte practica con codigo. Platzi tiene una entrada que explica perfectamente como utilizar useReducer y un contraste de hacer el codigo usando useState, para ver esas diferencias a nivel de desarrollo que nos abren los ojos para decidir cual usar, recordar que estos hooks son complementos y no un reemplazo.

useState vs useReducer

Video a manera de recurso y practica visual

A manera resumida, el codigo para utilizar useReducer consiste en los siguientes 3 puntos.

1 - importar el hook al componente

const [count,dispatch] = useReducer(reducer,0);

count: la variable, nuestro estado
dispatch: es un metodo que recibe como parametro la accion que queremos ejecutar para modificar ese state.

Por ejemplo, para count podemos tener varias acciones, incrementar, decrementar, etc. Ya depende de nosotros que hacer para hacer ese cambio de estado segun nuestro criterio.

useReducer: es una funcion, esta recibe dos parametros.

El nombre de la funcion que contiene (despacha) los distintos metodos que alteran nuestro estado de una u otra manera
Es el estado inicial de nuestro estado.

2 - La funcion reducer

function reducer(state,action){
 switch(action.type){
  case 'increment':
  /* blablabla */ 
  return state+=1; 

  case 'decrement':
  /* blablabla */ 
  return state-=1; 
 }
}

Este codigo se almacena en un archivo js distinto a los componentes, la finalidad es poder reutilizarlo en cualquier otro componente.

La funcion recibe 2 parametros.

state: El estado inicial
action: Un objeto. Este objeto contiene los metodos despachadores que se puede ejecutar para alterar el estado

Dentro de la funcion se encuentra un switch del objeto recibido como 2do parametro. Esto ayudara a ejecutar las acciones pertinentes para mutar el estado.

3 usar el hook en el componente

Una vez realizados los puntos 1 & 2, es momento de usarlo en el jsx. (O donde deses)

<button onClick={()=>{dispatch({type:'increment'})}></button>

El metodo dispatch (al que se hizo array destructuring) se ejecuta al momento de que suceda algun evento dentro del DOM. Este metodo recibe como parametro un objeto con la propiedad type que indica cual sera el codigo a ejecutar para mutar el estado.

Reacts.js - Router

programador51 — Tue, 02 Feb 2021 16:01:32 +0000

Antes de explicar que es router y apoyarme de algunos recursos que encontre en internet, me gustaria aterrizar en algo antes de iniciar el tema para comprender mejor este concepto de Router.

SPA

En resumen, una SPA carga todos los assets necesarios una sola vez para mostrar el sitio web, de esta forma, al navegar entre pantallas el navegador no se ve en la necesidad de recargar la pagina para mostrar esa "nueva pantalla" con su informacion e interfaz correspondiente. Las web tradicionales (por aquella epoca de los 2000) difieren mucho de las SPA.

Esto nos brinda una experiencia mas similar a si estuvieramos en una aplicacion de escritorio o movil.
De hecho, hay mucho por que hablar acerca de este tema. Pero seria muy extenso y fuera de contexto hablar de ese tema al 100% en esta entrada. (Dejo como referencia el siguiente enlace con muy buena informacion acerca de este tema)

Arquitectura de un SPA · Desarrollo de aplicaciones web. (NA). dev.to.

El punto de mencionar a las SPA es, si renderizan todos los assets de una sola vez, para no tener que hacer refresh del navegador.

Como sabe el navegador que pantallas e informacion mostrar si la aplicacion web cargo toda la informacion de golpe?

Bueno, a travez de las ruta url del navegador de internet.

Un sencillo ejemplo de esto es la nueva version de facebook. Cuando ingresas por la aplicacion web, el navegador carga una sola vez,y de ahi, no importa a donde navegues, la pagina nunca se refresca. Y, para diferenciar las distintas pantallas de la app, se utiliza la url. Para entrar a algun perfil por ejemplo

https://www.facebook.com/juanchitoperez/

Con esa direccion uno puede entrar directamente al perfil de Juan, sin tener que hacer la navegacion inicial para llegar hasta ahi.

Para poner un ejemplo practico, anexo este video que se pone manos a la obra con codigo para implementar rutas en un proyecto de React.

No esta de mas mencionar, que la direccion URL del navegador no solo sirve para indicarle a React que componentes mostrar en pantalla, si no que tambien sirve para obtener informacion de una API en formato JSON (nuestra base de datos).

Hay mucho de que hablar acerca de React Router, como se implementa, que parametros lleva esta libreria, etc.

Solo, por poner una demostracion corta.

1) Instalar la libreria

npm install react-router-dom

Una vez con la libreria (y un proyecto iniciado, aunque sea en blanco)

2) Se deben importar a la "App" todas las vistas del sistema. Junto con algunas funciones de la libreria que se descargo

import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'; //Es un hecho esta importacion
import Login from './components/auth/Login';
import NuevaCuenta from './components/auth/NuevaCuenta';
import Proyectos from './components/proyectos/Proyectos';

Una vez importadas todas las pantallas.

3) En la funcion de la App, dentro del return, se maneja una sintaxis y esquema como el siguiente

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Login}/>
        <Route exact path="/nueva-cuenta" component={NuevaCuenta}/>
        <Route exact path="/proyectos" component={Proyectos}/>
      </Switch>
    </Router>
  );
}

De esa manera, al navegar entre cada url, se mostrara la pantalla correspondiente, asi como tambien la solicitud a la base de datos (si es que esta programada y configurada).

Hay mucho mas por hablar (acerca del codigo), por esa misma razon, recomiendo ver el video que anexe unos parrafos arriba, ya que todo se aprende mediante practica y un tanto de lectura.

En la documentacion hay mas informacion acerca de esto, incluso guias de como se utiliza, de forma muy detallada.

Con esta pequena lectura te llevas...

Que es Router en React.js ?

Es practicamente una forma de "enrutar" los dominios y subdominios de la aplicacion web para indicarle a react que informacion y componentes traer al escuchar cierta direccion.

Para que se utiliza Router?

En terminos simples, para "desmenusar" la aplicacion en diferentes pantallas/vistas. Por ejemplo, una pantalla de log in, una pantalla de registro, un panel exclusivo para usuarios autenticados, etc.

El resto, es practica con codigo ;)

React.js - Conceptos básicos para empezar

programador51 — Sat, 23 Jan 2021 15:42:44 +0000

Extensiones recomendadas para VS Code al momento de trabajar esta librería

Bracket Pair Colorizer
ES7 React/Redux/GraphQL/React-Native snippets
Simple React Snippets
React/Redux/react-router Snippets

Contexto

Antes de iniciar a codear, hay algunos conceptos que debes conocer antes de empezar, no se trata de javascript esta entrada, (almenos no tanto) si no de conceptos que yo recomiendo conocer y haber practicado de alguna forma

1) Administrador de paquetes : Es una forma que nos administra el código de otros desarrolladores de forma muy sencilla. Haciendo la implementación de funcionalidades (de otros programadores) mucho más sencillo.

Ejemplo: Tu tarea es hacer una app web que pueda convertir un html a pdf. Obviamente no lo harás desde cero, porque posiblemente alguien (antes que tu) ya lo hizo, así que tomas su código para hacer la tarea encomendada. Tienes dos caminos.

Sin administrador	Con administrador
1. Buscar la funcionalidad en un lugar como github 2. Analizar el código y extraer lo de nuestro interes 3. Descargar el código que depende esta funcionlidad (si la hay) 4. Repetir del paso uno al tres hasta que seamos capaces de ejecutar la funcionalidad que necesitamos	1. Buscar la libreria en el repositorio 2. Instalar con un simple comando en la carpeta del proyecto 3. LISTO!

Recordando que sin el administrador todo es manual, ahora, ¿te imaginas si sale una actualización? Que martirio seguir el hilo para hacerlo a mano.

Algunos administradores de paquetes son:

npm (Javascript)
maven (Java)
pip (Python)
yarn (Javascript)
composer (PHP)

2) Transpilador : Estos se encargan de convertir un lenguaje de alto nivel a otro de alto nivel. ¿Esto para que? Recordemos no todos los navegadores van a la par con respecto a las nuevas funcionalidades que añade ES, es por eso, que debemos codear en versiones antiguas para que los navegadores tengan soporte de la aplicación. Por ejemplo, no todos los navegadores soportan import, la solución sería escribir en un lenguaje mas antiguo de JS para que funcionara, pero hacer eso es complicado, entre más retrocedamos en la sintaxis de JS, menos maduro es el lenguaje.

La solución, es utilizar un transpilador que haga el trabajo sucio por detrás

3) Empaquetador de módulos (module bundler) : Lo que hace es preparar los patrones de diseño para el entorno de trabajo que utilizaremos en el desarrollo de la aplicación. Por ejemplo, cuando utilizas un framework, normalmente vez que se realiza una estructura de carpetas, archivos base, etc. Algo como esto.

Pero no solo eso, el empaquetador también permite unificar los distintos módulos que hay en el proyecto, de esta forma tenemos el código "en uno solo", organizado y con el peso mínimo (hablando en espacio de memoria). En esencia, un Empaquetador de modulos nos permite organizar el código de Javascript

4) Linters (ESLint) : Son "asistentes" que nos soportan en la escritura del código. En la siguiente imagen, se muestra un código, una línea que digamos se esta escribiendo para implementar alguna funcionalidad, lo que hacen los Linters es mostrarnos esos errores y asistirnos en lo que esta fallando, e incluso recomendaciones para tener un mejor código. Como eliminar variables que no estemos usando, variables declaradas sin un valor, etc.

| Video-guía de los cuatro puntos anteriores |

5) Librería : Se trata de una serie de código que realiza una función en especifico, por ejemplo, mandar un mail de restauracion, obtener un excel de algun server como mediafire y transformar las tablas en json, etc. Su misión es cumplir con la tarea cometida (que normalmente es una tarea pequeña, sencilla) y se puede implementar al proyecto con toda libertad. |Documento|

Las librerías son independientes de cada proyecto, eso quiere decir que se pueden implementar con el patrón de diseño y administración del programador. Crear carpetas, poner archivos en tal carpeta, etc. Es criterio de cada persona/grupo de desarrolladores organizar el código.

6) Framework : Es un conjunto de librerías y utilidades que se ofrece al desarrollador para trabajar de manera más ordenada y eficaz posible. Se diferencia de una librería porque se adopta un patrón de diseño y metodologías en el desarrollo del código. Se debe acatar las "practicas" que se documenta en el framework. Hacer esto tiene la ventaja que el código puede ser entendible para la mayoría de los desarrolladores que trabajen sobre el mismo framework ya que el código esta estructurado de una manera estándar. |Documento|

Pregunta - ¿React.js es librería o framework?

Respuesta aquí

7) JSX : Es una extensión de Javascript que permite describirle a React.js como debe ser la plantilla a renderizar.
Es una sintaxis parecida a HTML, pero no es HTML, es una extensión de JS para indicar como debe ser la plantilla que se renderiza (persona la redundancia, pero había que dejarlo muy claro) |Documento|

8) API :

Las API son funciones de programación que sirven para manipular diferentes aspectos del navegador y el sistema operativo que ejecuta el sitio, o manipular datos de otros sitios web o servicios. -Mauricio Garcia

Para ponerlo asi de sencillo, son funcionalidades que nos ofrece un tercero, por ejemplo, hacer login con facebook, utilizar datos del servidor para nuestro sistema, etc. Pero no se limitan a solo datos o funciones que obtenemos desde un servidor ajeno al sistema. Los navegadores de internet ya tienen sus propias APIs, el gps, micrófono, cámara, hablar con voz de loquendo el texto pasado como argumento, etc. Las APIs no se limitan a solo servicios de "la internet".

Las API se caracterizan por manipular la información en formato JSON, la razón de esto es que la información con este formato es entendible para la mayoría de lenguajes de programación.

Con las API solo podemos enviar y recibir información, es todo, el "backend" queda restringido, solo podemos hacer uso de esas funcionalidades pero sin ver como esta hecho.

| Documento |

9) API REST : Digamos que son una especie de reglas y estándares que indican como debe de ser un API.
Por ejemplo, para hacer login en utilizando Facebook, ellos deben seguir estándares de seguridad, una forma de estructurar los datos para poder servirnos de sus funcionalidades, etc.

Antes de...

Estos conceptos se van a utilizar, y, si no los conoces, puedes ir aprendiendo "sobre la marcha". Por ejemplo, para iniciar los proyectos de React se utiliza un administrador de paquetes o cdn. Y lo recomendable (desde mi punto de vista) es estar familiarizado para no desviarse tanto del aprendizaje de esta librería.

Ya podemos seguir con React.
A decir verdad, la documentación y tutoriales son buenos. Si sirven para apoyarse y aprende de ahí, así que iré mencionando en orden los temas para que puedas hacer lo correcto en la ruta de aprendizaje. Gatear, caminar y luego correr. De igual forma anexare lista de reproducción con cursos gratuitos acerca de estos temas para poder hacer la practica de alguna manera y no solo tener una "guía" escrita.

1) Para partir ¿Qué es React JS y como funciona?

Sugiero empezar con ese video, nos explica el chiste de utilizar esta librería. Si eres de los que se quedaron estancados o estudiando algo como la metología LAMP en desarrollo web, la forma en que react funciona cambiara por completo tu esquema, y para bien, de hecho, una mejor forma de hacer desarrollo web

2) Instalar y preparar el entorno

Manos a la obra para iniciar en React, para eso se debe instalar la librería con un administrador de paquetes (a menos que quieras hacerlo manual, no lo recomiendo) que prepare el entorno de trabajo.

3) Crear un componente y practicar los conceptos.

Lo primero sería crear un componente. Hay que dejar claro, que para crear un componente hay varias formas.

Function components (JS con funciones)
Class components (JS con POO)
Function components + Hooks

La tercera opción es lo más nuevo que hay, y la mejor forma de crear componentes. Eso no quiere decir que las demás opciones sean inservibles, pero paulatinamente los proyectos que se hallan basado un desarrollo sin hooks, paulatinamente (mi opinión) dejaran de existir, o sera cada vez poco común ver proyectos hechos de esa forma. Recomiendo programar con Function Componentes + Hooks, pero ya es criterio de cada quien.
Recuerda, cuando mencionen Hooks, es la forma de crear componentes de la forma más actualizada que se conoce hasta la fecha. Pero, para iniciar en Hooks recomiendo ampliamente empezar por aquí para crear tu primer componente, ya sea utilizando clases o solo funciones.

*| Crear componentes en react - Guia de la documentacion *|

Tambien te puedes apoyar de este curso si prefieres ver que leer. SOLO SI QUIERES PROGRAMAR CON CLASES O FUNCIONES, la verdad, es que no es tan necesario, puedes pasar directamente a intentar programar con Hooks sin ningun problema. De hecho, este punto #3 solo esta de referencia para que sepas que hay varias formas de hacer componentes, no solo una. Mi opinion, pasa directamente a Hooks

Al final de ese curso y documentación, deberías ser capaz de realizar algo como esto. Usar localStorage para guardar la informacion, validar los campos no esten vacíos, y sobretodo, utilizar componentes con estados y paso de parametros entre cada uno.

| Ejemplo de proyecto que puedes proponerte a reliazar |

4) Hooks

Hooks son una nueva característica en React 16.8. Estos te permiten usar el estado y otras características de React sin escribir una clase. - Documentación de React.js

Hooks vino para solucionar el problema de los estados que había en la programación utilizando solo funciones o clases. Ya que carecen de alguna sintaxis que permita manipular los estados de un componente sin utilizar "trucos" raros que solo enrollan más el código. Si usaste los recursos del punto #3, ya sabras de lo que estoy hablando.

| Guía para Hook |

Puedes volver a intentar realizar | Ejemplo de proyecto que puedes proponerte a reliazar | pero con Hooks, y veras la diferencia en el código si no llegas a utlizarlo

Check list de conceptos/habilidades en React (al iniciar)

A continuacion una lista de las cosas que deberías saber y tener muy claro antes de avanzar a algo más avanzado en React.js, los tutoriales anexados en esta entrada debieron haber abarcado estos puntos.

Carpetas de React

Al iniciar un proyecto, siempre se debe preparar el espacio de trabajo. La librería por default nos da un comando que prepara las carpetas, librerias dependientes, etc. Prácticamente nos "deja" todo listo para que nosotros hagamos la magia.
npx create-react-app my-app

Más información al respecto

Estructura de un componente en React

Cuando se crea el entorno de trabajo, todo esta listo para hacer el código. Recordando la filosofía de React, se trata de agrupar el código html, css y javascript acerca del componente que se va a crear. En un contexto de formulario...

Se podría traer el css del formulario, escribir las validaciones Front-End dentro del componente, escribir el jsx que da el esqueleto del formulario. Opcionalmente, importar otros componentes, por ejemplo, alguno de botones que ya hallamos creados o bajado por Internet. El siguiente código tiene un esqueleto de lo "básico" que podemos aprender como principiantes, y, entre más practica meter mas conceptos avanzados.

import React from 'react'; //Es un hecho, es la librería en si
import './Formulario.css'; /* Ruta del archivo css
que se creo para el componente*/

const MiComponente = () => { /* Nombre del componente*/
    return ( 
        <form>
            <p>Aqui va mi codigo "HTML" (JSX)
                para darle esqueleto al componente
            </p>
        </form>
     );
}

export default MiComponente;

Esa sería la estructura básica que se debe escribir al crear un nuevo componente, adicionalmente

props

1) En el componente padre se le pasan los parámetros al componente hijo

<Header 
key=1
titulo='Tienda Virtual'/>

2) En dicho componente que recibe los valores

function Header(props){
    return(
        <h1 className="encabezado">Mi titulo : {props.titulo}</h1>
    )
}

Esta bien el codigo de arriba, pero, para evitar tener que escribir props + nombreAtributo se hace destructuring para tener las variables de forma "directa".

Por ejemplo : Si quisiera pasar una fecha al header. Tendria una variable con la fecha.

const fechaActual = new Date().getDate();

Y, en vez de hacer esto

<Header titulo='Tienda Virtual'
key=1    
fecha = fechaActual/>

1) Se pasan los parámetros del componente padre al padre hijo (de la siguiente manera)

<Header 
key=1
titulo='Tienda Virtual'
fecha = {fechaActual}/>

2) En el componente hijo que recibe esas "propiedades", en vez de hacer esto.

function Header(props){
    return(
        <h1 className="encabezado">Mi titulo : {props.titulo}</h1>
    )
}

Hacer esto

function Header({titulo,fecha}){
    return(
        <Fragment>
        <h1 className="encabezado">Mi titulo : {titulo}</h1>
        <p>Hoy es {fecha}</p>
        </Fragment>
    )
}

En consecuencia, se pasa directamente "la variable" y no hay necesidad de hacer referencia con props.atr. Esto es debido a que props es un objeto, por esa misma razón se hace el destructuring, para tener en variables las propiedades de dicho objeto y ser usadas de forma directa.

¿Es necesario hacer esto? No, pero ayuda a que el código sea más limpio.

NOTA: En cada componente, es obligatorio pasar como atributo la propiedad key con un valor único como identificador, esto le ayuda a react a poder distinguir los componentes. Si bien, solo existe un header (o es lo normal), otros componentes como botones, tarjetas se pueden repetir varias veces y es necesario distinguir uno de otro para saber cual de todos manipular.

React Hooks

A partir de la version 16.8 se agrego esta nueva forma de escribir código en React, de momento, tal vez no todos los proyectos hechos con esta libreria tengan ese "soporte" ya que es casi nueva. Pero, es la nueva forma (definitiva) de escribir código. Mucho mejor que la forma de escribir el código antiguo por varios motivos. La razon es...

Permite actualizar el State sin necesidad de crear un class Component
El código se reduce considerablemente a comparación de la forma antigua de escribir código (functional componentes y class components).

Existen 2 tipos de Hooks

Básicos	Avanzados
useState	useContext
useEffect	useRef
	useReducer
	userCallback
	useMemo

Bien, estos hooks, ¿es necesario aprenderlos todos? De momento, mi respuesta es no. No conozco a alguien (todavía) que domine al 100% algún lenguaje de programación junto con sus librerías o frameworks. Aqui es lo mismo, no es necesario aprenderlos todos.

De hecho, lo que te debes llevar de esta lectura (spoiler) seran los siguientes conceptos.

useState
useEffect
Conceptos/Nociones de como funciona React.js

Ojo, estos hooks avanzados no son los únicos, existen más, pero estan enfocados a resolver problemas de Facebook o similares, pero siendo honestos, no creo que muchos de los lectores necesiten utilizarlos porque su proyecto sera un sistema distribuido con millones de peticiones por segundo.

useState

Una de las cosas que hace React.js es dibujar HTML y darle cierta funcionalidad al sitio web. Esto se hace con useState
Esta maravilla vino para solucionar los problemas que había al codificar con clases o funciones. No entrare mucho en detalle, pero, al utilizar useState nos ahorramos muchas líneas de código y código mas de los necesario para reutilizar los componentes que nos permite crear el DOM de una manera modularizada y eficaz.
Antes de continuar con la lectura, recomiendo ampliamente revisar este video que contrasta las diferencias entre el antes y despues de codificar en React.js

No voy a discutir, sobre si deberias aprendar a codear con hooks o sin hooks, pero en lo personal pienso que es más sencillo aprender esta "metodología" para dejar de lado la antigua codificacion.

Este Hook no viene importado por default al llamar la librería de React, para utilizarlo, se hace la siguiente linea de código.

import React,{useState} from 'react';

Con esto, ya somo capaces de utilizar la siguiente función o línea de código.

const [clientes,guardarCliente] = useState();

Entrando en profundidad... Use state nos permite hacer un array destructuring.

1) El primer valor clientes es el nombre de la variable, el nombre de nuestro estado con el cual podemos hacer la referencia del estado.
2) El segundo valor, es una "función" que nos permite cambiar el estado de la variable.

Todo ese array es igual a useState();, esta "función" denota el valor de nuestra variable (estado). Dentro de la funcion pasamos como parametro el valor inicial (si es que lo hay). Por ejemplo...

const [clientes,guardarCliente] = useState(['Pepito','Sandra']);

Eso, nos indica que tenemos un "estado" llamado clientes que tiene como valor inicial a 2 personas (Pepito y Sandra). Y, para que los clientes cambien de estado, se hará uso de la función llamada guardarCliente, (ya te imaginas que hará guardarCliente, ¿verdad?)

Asignación de useState

Retomando

const [clientes,guardarCliente] = useState(['Pepito','Sandra']);

A lo largo de la ejecucion, en algun momento voy a querer guardar un nuevo cliente, ya sea para tenerlo en mi lista con mails automatizados, mandar promociones, etc.
Si quisiera guardar un nuevo cliente, alguien que sabe javascript haria lo siguiente

clientes.push('Maria');

Y en efecto, ahora tendría un arreglo con 3 clientes. Pero esto no es la forma correcta de hacerlo, React tiene su "filosofia" donde no debemos alterar directamente el estado de nuestra variable. Por eso existe esa funcion como segundo valor en el destructuring.
Si te preguntan:

¿Se debe modificar el useState directamente? Tu dices...

¿Entonces como lo hago?. Con la funcion del state. En este caso, se esta manipulando un arreglo, y lo que se necesita, es agregar un nuevo cliente al estado de clientes. Para eso, nos podemos apoyar el método para arreglos spreadOperator.

guardarCliente([...clientes,miNuevoCliente]);

De esa forma, se ha agregado el nuevo cliente pero sin modificar directamente el estado. Esa el a forma correcto de cambiar el estado. Ya sea para agregar, eliminar, etc. Cualquier acción que se necesite cambiar en el estado, no debe ser de forma directa. Se puede, pero no es lo correcto

useEffect()

La tarea principal de React, como había dicho en el punto de useState es pintar el DOM con Javascript y poder alterar el estado para re-pintar un nuevo DOM con las nuevas modificaciones.

¿Entonces React solo sirve para eso? Vaya perdida de tiempo

Pues no, la librería permite hacer aplicaciones web ¿ya capte tu atención, no? Vamos a intentar aterrizar en algo antes de explicar que useEffect.

Por defecto, con el código de Javascript podemos hacer varias cosas en el navegador, como consultar una API para extrar datos, utilizar las APIs del navegador para hacer uso del gps, micrófono, etc. Eso con JS

Pero React, por contraparte, no puede realizar tales acciones. Pero si podemos actualizar el estado del DOM.

A lo que voy es, que React permite hacer un "puente" con Javascript.
React le comparte a JS como se debe pintar el DOM mientras que JS le comparte la información que ha "computado" a React para que haga el código que se encarga de volver a pintar.

Entonces...
¿Qué es useEffect?

Es una función que se ejecuta cada vez que el useState se actualiza o cambia de estado. Esta función por detrás hace "código" para poder crear aplicaciones web (obtener la información de APIs, por poner un ejemplo). Esta información "computada" sirve para crear el DOM con un poco más de criterio y no solo el html escrito en "crudo" por nosotros.

Para este concepto, recomiendo ver el siguiente vídeo. Sin duda una explicación muy completa con ejemplo practico para entender de que va esto del useEffect. Antes de revisar el enlace, ya debe estar muy claro que es useState (y haberlo practicado en algún ejemplo sencillo, de preferencia).

/* SE EJECUTA CADA QUE EL USESTATE CAMBIA DE ESTADO */
  useEffect(()=>{
    console.log('Navegador cargó o algo pasó en useState');

  /* COMO SEGUNDO PARÁMETRO (opcionalmente)
  UN ARREGLO VACIÓ PARA QUE SOLO SE EJECUTE 1 VEZ */
  },[]);

[] que es el segundo parámetro de la función, es para escuchar los cambios de useState

PropTypes

Son una forma de documentar los componentes.

Se importa de manera normal el modulo

import PropTypes from 'prop-types';

Y normalmente, antes del export default se hace la documentación, de esta manera.

Formulario.propTypes = {
    crearCita: PropTypes.func.isRequired
}

nombreComponente seguido de un . seguido de propTypes. Todo es es igual a un objeto el cual contiene el nombre de la propiedad(es) como atributo. El valor de dicho atributos es...

PropTypes (o el nombre que le hallas puesto al modulo que importa por default) seguido de . seguido del tipo de valor que recibe ese atributo. Opcionalmente puedes agregar mas "métodos" como .isRequired (es atributo obligatorio que debe recibir el componente) para denotar mas información

Eventos de React

Partiendo de este código

document.getElementById('caja').addEventListener("click",rellenarFondo);

Con eso, se rellena el background de un elemento div. Es lo que se conoce como eventos en el DOM, ya sea ondrop onclic mousedown etc. Todo esto, tambien se puede manejar en React, pero ya tenemos eventos en esta librería. ¿Como se utilizan los eventos entonces? Si no es "correcto" utilizar directamente el código de Javascript.

1) Al momento de crear un componente, se le puede pasar en las propiedades un atributo con el nombre del evento. La pregunta es, ¿y que eventos puedo manejar? Bueno, eso viene en la documentacion de React en este link . Es cuestion de revisar cual se necesita.

2) Esa propiedad, debe ejecutar una funcion. Una accion al capturar el evento. Entonces, como valor, se le pasa UNA FUNCION FLECHA QUE EJECUTA UNA FUNCION (callback)

Esto se explica mejor con código... Un ejemplo
Dentro del componente, se crea una función expresiva de tipo flecha de JS, por ejemplo, un console.log

const saludo = () => {
 console.log('Hola mundo!');
}

Lo que sigue es pasar en los atributos el tipo de evento y la accion que va a realizar en consecuencia

<button>
type="button"
onClick = {()=>saludo()}
Saludar!
</button>

Con esto, al presionar el botón se mandara un saludo por consola, el evento puede ser cualquier mientras sea una función de tipo flecha que ejecuta una función expresiva del tipo flecha.
Esto tiene una razón, al hacer el código de esa forma, los eventos no se ejecutan al cargar el código del script, si no que esperan a ser accionados para realizar tal tarea.

Fragment

Retorna los elementos del componente sin necesidad de estar en una etiqueta contenedora

import React, {Fragment} from 'react';
<Fragment></Fragment>

Conclusión

Para iniciar a crear aplicaciones dignas de mostrar a un reclutador en alguna entrevista de trabajo, es aceptable iniciar poniendo en practica useState y useEffect. (Hooks, recomiendo encarecidamente utilizar esa nueva forma de escribir código)

Más las nociones de ¿qué es React? Ventajas de React ¿Para que utilizarlo? Las buenas practicas ¿Cómo es la forma de "pensar" al crear aplicaciones web utilizando esta librería? ¿Qué son los componentes? Etc.

Esto, solo ha sido una "recapitulacion" de los "3 pilares" a dominar en React.

¿Qué es y como trabaja React?
useState()
useEffect()

Queda implicitamente que ya dominas o te defiendes muy bien en el lenguaje de Javascript. De lo contrario, puedes checar esta entrada

Para ver en practica el código de los Hooks, esta serie de videos puede ser buena opcion para poner manos a la obra lo que se abarcó en esta entrada.

¿Qué son la Cookies?

programador51 — Fri, 08 Jan 2021 18:33:43 +0000

¿Alguna vez te has topado con esto?

Eso, son las Cookies.

¿Qué son?

Son archivos que el navegador crea cuando entras a un sitio web. Se guardan en el ordenador con información diversa de la actividad hecha en ese sitio web.

Por esa razón, la ventana emergente tiene un botón de aceptar o rechazar, donde aceptamos dicha acción. Y como dicen, sobre aviso no hay engaño.

¿Que tipo de información contiene?

Preferencias básicas de navegación

Idioma, de esta forma el sitio web siempre estará en el lenguaje que nosotros establezcamos.
Moneda, así los precios se reflejan al de nuestra zona
Carrito/Likes

Información avanzada

Número de visitas que has hecho en el sitio web
El tiempo que has estado utilizando el sitio web
Los clicks que has realizado en determinadas pantallas de la pagina

¿Para qué son?

Ofrecen una experiencia mas personalizada y navegar de forma más comoda. Un ejemplo más claro son los "toggle button" que están implementando algunos desarrolladores para activar y desactivar el modo oscuro en los sitio web. Pese a que no tengas alguna cuenta en su sistema, tu configuracion del dark mode se mantiene a pesar de que cierras la pagina, esto se debe a las cookies

Tipos de Cookies

Temporales

Son cookies que se eliminan cuando dejan de ser útiles.

Claro ejemplo cuando inicias sesión en Facebook, cada vez que entras no debes volver a tipear las credenciales, ya es directo.
Pero, cuando cierras sesión, estas cookies se eliminan por razones de seguridad.

Permanentes

Estas se alojan en una carpeta del navegador y no se eliminan nunca. (a menos que tu lo hagas manualmente), un ejemplo es cuando entras a sitios de vuelos para buscar precios y destinos en tus próximas vacaciones, inicialmente optas por vuelos que sean hacia Europa, pero decides revisar en días posteriores para ver si lanzan algún descuento o promoción. Pueden suceder muchas cosas, como ver precios alzados o precios difíciles de rechazar, y no es que esten en promoción, si no que las cookies han realizado alguna "especie de marketing" para que compres algún vuelo. Esto seguirá persistiendo hasta que no borres las cookies por tu cuenta.

De terceros

Son cookies creadas por terceros, es decir, un agente externo al sitio web que estas navegando. Un ejemplo de esto es Amazon Advertising, cuando tu navegas en la tienda y buscas latops dell, ellos ya tienen el target de lo que buscas para darte una serie de recomendaciones. Hasta aquí, todo bien.
Pero que sucede si vas y lees el blogger de alguna persona. AL COSTADO SALEN ANUNCIOS DE ESAS LAPTOPs DELL, bueno, esto no es porque blogger tenga un mecanismo de espionaje, si no que permite las cookies de Amazon, ellos son las responsables que esas laptops te persigan a donde los cookies de Amazon puedan entrar.

¿Las cookies son seguras?

Si y no, todo depende de quien sea el responsable del sitio web que visites.

Amazon nunca usaría las cookies para fines maliciosos.

En cambio www.tortillerasqueamasantumasa.com salta miles de anuncios al entrar, el navegador advierte peligro en el sitio y ademas aseguran ser "Soporte técnico de Microsoft que han detectado un virus". Es muy claro que si aceptas las cookies puedes esperar algo malo.

Si eres muy paranoico con este tema, siempre puedes abrir el modo privado para que las cookies nunca se almacenen en tu navegador.

| Recurso de la entrada |

Conocimientos de Javascript que debes conocer antes de aprender React.js

programador51 — Fri, 08 Jan 2021 03:37:32 +0000

Contexto
React.js utiliza Javascript para crear el front-End de los proyectos que nos interesa desarrollar (más conceptos básicos de HTML5 y CSS). Pero no solo eso, si no que utiliza extensiones y mejoras que se le han dado al lenguaje para sacarle más partido.

Es por eso, que hay que estar actualizados en lo que respecta de Javascript, de lo contrario, no entederemos muy bien al momento de estudiar y practicar esta libreria, ya que esos son sus pilares.
De hecho, los objetos son todo en Javascript, así que debes irte con la mente de que si o si usaras POO en el caso de usar React.js

Aunque la lista se vea "grande", no es broma que se utilizan al momento de codear en React.js , no intentes avanzar a algo mas experimentado hasta que no te asegures de dominar los puntos que muestro a continuación.

NOTA: Recomiendo leer o revisar la video-guías que deje anexado al final de cada punto, algunos temas son bastante extensos y pienso que esos recursos pueden explicarlo mucho mejor que yo, la entrada es una "check list" para que te des una idea si puedes entrar de lleno o necesitas indagar alguno de los puntos porque lo desconocías o no dominas muy bien. Tampoco debes considerar esta entrada como algo "oficial" si no como un recurso más de referencia para buscar la información que necesites.

Lo que debes de saber

Ecmascript

Ecmascript es un estándar que define cómo debe funcionar un lenguaje (JS en este caso). Esto ha resultado en tener mas funcionalidades y mejoras de lo que era JS en sus inicios de 1995 hasta la actualidad. Tal vez te suene ES6 o ES7, bueno, estas son "versiones de JS", entre más nueva, más y mejores cosas tenemos en el lenguaje. Si tu plan es aprender React.js o Node.JS, tienes que aprender ES primero, de lo contrario, todo lo que veas te sonara en chino. De hecho, todos los puntos restantes, pertecen a conceptos de Ecmascript. | Curso de ES |

var, let & const

Antes, para declarar variables en JS, solo se podía hacer con var, esto ha cambiado, ya existen otras alternativas como let y const. var es cosa del pasado, si bien utilizarlo no tiene nada de malo, tiene sus inconvenientes y es por eso que han sido desplazadas por let y const | Documento del tema | Video-Guía |

Scope de JS

El scope de una variable hace referencia al lugar donde esta va a vivir , o podrá ser accesible. - Juan Bori

En esencia, sería utilizar el bloque de código en el que nos encontramos, y, en caso de no contar con los elementos necesarios para realizar las operaciones necesarias, extender el foco y mirar los bloques de códigos adyacentes. Y así sucesivamente hasta encontrar las variables y funciones que se necesiten.

Por ejemplo, el siguiente código imprime la palabra 'Television', por que el "scope" de la función se basa en la información que esta delimitada por sus corchetes

let objeto = 'Mascota';

function estoyEnMiCasa(){
    let objeto = 'Televesion';
    console.log(`Estamos imprimiendo ${objeto}`);
}

estoyEnMiCasa();

Ahora, que sucedería si la función estoyEnMiCasa() no tuviera ningún objeto, tan pobre que no tengo nada en la casa y por ende, ningún objeto que imprimir. Bueno, lo que hará la función es extender su búsqueda fuera de la los corchetes (es decir, un nivel más arriba) y tomar el primer elemento que encuentre para mostrarlo en pantalla.

let objeto = 'Mascota';

function estoyEnMiCasa(){
    console.log(`Estamos imprimiendo ${objeto}`);
}

estoyEnMiCasa();

Recomiendo echar un vistazo a los recursos para que te enteres con ejemplos más "difíciles" de lo que es el scope, pero al menos ya tienes una idea.

| Documento del tema | Video-guía |

Template Strings

Son plantillas que nos permiten incrustar uso de expresiones (prácticamente concatenar para obtener un string)

La sintaxis para los template strings es la siguiente

let miVariable = 'Como este';
//Sintaxis template strings
//1. Comillas invertidas : ``
//2. Cualquier texto dentro de las comillas invertidas : `Hola`
//(Puedes utilizar con toda libertad espacios, 
//saltos de línea, tabulaciones, etc)

//Sintaxis concatenar variables
//1. Signo de dolar : $
//2. Seguido de unos corchetes: ${}
//3.Dentro de los corchetes va el nombre de la variable
console.log(`Cualquier texto ${miVariable}`);

La pregunta es, ¿por qué template strings y no la forma tradicional de JS si ambos pueden hacer lo mismo? Muy sencillo, template strings es mas manejable y sencillo de leer. Hecha un ojo al siguiente código.

const nombre = 'José Luis';
let edad = 22;
let nacionalidad = 'Mexicano';

let elementoIncrustarDOM = `
<ul>
 <li>Mi nombre es ${nombre}</li>
 <li>Mi edad es ${edad}</li>
 <li>Mi nacionalidad es ${nacionalidad}</li>
</ul>
`;

Ahora solo necesito hacer un innerHTML de let elementoIncrustarDOM para verlo en el navegador por pantalla. Si ya sabes Javascript, ya te imaginas como sería su equivalente poniendo los símbolos de + y cerrar comillas entre cada texto/variable, muy tedioso y difícil de mantener

| Documento del tema | Video-guía |

Funciones - "function declaration"

Estas funciones tienen la característica de que pueden ser llamadas sin importar el orden que tengan dentro del código, el siguiente código por ejemplo.

//El código se ejecuta sin problema
console.log(multiplicacion(1,10));

function multiplicacion (a,b){
    return a*b;
}

En otros lenguajes como C++, intentar llamar una función antes de que sea declarada tira un error por qué "no existe". Pero en javascript no sucede esto, ya que se hace un "mapeo" de las funciones que existan. Por esa razón se puede ejecutar sin problema. | Documento del tema |

Funciones - "function expression"

Para este caso, la sintaxis es distinta. Ya que se guarda la función dentro de una variable. ¿Cual es la diferencia? Que no podemos invocar a la variable (que contiene a la función) antes de que esta sea declarada. El siguiente ejemplo tira un error por la razón que acabo de explicar.

//Eror, el código no se ejecuta correctamente
console.log(suma(1,2));

let suma = function(numeroA,numeroB){
    return numeroA+numeroB;
}
//Si pusiera este trozo de código debajo de la función
//funcionaría correctamente
//console.log(suma(1,2));

| Documento del tema | Video-guía |

Funciones - Parámetros por default

Ya se conoce que si invocas una función que debe recibir 2 parámetros, le debes pasar esos 2 parámetros, de lo contrario la ejecución falla. Pero, se puede declarar y darle valores por default en caso de que no siempre suceda esto.

console.log(informacionEmpleado("José Luis"));

function informacionEmpleado(nombre="Desconocido",puesto="Sin definir"){
    return `El empleado ${nombre} trabaja en el puesto ${puesto}`;
}

El código no falla porque se establecen valores por default en caso de no recibir todos los parámetros solicitados.

| Documento del tema | Video-guía |

Funciones flecha - Arrow functions

Estas funciones cumplen la misma función que las de JS, sus ventajas: una sintaxis más corta y mas fácil de leer/comprender. Su idea es implementar funciones en una sola línea que les permitan ser expresivas y fácil de entender (al ser de una sola línea)

let listaEmpleados = ['Juan','Maria','Sandra'];

//Sintaxis de función flecha
//1. Paréntesis con parámetros a recibir: (lista)
//2. Símbolo: => (De ahí el nombre, parece una flecha)
//3. Paréntesis junto con el código de la función
// {ALGÚN CÓDIGO DE JS}
let numeroEmpleados =  (lista) => {return `La empresa tiene ${lista.length} empleados`;}

console.log(numeroEmpleados(listaEmpleados));

| Documento del tema | Video-guía |

Object literal

Un objeto es una colección de datos relacionados y/o funcionalidad
En javascript podemos asociar una variable con distintos atributos. Algo como lo siguiente.

//Sintaxis
//1. Se declara una variable let persona;
//2. Se asigna a la variable lo siguiente = {}
//3. Dentro del corchete se agregan los atributos y valores
//4. {atributo1:"valorString",atributo2:true} etc...
let persona = {
    nombre:"José Luis",
    edad:22,
    complexion:"Delgada",
    graduado:false,
    familia:['Chris Evans','Jason Statham']
}

console.log(persona);

El problema de object literal, es que se debe crear una variable por cada objeto que se necesite, pero al menos esa variable ya tiene atributos y funcionalidades asociados.

| Documento del tema | Video-guía |

Object constructor

Al igual que object literal, permite crear objetos con distintas propiedades, la diferencia es que este objeto es dinámico, es decir, crear varios objetos que tengan los mismos atributos pero distintos valores.

function Casa(precio,ubicacion,recamaras,baños){
    this.precio = precio;
    this.ubicacion = ubicacion;
    this.recamaras = recamaras;
    this.baños = baños;
}

const casa1 = new Casa(1000000,'Mexico Norte',5,2);
const casa2 = new Casa(2000000,'Mexico Sur',4,1);
console.log(`Precio de la casa1 = $${casa1.precio}`);
console.log(`Precio de la casa2 = $${casa2.precio}`);

| Documento del tema | Video-guía |

Prototypes

Es un mecanismo que permite a los objetos heredar atributos y métodos. Es decir... Prototypes = POO.

En los puntos anteriores se han visto cosas como objetos con sus propiedades y funciones. Si quisiéramos relacionar esos conceptos a POO, se podría decir que...

Las propiedades = Atributos
Funciones = Métodos

Es muy cierto que ya tenemos las sentencias de class o extends, para hacer POO, pero, no significa que el navegador pueda interpretar esas lineas de código, son una forma para nosotros los programadores trabajar más cómodos, pero, tras bambalinas, el interprete esta convirtiendo eso a prototypes.
Aunque no sea necesario seguir usando prototypes (ya tenemos la sintaxis de POO con ES) es importante saber como funciona por debajo esto de los prototypes, no te "precoupes" tanto por este tema (hablando de la gramática) ya que puedes escribir POO usando las sentencias class extends sin ningún problema.

El siguiente código crea una clase, define sus atributos y una instancia de la clase Videojuego.

function Videojuego(titulo,genero,consola){
    this.titulo = titulo;
    this.genero = genero;
    this.consola = consola;
}

const nmh3 = new Videojuego('No More Heroes 3','Hack & Slash','Nintendo Switch');
console.log(nmh3);

Ahora, para definir sus métodos se utiliza prototype, de esta forma le indicamos al interprete que ese método le pertenece a la clase que le indiquemos, de esta forma no se hacen varias instancias del método, solo se hace una vez, eso resultaría en tener buen rendimiento si quisiéramos crear 1,000 instancias de videojuegos, ya que el método es el mismo y solo se esta compartiendo.

function Videojuego(titulo,genero,consola){
    this.titulo = titulo;
    this.genero = genero;
    this.consola = consola;
}

Videojuego.prototype.iniciarPartida = function(){
    /* Algún codigo para validar datos, cargar datos, etc */
    console.log(`Iniciando ${this.titulo}, porfavor espere...`);
}

const nmh3 = new Videojuego('No More Heroes 3','Hack & Slash','Nintendo Switch');
nmh3.iniciarPartida();

Herencia prototipica - Prototype inheritance

Se trata de, crear una clase que herede ("comparta") los atributos y métodos de otra. De esta forma evitamos hacer copias de los atributos y métodos que ya existen. (Traducido en mal rendimiento y eficiencia)

1.Se crea la clase y métodos padre

/* CLASE ANIMAL (PADRE) */
function Animal(nombre,tamano){
    this.nombre = nombre;
    this.tamano = tamano;
}

/* METODOS DE LA CLASE ANIMAL */

Animal.prototype.comer = function(){
    console.log(`Ñam ñam, estoy comiendo`);
}

Animal.prototype.dormir = function(){
    console.log(`Zzzz... zzz.... zzz...`);
}
const manchas = new Animal('manchas','Pequeno');

En este caso se tiene a un gato llamado manchas, creado con la clase animal. De igual forma podría crear un método ladrar por si quisiera adoptar un chihuahua y quisiera que haga esa acción, pero esto seria incorrecto.

¿Por qué? ¿Te imaginas que alguien haga ladrar a manchas por haber hackeado mi código? Te vuelves loco, ¡no se puede!. Los gatos maúllan y los perros ladran, esa una diferencia muy clara. A pesar de que son animales, no todos hacen esas acciones. ¿Cómo resolver esto? Con herencia. Vamos hacer esto.

2.Crear una clase Gato (Con sus respectivos atributos y métodos)

/* CLASE GATO (HIJO) */
function Gato(nombre,tamano,bigotes){
    this.super = Animal; //Una "variable" que
    //contiene los atributos y metodos de la clase
    //padre

    this.super(nombre,tamano); //Los atributos que
    //hereda del padre animal seran los parametros
    //que reciba al instanciarse un objeto gato

    this.bigotes = bigotes; //Se agregan los atributos 
    //propios de la clase gato
}

3.Hacer que esa clase (Gato) hereden de animal, así mismo crear sus métodos.

//HERENCIA PROTOTIPADA
Gato.prototype = new Animal(); //GATO
//ES IGUAL A LA CLASE PADRE PARA
//TENER SUS ATRIBUTOS Y METODOS

//Se agregar un método para Gato
Gato.prototype.maullar = function(){
    console.log(`Miauuuuu miaaaaaaauuuuu`);
}

Con esto, ya puedo hacer que manchas sea un objeto de tipo gato que a su vez comparte características comunes de un animal.
De igual forma puedo crear una clase perro para tener más separadas las características de dichas mascotas. Así evito que el gato ladre o el perro maullé, pero ambos pueden dormir o comer, es normal en ambos.
Vuelvo a repetir, no es necesario programar de esta forma tomando en cuenta lo nuevo que ha traido ES, solo es para tenerlo en consideración

| Documento del tema | Videoguía |

Object destructuring

El destructuring hace una copia de los atributos de un objeto. Pero, la copia se hace en una variable distinta por cada atributo encontrado.

SIN DESTRUCTURING

let persona = {
    nombre:'Jose Luis',
    edad:22,
    origen:'MX'
}

//A
let nombre = persona.nombre;
let edad = persona.edad;
let origen = persona.origen;

console.log(nombre);

El código debajo de A es necesario para poder guardar los atributos del objeto en variables separadas. Con destructuring nos ahorramos escribir eso.

CON DESTRUCTURING

let persona = {
    nombre:'Jose Luis',
    edad:22,
    origen:'MX'
}

let {edad,origen,nombre} = persona

console.log(nombre);

La meta es la misma, tenemos las variables edad , origen y nombre por separado. Este concepto es muy importante en React, parece difícil cuando lo ves y no sabes que significa, pero es muy sencillo. | Documento del tema | Video-guía |

Object literal enhacement

Es la contraparte de destructuring, su objetivo es agrupar variables para unirlas en una sola, específicamente en un objeto (o arreglo si así lo necesitas).

SIN ENHACEMENT

const licenciatura = 'Ingeniero en Computacion';
const semestre = 3;
const promedio = 83; 

const datosAlumno = {
    dato1 : licenciatura,
    dato2 : semestre,
    dato3 : promedio
}

console.log(datosAlumno.dato1);

Como ves, hacerlo de forma manual, sirve, pero si podemos ahorrar escribir en el teclado mejor con enhacement.

CON ENHACEMENT

const licenciatura = 'Ingeniero en Computacion';
const semestre = 3;
const promedio = 83; 

const alumno = {licenciatura,semestre,promedio}

console.log(alumno);

De igual forma, sencillo y muy utilizado en React, pero que causa pánico por saber el detrás de que hace.

Funciones en un objeto Solo para recordar, que los datos de las propiedades también pueden ser funciones

const consola = {
    fabricante:'Nintendo',
    modelo:'Nintendo Switch 1.0',
    banearConsola(){
        console.log(`Escanenando Sistema...
        Hacks enconstrados...
        Lo sinto ${this.dueno}, pero tu consola estara
        baneada por infringir los terminos y condiciones`);
    },
    dueno:'Jose Luis'
}

consola.banearConsola();

| Documento del tema |

.map

Es un método que crea un nuevo arreglo a partir de otro dado como parámetro, opera sobre cada uno de los elementos para dar el nuevo arreglo resultante, con ayuda de una función. Por ejemplo

const preciosOriginales = [10,2,100,];

let preciosDescuento = preciosOriginales.map(precio=>{return precio*0.85});

console.log(preciosOriginales);
console.log(preciosDescuento);

¿Por qué utilizarlo?

Permite iterar en cada uno de los elementos con una sintaxis más expresiva que hacerlo con un for, while, etc.
La operación realizada no cambia el valor del arreglo "original", esto asegura una consistencia de datos. Si no usáramos este método, la variable original se sobre-escribiría.

| Documento del tema | Video-guía |

Object keys

Es un método utilizado para los objetos, retorno el nombre de sus propiedades.

const pelicula = {
    titulo:'Crank: Alto Voltaje',
    actores: ['Jashon Stathamn','...'],
    genero:'Accion'
}

console.log(Object.keys(pelicula));

No retorna sus valores, sino los nombres de las propiedades, es decir, titulo,actores y genero | Documento del tema |

Spread Operator

Esta expresión permite hacer una copia de una variable. Pero, la copia no se hace por referencia. Por lo que son datos totalmente independientes entre sí, asegurando una consistencia de datos en el código.

let texto = ['1','2','3','4','5'];

console.log([...texto].reverse());
//Imprime: 5,4,3,2,1

//Imprime: 1,2,3,4,5
console.log(texto);

| Documento del tema | Video-guía |

.filter

Método para los arreglos que retorna un nuevo arreglo que cumpla con los criterios impuestos. Un ejemplo sería el siguiente código, que retorna a JoseLuis y Sandra.

const personas = [
    {nombre:'JoseLuis',edad:22},
    {nombre:'Juan',edad:18},
    {nombre:'Sandra',edad:26}
];

let lista = personas.filter(persona=> {return persona.edad > 20;});

console.log(lista);

| Documento del tema | Video-guía |

.find

Método para los arreglos que retorna el primero elemento que se busca como criterio. En este ejemplo, busco la propiedad que contenga el valor "JoseLuis".

const personas = [
    {nombre:'JoseLuis',edad:22},
    {nombre:'Juan',edad:18},
    {nombre:'Sandra',edad:26}
];

let lista = personas.find(persona=> {return persona.nombre === 'JoseLuis';});

console.log(lista);

| Documento del tema |

.reduce

.reduce recibe dos parametros:

Una función llamada reducer (Es decir, un callback como primer parámetro) reducer recibe...
1. Como primer parámetro un acumulador
2. El segundo parámetro el elemento que se esta iterando. Esto debe regresar el nuevo acumulador que se va a pasar como argumento la siguiente vez que se llame la función reducer.
El segundo parametro, es el valor inicial que va a tener el acumulador.

Un ejemplo de esto seria...

const reducido = [5,2,7,1].reduce((acumulador,elemento)=>{ return acumulador+elemento;},3);

console.log(reducido);

| Documento del tema | Vide-guía |

Síncrono vs Asíncrono

Javascript = Asincrono

Antes de seguir, vienen cosas que dependen saber lo siguiente: que Javascript es asíncrono y concurrente , si ya sabes que es esto y lo que implica, puedes saltarte este texto, de lo contrario, sigue el hilo.

Síncrono	Asíncrono
El código ejecuta las intrucciones de forma ordenada una a una, y , solo se ejecutan cuando las líneas anteriores han terminado de computar/realizar su tarea	El código ejecuta las instrucciones, de forma ordenada una a una, pero, no espera a que las líneas anteriores terminen de computar/realizar su tarea

Entonces... ¿Javascript es asíncrono? Si. Bueno ¿y eso en que afecta al nieto de Maribel Guardia o porque me debe importar saber eso?. Hasta este punto, ya sabes lo que implica un lenguaje asíncrono, vamos a poner un ejemplo para que veas sus "inconveniente".

► Ejemplo de la vida real

Digamos que estas practicando desarrollo web y quieres cargar las imágenes de un servidor ajeno al tuyo para darle un estilo de tipo tarjeta, animaciones, etc.

Lo normal sería

Cargar las imágenes del servidor externo
Mostrar las imágenes

Por factores ajenos al tuyo (internet, clima,etc), sabes que las fotografías no cargan al instante, normal. En fin, este es tu código...

function cargarImagenes(){
    console.log(`1. Cargando imagenes... Porfavor espera`)

    //Set timeout simula ese retraso de carga
    setTimeout(()=>{
        console.log(`2. Imagenes cargadas!
        Ya puedes manipular la informacion`);
    },5000)
}

function mostrarImagenes(){
    console.log(`3. ERROR: No han terminado de cargar las imagenes!
    Imposible de agregar al DOM si no existen`);
}

cargarImagenes();
mostrarImagenes();

Y cuando lo ejecutas...

Exacto, el código mostrarImagenes() se ejecuta sin haber esperado a que cargarImagenes() terminara su ejecución ¿Por qué sucede esto? Porque JS es asíncrono. Esa misma razón hace que el código de ejemplo no funcione como uno esperaría.

Javascript = Concurrente
Con concurrente nos referimos a que el lenguaje solo es capaz de realizar una instrucción a la vez. Algunos, como Java, permiten computar varias tareas a la vez, todo dependiendo de la arquitectura la computadora. Nuestro protagonista lastimosamente no lo puede hacer. Y debe quedar muy claro esto, ya que existen nuevas mejoras al lenguaje que hacen lucir a JS como un lenguaje que puede hacer paralelismo (ejecutar varias instrucciones a la vez), así que no te dejes engañar.

Cof cof Promise.all([])

| Documento del tema | Video-guía |

Callbacks

Contexto. Retomando el ejemplo del punto anterior.
Nos vemos en aprietos, ¿cómo solucionamos ese problema? Es un hecho que debemos hacer en orden las tareas y que estas terminen para poder seguir avanzando en las siguiente lineas de ejecución, pero el lenguaje es asincronico, parece que no hay salida. ¿O sí? Los callback...

¿Qué es un callback?
Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

¡Bien! Entonces usemos el callback para ajustar el código y funcione como uno esperaría.

function cargarImagenes(callback){
    console.log(`1. Cargando imagenes... Porfavor espera`)

    //Set timeout simula ese retraso de carga
    setTimeout(()=>{
        console.log(`2. Imagenes cargadas!
        Ya puedes manipular la informacion`);
        callback();
    },5000);
}

function mostrarImagenes(){
    console.log(`3. Exito: Clic para ver fotos`);
}

cargarImagenes(mostrarImagenes);

Si ejecutamos esto en el navegador...

¡Boom! Se respetó el orden de ejecución. Paso 1, Paso 2 y por último Paso 3.
De igual forma, podemos crear mas funciones, pasarlas como parámetro una función y anidarlas al "bloque inicial". Esto funcionaría sin problema para cualquier situación.

Pero, que sucedería, su tuviéramos que hacer algo como esto...

Conectarse al servidor y esperar su respuesta 200
Buscar el usuario en la BD
Extraer los datos del usuario
Buscar información con base los criterios del usuario
Etc...

Sin duda, habrán muchas funciones, pero no solo eso, también tendríamos que codificar con un if los casos si llega a haber un error (Facebook se cae, el internet del usuario se va, etc).

El punto, es que nuestro código al final luciría algo como esto. Callback hell

Difícil de leer y de mantener, una solución que cumple su objetivo, pero demasiado primitiva.

| Documento del tema | Video-guía |

Promesas

¿Qué es una promesa?

Es un objeto que representa la terminación o el fracaso de una operación asíncrona. Es decir, se ejecuta una serie de instrucciones, y, dependiendo de los resultados que se computen. Recibimos el dato que esperamos (terminación) o el fracaso (error de lo que sucedió). Son útiles cuando queremos hacer un comportamiento sincrono y evitar el callback hell.

Sintaxis para una promesa
Pongamos una situación. Yo tengo la siguiente serie de datos:

let trabajos = [
    {id:1,trabajo:'Freelance'},
    {id:2,trabajo:'Docente'},
    {id:3,trabajo:'escuela de la calle'}
];

let personas = [
    {id:1,nombre:'Jose Luis',edad:22,trabajo_id:1},
    {id:2,nombre:'Juan',edad:22,trabajo_id:1},
    {id:3,nombre:'Martin',edad:30,trabajo_id:2},
    {id:4,nombre:'Danilo',edad:40,trabajo_id:3}
];

Lo que necesito es consultar una Base de Datos para ver la información de las personas, y, en base al trabajo_id revisar dichos datos. Como puedes observar, son datos que dependen uno del otro para lograr mi cometido. Pero me rehusó a usar callbacks, asi que uso promesas. ¿Cómo empiezo?

1) Defino las funciones que requiero para obtener la información que necesito, pero con una sintaxis particular.

Siguiendo la imagen, mi código quedaría algo así. (Por ahora).

function obtenerPersonas(){
    return new Promise((resolved,reject)=>{
        setTimeout(()=>{
            resolved(personas)
        },100)
    });
}

function buscarPersona(id){
    if(typeof(id)!=='number') return Promise.reject("No puedes poner textos");

    return new Promise((resolved,reject)=>{
        setTimeout(()=>{
            let persona = personas.filter(persona=>{return persona.id === id})[0];
            resolved(persona);
        },500);
    });
}

function buscarTrabajo(idTrabajoPersona){
    return new Promise((resolved,reject)=>{
        setTimeout(()=>{
            let trabajo = trabajos.find(trabajo=>{return trabajo.id === idTrabajoPersona});
            resolved(trabajo);
        },500);
    });
}

Antes de avanzar, resolved(miDatoComputado) es la forma de capturar la promesa en caso de que sea exitosa.
¿Pero que pasa si falla? (Cuestiones de internet, la api ya no existe, los datos no son correctos, etc). Podemos hacer un return de Promise.reject

2) Ejecuto mis promesas de la siguiente manera

Quedando algo asi...

let idBusqueda = 3;
obtenerPersonas()
.then(personas=>{return buscarPersona(idBusqueda)})

.then(persona=>{
    console.log(`La persona es ${persona.nombre} y su id de trabajo es ${persona.trabajo_id}`); 
    return buscarTrabajo(persona.trabajo_id)
})

.then(trabajo=>{
    console.log(trabajo)
})

.catch(e=>{console.error(e)});

Como puedes ver, la sintaxis es mas legible que teniendo una pirámide, y, la ventaja, es que puedo manejar todos los errores que tenga el proceso con catch, ya sea en buscarTrabajo() , buscarPersona(), claro, debo programar los posibles errores que existan, pero ya no tengo que poner varios catch por cada uno

¡Excelente! Las canas que me podría haber sacado con los callbacks, los evite usando promesas. Podrías pensar que ya no debes utilizar callbacks, ya que estos "hacen lo mismo" de mejor manera. Pero todo depende del uso.

Cuando son muy pocas instrucciones no pasa nada al usar callbacks

Cuando son muchas instrucciones, el mejor aliado son promesas

| Documento del tema | Video-guía |

Async/Await

Esta funcionalidad es algo reciente, no llegó para remplazar a las promesas, si no a complementarlas trabajando en conjunto.

¿Qué es Async/Await?

Estas características, básicamente, actúan como azúcar sintáctico, haciendo el código asíncrono fácil de escribir y leer más tarde. Hacen que el código asíncrono se parezca más al código síncrono de la vieja escuela, por lo que merece la pena aprenderlo. -Mozilla Firefox

Como puedes leer, es una sintaxis que nos facilita aun más la implementación de código sincrono

Para facilitar el ejemplo , se va implementar un código sencillo, pero ya sabes que puedes ir a cosas mas difíciles como consultar un API. ¿Cómo inicio?

1) Se debe crear la función promesa que nos promete regresar algo.

function suma (numero){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve(numero+48);
        }, 2000);
    })
}

Nada nuevo, esto se abarcó en el punto de promesas. Se realiza una suma después un delay de 2 segundos.

2) Escribir la función async

async function tareaAsincrona(){
    /* Algún código de hacker */
}

3) Dentro de la función, se abre un try catch (opcional). En la parte del try se manejan todas las promesas que uno quiera realizar. Usando la palabra reservada await al lado izquierdo de la función. De esta forma le indicamos que debe esperar a que termine la ejecución para seguir avanzando a las siguientes líneas. Y... es todo ¿sencillo no?

async function tareaAsincrona(){
    try {
        let paso1 = await suma(3);
        console.log(paso1 + 2);
    } catch (e) {
        console.log(e);
    }
}

¿Si notas que estoy guardado la promesa en una variable?
Bueno... Es por algo

Ventajas de async/await

Es azúcar sintáctico, hacer código sincrono se hace mas sencillo con esta gramática de ES
Permite guardar los valores de las promesas

Como vez, es un complemento de las promesas. Los 3 conceptos de callbacks , promises y async/await pueden llegar a ser confusos, más que nada porque son conceptos que se derivan de otro. Es por eso, que yo sugiero investigar en orden esos temas, de lo contrario no te sonara muy claro lo que llegues a encontrar de información.

| Documento del tema | Video-guía |

POO

Esto si es importante saberlo. Le pongo de tema "POO" para hacer referencia a las palabras reservadas class extends new, es decir, la gramática tradicional que la mayoría conocemos o nos suena. Para este punto no voy a meterme muy a fondo para el código ya que es un tema "complejo". Si nunca has usado este paradigma , te recomiendo este vídeo para que comprendas los conceptos que son pilares del paradigma y después practicarlo | Video-guía |.

También dejare un pequeño resumen de los conceptos que deben considerarse para este paradigma así como algún recurso practico (De Javascript) para que se mejor comprendido dicho concepto. (Algunos recursos pueden estar en ingles). Cabe aclarar, que la implementacion de este paradigma (hablando de la codificación) varia en cada lenguaje, algunos tienen más o menos palabras reservadas, otros permiten mas características, etc. Pero los conceptos son los mismos.

Abstracción: Se refiere a "abstraer" (extraer) las características de un objeto que conocemos a manera de código. Se trata de obtener la información necesaria para nuestro propósito en la implementan. Por ejemplo, un Nintendo Switch, podríamos decir que tiene un procesador, ram, memoria, slots, batería, etc. Pero eso no nos va, probablemente no terminemos usando toda esa información y solo lía mas el proyecto, mejor, podemos decir, capacidad de memoria y modelo. De igual forma con sus funciones, decimos que realiza conexión a internet, transferencia de datos, configuración de sistema, etc. Pero volvemos a lo mismo, abstraemos todo lo que podamos para no complicarnos demasiado.

Encapsulamiento: Con esto protegemos la información de los objetos, de forma que sus atributos no puedan ser manipulados por otros objetos. De esta forma hay integridad de la información y sobre todo seguridad. Por ejemplo, un sistema en donde el objeto usuarioJoseLuis interactua con una tienda online, y por algun bug, el carrito de compras intenta sobreescribir mi informacion, entre ella la contraseña de mi cuenta. ERROR FATAL (Nota: En Javascript "no" hay implementación de dicho concepto)

Herencia: La herencia toma como referencia una clase, y, a partir de eso, se agregan los atributos y métodos propios. Es una forma extender la plantilla partiendo de otra, dando una variante. Por ejemplo, los perros, son animales. PERO, no puedo generalizar un perro con el resto de animales que hay, porque son distintos sin duda alguna, no es comparable un pájaro contra un perro, ambos comen o duermen, pero de ahí en fuera, muy opuestos. Es por eso, que parto de la plantilla Animal que engloba cosas comunes de los animales, para dar definiciones propias a un perro, gato, etc.

class Animal{
    constructor(tipo,tamano,habitat){
        this.tipo = tipo
        this.tamano = tamano
        this.habitat = habitat
    }
    comer(){
        console.log(`Ñom ñom ñom`)
    }
}

class Perro extends Animal{
    constructor(tipo,tamano,habitat,raza){
        super(tipo,tamano,habitat)
        this.raza = raza
    }
    ladrar(){
        console.log(`GUA GUA GUA!!! Soy un ${this.raza}`)
    }
}

let perro = new Perro('Canino','Grande','Ciudad','Chihuahua')
perro.ladrar();

Código largo, pero puedes observar, que a partir de los animales, pude crear la clase (plantilla) Perro con la información que define perfectamente a un perro. Y lo podria hacer de igual forma para otros más.

Polimorfismo: Es el distinto comportamiento de un método según los atributos de un objeto. Por ejemplo, los perros ladran, pero un chihuahua puede ladrar menos fuerte que uno grande.

class Animal{
    constructor(tipo,tamano,habitat){
        this.tipo = tipo
        this.tamano = tamano
        this.habitat = habitat
    }
    comer(){
        console.log(`Ñom ñom ñom`)
    }
}

class Perro extends Animal{
    constructor(tipo,tamano,habitat,raza){
        super(tipo,tamano,habitat)
        this.raza = raza
    }
    ladrar(){
        if(this.tamano == 'Grande')
        console.log(`GUA GUA GUA!!! Soy un ${this.raza} y ladro fuerte`)
        else{
            console.log(`gua gua. Soy un ${this.raza} y ladro bajito`)
        }
    }
}

let puchin = new Perro('Canino','Grande','Ciudad','Husky')
puchin.ladrar();

let mazapan = new Perro('Canino','Pequeño','Ciudad','Chihuahua')
mazapan.ladrar();

Misma acción, pero con una variante en el comportamiento por los atributos del objeto

Objeto | Video-guía |: Corresponde a una unidad dentro de la informática que contiene un estado y un comportamiento. Es decir, es la creación de algo "real" dentro del sistema informático, tomando como referencia la abstracción de una clase (molde) para su creación

let perro = new Animal('Canino','Grande','Ciudad')

Suponiendo que ya tengo las clases creadas, yo puedo hacer múltiples objetos que sean considerados Animales. Transformar ese concepto a algo real en el código es lo que se conoce como objeto

Propiedades: Se refiere a las características de un objeto, si hablamos de una consola de videojuegos, hablamos del skin, modelo, nombre, etc.

class Animal{
    constructor(tipo,tamano,habitat){
        this.tipo = tipo
        this.tamano = tamano
        this.habitat = habitat
    }
}

Las características del animal, tipo, tamaño y habitat. Como tal son cosas que lo describen

Método: Va de la mano con los objetos, y es todo lo que puede hacer dicho objeto (las acciones/funciones), un gato por ejemplo, puede maullar, rasguñar, etc.

class Animal{
    constructor(tipo,tamano,habitat){
        //ALGUN CODIGO
    }
    comer(){
        console.log(`Ñom ñom ñom`)
    }
}

Comer es mi método, es una acción que puede realizar el animal. Esto es muy abstracto, pero se entiende la idea. Podría sumar, restar, multiplicar o lo que mi objeto puede hacer a nivel de "código".

Clase | Video-guía |: Es un molde que define como se debe de crear el objeto, sus propiedades(datos/atributos) y métodos(acciones/funciones).

class Animal{
    constructor(tipo,tamano,habitat){
        this.tipo = tipo
        this.tamano = tamano
        this.habitat = habitat
    }
    comer(){
        console.log(`Ñom ñom ñom`)
    }
}

Como se observa, ese es código para la clase. La cual me indica los "lineamientos" para crear animales.

Constructor | Video-guía | : Es un método de las clases, que le permite (como su nombre lo dice) construir el objeto una vez que este se instancia (se manda crear con la plantilla). Un Animal por ejemplo, por default son de un tipo, de un tamaño y pertenecen a un habitat, sin esta informacion... No tenemos nada :( El ahí de por que se incluye el método constructor en las clases

class Animal{
    constructor(tipo,tamano,habitat){
        this.tipo = tipo
        this.tamano = tamano
        this.habitat = habitat
    }
    comer(){
        console.log(`Ñom ñom ñom`)
    }
}

Getter | Video-guía |: Su nombre es muy descriptivo, es un método se encarga de extraer la información de un objeto. Has leído bien, un método.

1) Se define un método dentro de la clase, anteponiendo la palabra reservada get. Este método puede hacer una serie de cálculos y retornar al final ese resultado.

2) Se obtiene la información del objeto poniendo el nombre del objeto, seguido de un punto y el nombre del método getter
nombreObjeto.nombreMetodoGetter. Asi se puede utilizar esa información para realizar alguna operación, mostrar en pantalla etc.

La pregunta es ¿por qué hacerlo así? Por que así podemos controlar el acceso de la información. Tal vez queramos que no toda la información se accesible, solo alguna.

class Animal{
    //ALGUN CODIGO
}

class Perro extends Animal{
    constructor(tipo,tamano,habitat,raza){
        //ALGUN CODIGO
    }
    get ladrar(){
        if(this.tamano == 'Grande')
        return `GUA GUA GUA!!! Soy un ${this.raza} y ladro fuerte`
        else{
            return `gua gua. Soy un ${this.raza} y ladro bajito`
        }
    }
}

let mazapan = new Perro('Canino','Pequeño','Ciudad','Chihuahua')
console.log(mazapan.ladrar);

Setter | Video-guía |: Su nombre es muy descriptivo, es un método se encarga de cambiar la información de un objeto. Has leído bien, un método.

1) Se define un método dentro de la clase, anteponiendo la palabra reservada set. Este método puede hacer una serie de cálculos y cambiar algún atributo del objeto con ese dato.

2) Se obtiene cambia la informacion del objeto poniendo el nombre del objeto, seguido de un punto, el nombre del método setter, igualado al nuevo valor
nombreObjeto.nombreMetodoSetter = valorNuevo/DatoNuevo. Así se puede utilizar esa información para realizar alguna operación, mostrar en pantalla etc.

class Animal{
    //ALGUN CODIGO
}

class Perro extends Animal{
    constructor(tipo,tamano,habitat,raza){
        super(tipo,tamano,habitat)
        this.raza = raza
    }
    get ladrar(){
        if(this.tamano == 'Grande')
        return `GUA GUA GUA!!! Soy un ${this.raza} y ladro fuerte`
        else{
            return `gua gua. Soy un ${this.raza} y ladro bajito`
        }
    }

    set setearTamano(valor){
        this.tamano = valor;
    }

}

let mazapan = new Perro('Canino','Pequeño','Ciudad','Chihuahua')

mazapan.setearTamano = 'Grande'

console.log(mazapan.ladrar);

¿Lo ves?, Mi chihuahua iba a ladrar bajito inicialmente, pero al setear su propiedad tamaño, modifique su comportamiento.

static: Es una forma de acceder al método(función) de una clase sin la necesidad de instanciar(crear) un objeto. Se antepone la palabra reservada static antes del nombre del método.

class Animal{
    constructor(tipo,tamano,habitat){
        //CODIGO
    }

    static dormir(){
        return `Zzzzz.... zzz.... zz..`
    }
}

De esa forma ya puedo utilizar dormir() sin necesidad de crear algún animal.

console.log(Animal.dormir());

Bien, hasta este punto ya se hizo un "refresh" de los conceptos, pero lo ideal seria tener algo de practica
Asi que esta video-guía te resultara util para arrastrar las manos sobre el teclado
| Video-guía |

Exportar e Importar en Javascript

Es bien sabido que si queremos utilizar varios scripts en una pagina web el siguiente código es una opción.

<script src="js/geolocalizacion.js"></script>
<script src="js/conversorPDF.js"></script>
<script src="js/chatRealTime.js"></script>

El detalle de eso es lo siguiente

Se realizan multiples peticiones HTTP al servidor para descargar ese script y utilizarlo
El orden de los scripts debe estar correctamente, es decir, si un script depende de otro por sus variable, ponerlos en orden invertido haría explotar el código en errores, tal vez 2 o 3 archivos no sean la gran cosa. Pero que sucedería su llegasen a ser mas de la cuenta
Hacer cambios para quitar o agregar scripts seria un proceso manual, imagina tener 20 archivos html y tener que quitar un script por que ahora se deve actualizar la libreria por una mas reciente. Que tedioso y cansado trabajo

Entonces, si no se puede hacer eso porque es "mala practica". ¿Cómo debería utilizar el archivo JS de la pagina/app web?
De esta forma

<script src="js/main.js"></script>

Tal vez ya te ha sonado ese archivo cuando inspeccionas algún proyecto ajeno o en practicas mas avanzadas de JS, y la razón de esto es la siguiente.

Solo se utiliza una petición HTTP al servidor para obtener la programación del sitio, eso se traduce en ahorrar recursos.
El orden de los scripts "ya no se hace", ese dolor de cabeza "ya no existe".
La programación esta modularizada y más ordenada, main.js se compone internamente de los demás scripts necesarios para funcionar, la cosa es que la programación no esta en un solo archivo, si no segmentada según la funcionalidad de cada uno. Es aquí donde entra el tema de exports e imports. Para entenderlo mejor, un ejemplo practico.

La idea, es tener lo siguiente en el HTML

main.js contiene todos los archivos para mi HTML Calculadora

¿Ya entiendes la idea? De esta forma se tiene mas control del código requerido en el HTML. Vamos a ver esto de manera practica.

1) En el archivo HTML se debe incluir el script para el proyecto. Y, para poder utilizar las palabras reservadas import export debemos incluir la etiqueta type="module" para que sea reconocible por el navegador. Nos quedaría algo así

<script src="js/main.js" type="module"></script>

2) Exportar los scripts

(Para la calculadora básica, mi código puede ser el siguiente)

/* CALCULADORA_BASICA.JS */
function suma(numero){
    return numero + 3;
}

function restar(numero){
    return numero - 4;
}

function multiplicacion(numero){
    return numero*3
}

function division(numero){
    return numero/3;
}

Excelente, tengo el código ¿pero como hacer la exportación?. Bueno, hay muchas formas de hacer la exportación.
A continuación las distintas formas.

FORMA 1

Se antepone la palabra reservada export a las funciones y variables

export let numeros = [0,6,1,10,12];

export function suma(numero){
    return numero + 3;
}

export function restar(numero){
    return numero - 4;
}

FORMA 2

Se crea un objeto que contenga atributos, los valores de los atributos corresponden a las variables y funciones. Al objeto se le antepone la palabra export, de esta forma no hay que hacerlo para cada uno de los elementos. Es decir, el código se vería como normalmente uno programaría

let numeros = [0,6,1,10,12];

function suma(numero){
    return numero + 3;
}

function restar(numero){
    return numero - 4;
}
// . . .

Y, el objeto luciría de esta manera

export let exportacion = {
    suma:suma,
    restar:restar,
    numeros:numeros
}

FORMA 3

La otra forma de hacer la exportación, es anteponiendo la palabra reservada default

export let exportacion = {
    suma:suma,
    restar:restar,
    numeros:numeros
}

export default exportacion;

De esta forma se reconoce casi por automático todo lo necesario al importar dicho script.

NOTA: Solo se puede utilizar export default una vez por archivo js.

3) Importar los scripts al archivo principal. Existen varias formas de hacer esto.

FORMA 1

Object destructuring, la sintaxis es

Palabra reservada ->import
Destructuring de las funciones y variables -> { . . . }
Palabra reservada from
String con la ruta del script

Por ejemplo, para importar mi calculadora basica al archivo principal seria así.

import {numeros,suma,restar} from './CALCULADORA_BASICA.js';
console.log(suma(3));

De esta forma pude acceder a la función suma "sin tenerla" declarada en el archivo principal

FORMA 2

SOLO SI intentas importar un script que tiene una exportación de tipo export default (que normalmente son objetos, pero también puede ser variables o funciones) se hace de la siguiente manera.

Palabra reservada ->import
Algun nombre para distinguir ese export default
Palabra reservada from
String con la ruta del script

En mi caso, el código sería así (en caso de exportar un objeto)

import basica from './CALCULADORA_BASICA.js';

Y, para utilizar el código que contiene CALCULADORA_BASICA.js solo hago uso de sus variables o funciones como si estuvieran en el mismo archivo. Claro, si estoy exportando un objeto debo tratarlo como tal.

console.log(basica.suma(3));

| Video-guía |

Con esto, puedo decir que ya estas "listo" para comprender lo que te espera en React.js

Y lo digo entre comillas porque ya debes tener ciertos conocimientos de desarrollo web, como por ejemplo, como funciona el modelo cliente-servidor, que es ajax, que es backend, que es frontend, que es una api, serverless, JSON, Tokens, etc.

No es para asustarte, esos conceptos no es que debas dominarlos al 100%, pero que si almenos conozcas la teoría para saber como se comen.

Por ejemplo, una de las ventajas de React es que podemos hacer potentes aplicaciones y apoyarnos del serverless para no implementar el backend por nosotros mismos. Pero, para probar la app mientras la estamos codeando, podemos utilizar APIs para simular datos reales, para lo mismo, no desarrollar el backend por nosotros mismos.

Espero que con esto puedas darte una idea de si estas preparado o no para React, la realidad es que Javascript es el pilar de esta librería, sin un buen dominio del lenguaje así como conceptos del desarrollo web, no puedes aspirar a entender React, de nuevo, no es para desalentar, es para que te prepares con este lenguaje antes de entrar al lleno a la librería y después, porque no, algun framework como Vue.js

Nunca intentes usar librerias o frameworks en especifico si no dominas todavia muy bien el lenguaje, es mejor tener las bases bien cimentadas y el resto sera pan comido.

Ya para terminar, he tomado como referencia todos los recursos que he dejado adjuntos a través de los puntos (Documentos y Video-Guias)

También adjunto este curso de Javascript porque es super completo

Curso Javascript - Jonathan MirCha #jonmircha

DEV Community: programador51

Browser Extensions - Native Messaging

Objective

Introduction

Content

Native Messaging

Scenario

Solution

Conclusion

Fansly Downloader

DevOps

Feature

Ejemplo de Feature y su Desglose

¿Qué es un Backlog?

¿Qué son las tareas?

React - useRef

Summary

Objective

Example with case A (Rendering list)

Solution

Solution

Example with case B (Manipulate DOM to create a modal)

Solution

Recommended readings

MySQL - Paginar datos

Base de datos

Try js-smart-table!!

React.js - useReducer

useReducer?

Cuando usarlo?

1 - importar el hook al componente

2 - La funcion reducer

3 usar el hook en el componente

Reacts.js - Router

SPA

React.js - Conceptos básicos para empezar

Extensiones recomendadas para VS Code al momento de trabajar esta librería

Contexto

1) Para partir ¿Qué es React JS y como funciona?

2) Instalar y preparar el entorno

3) Crear un componente y practicar los conceptos.

4) Hooks

Check list de conceptos/habilidades en React (al iniciar)

Carpetas de React

Estructura de un componente en React

props

React Hooks

Existen 2 tipos de Hooks

useState

Asignación de useState

useEffect()

PropTypes

Eventos de React

Fragment

Conclusión

¿Qué son la Cookies?

¿Qué son?

¿Que tipo de información contiene?

¿Para qué son?

Tipos de Cookies

Temporales

Permanentes

De terceros

¿Las cookies son seguras?

Conocimientos de Javascript que debes conocer antes de aprender React.js

Lo que debes de saber

Ecmascript

var, let & const

Scope de JS

Template Strings

Funciones - "function declaration"

Funciones - "function expression"

Funciones - Parámetros por default

Funciones flecha - Arrow functions

Object literal

Object constructor

Prototypes

Herencia prototipica - Prototype inheritance

Object destructuring

Object literal enhacement