# data[].attributes.body
Los literales de plantilla están encerrados por caracteres de retroceso (`) en lugar de comillas dobles o simples.

Además de tener cadenas normales, los literales de plantilla también pueden contener otras partes llamadas marcadores de posición, que son expresiones incrustadas delimitadas por un signo de dólar y llaves: ${expression}.

INTERPOLACIÓN DE CADENAS
Sin interpolación
const a = 5;
const b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."
Aquí podemos ver una concatenación de cadenas de texto con variables.

Con interpolación

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
Esta sintaxis ayuda a tener una estructura en el código mas legible.

# data[].attributes.body
// normalmente para asignar una función sería:

function suma (a,b) {

return a + b

}

const resutlado = suma(1 , 5)

// son funciones como valores, podemos tomar una funcion y asignarsela a una constante o una variable. Lo primero es asignar cuantos argumentos tiene la función, luego se agrega =>, inmediatamente se asigna la fuction, cuando solo hay una linea, tiene un return implicito.

const suma = (a,b) => a + b

const resultado = suma (1,5)

// tambien es posible asignar más de una sola instrucción

const suma = (a,b) => {

const c = a + b

return c + 1

}

const resultado = suma (1,5)

# data[].attributes.body
Una manera muy sencilla de crear un proyecto con React es utilizando Create React App, así puedes iniciar un proyecto sin preocuparte por la configuración de herramientas como webpack o babel.

Webpack: Es un module bundler que nos permite trabajar con una variedad de tecnologías web empezando desde HTML y terminando con JS. Además de tener soporte para archivos estáticos
Documentacion de los module bundler https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2

Babel: Babel es un "compilador" (o transpilador) para JavaScript. Básicamente permite transformar código escrito con las últimas y novedosas características de JavaScript y transformarlo en un código que sea entendido por navegadores más antiguos.

Aunque siempre será mejor si nosotros hacemos esta configuración desde cero, ya que tendremos mayor control de todo e incluso nuestra aplicación tendría un mejor rendimiento.

Maneras de instalar React

Existen varias formas de trabajar con React, cada una tiene sus ventajas y desventajas, siempre que trabajemos con React necesitaremos las dependencias react y react-dom.

1. React en JavaScript vanilla
2. Configuración manual desde cero
3. Create React App

Entorno de Create React App
Esta es la manera más simple y rápida para trabajar con React, solo necesitamos ejecutar el comando:
npx create-react-app nombre-del-proyecto
O
npx create-react-app nombre-del-proyecto --template typescript

De esta manera ya tendríamos nuestro entorno de desarrollo configurado para comenzar.

Características del entorno
Dentro de este entorno tenemos un archivo package.json en el que se encuentran nuestros scripts, dependencias y meta datos de nuestro proyecto, también tendremos dos carpetas principales:

1. public/: Es la carpeta pública en donde tendremos nuestro archivo HTML y algunos assets

2. src/: Es la carpeta fuente, en donde tendremos todos nuestros archivos de trabajo

¿Cómo inicializar nuestro servidor?

Para iniciar el entorno de desarrollo podemos ejecutar el comando npm start, con esto tendremos nuestro servidor corriendo en el puerto 3000 y también se refrescará automáticamente con cualquier cambio hecho en el proyecto. (A excepción de los cambios hechos en el archivo index.js

Contribución creada por: Brandon Argel.

# data[].attributes.attachment_link.readable_text
What is a Module Bundler?

Module bundlers are tools frontend developers used to bundle JavaScript modules into a single JavaScript files that can be executed in the browser.

Examples of modern module bundlers (in no particular order) are: webpack, rollup, fusebox, parcel, etc.

Module bundler is required because:

Browser does not support module system, although this is not entirely true nowadays

It helps you manage the dependency relationship of your code, it will load modules in dependency order for you.

It helps you to load your assets in dependency order, image asset, css asset, etc.

To illustrate, imagine you are building a web application, which is made up of multiple JavaScript files. You add JavaScript files into html via script tags:

Each file requires a separate http requests, which is 5 round trip requests in order to get your application started. So it would be better if you can combine all 5 files into 1:

(Although with HTTP/2, this is much less of a case right now)
So how do we generate the dist/bundle.js?

Several challenges arise in the process:

How do we maintain the order of the "files" to be included?
It would be great that it is some sort of dependency order amongst the "files"

How do we prevent naming conflicts between "files"?

How do we determine any unused "file" within the bundle?

All of these can be solved if we know the relationship amongst each files, such as:

Which file is depended on another?

What are the interface exposed from a file? and

Which exposed interfaces are being used by another?

These information, granted, can solve the challenges brought up respectively. So, what we need is a declarative method to describe the relationship between files, which led us to the JavaScript Module System.

CommonJS or ES6 Modules provides way for us to specify what files we are dependening on, and which of their interface we are using in our file.

How do we bundle?

With the information gathered from the module system, how do we link the files together and generate the bundle file that encapsulates everything?

If you scrutinize the bundle generated by webpack and rollup, you would notice that the 2 most popular bundler takes a totally different approach in bundling, and here I coined them, the "webpack way" and the "rollup way".

Let's illustrate this with an example:

Say you have 3 files, circle.js, square.js and app.js:

The "webpack way"

What would be the "webpack way" bundle looks like?

I have made some slight modifications for easier illustration
First thing you would notice is the "module map". It is a dictionary that maps the module name to the module itself, which is wrapped by a function. The "module map" is like a registry, it makes it easy to register modules by adding entries.

Secondly, each module is wrapped by a function. The function simulates the module scope, where everything declared within the module is scoped within itself. The function itself is called the "module factory function". As you can see, it takes in a few parameters, to allow the module to exports its interface, as well as to require from other modules.

Thirdly, the application is start via webpackStart, which is a function that glues everything together. The function itself, often called as the "runtime", is the most important piece of the bundle. It uses the "module map" and the entry module to start the application.

I have made some slight modifications for easier illustration
webpackStart defines 2 things, the "require" function and the module cache. The "require" function is not the same as the require from CommonJS. "require" takes in the module name, and returns the exported interface from a module, eg: for circle.js it would be { default: function area(radius){ ... } }. The exported interface is cached in the module cache, so that if we call "require" of the same module name repeatedly, the "module factory function" will only be executed once.

With "require" defined, starting the application would be just "require"ing the entry module.

The "rollup way"

Now you've seen how webpack bundle looked like, let's take a look at the "rollup way" bundle:

I have made some slight modifications for easier illustration
Firstly, the key difference in the rollup bundle, is that it is much smaller compared to the webpack bundle. There is no module map, as compared to the "webpack way". All the modules are "flatten" into the bundle. There is no function wrapping of modules. All the variables/functions that were declared within the module, is now declared into the global scope.

If everything declared in individual module scope is now declared into the global scope, what happened if 2 modules declare variable/function of the same name?

Well, rollup will rename the variable/function name, such that name collision do not happen. In our example, both circle.js and square.js have declared function area(){} within the module, when bundled, you see that both functions and their usage were renamed to avoid collision.

One of the side effects of not wrapping module with a function is the behavior of eval, see here for more in-depth explanation

Secondly, the order of the modules within the bundle matters. Well you can argue that circle$area and square$area can come after console.log and it will still work, yet PI has to be declared before the console.log, because of temporal dead zone. So, sorting modules in order of their dependency matters for the "rollup way".

All in all, the "rollup way" seemed to be better than the "webpack way". It has a smaller bundle and less runtime overhead by removing all the functions.
Is there a drawback of the "rollup way"?
Well, sometimes it does not work well with circular dependency. Let's take a look at this contrived example:

I have made some slight modifications for easier illustration
In this example shape.js is depending on circle.js and circle.js is depending on shape.js. So, for rollup to sort out which module to come first than another in the output bundle, there's no "correct" answer for it. Either circle.js then shape.js or shape.js then circle.js is reasonable. So, you could possibly get the following output bundle:

You can tell this will be problematic right?

Is there a solution for this? A short answer is no.

A "simple" fix is to not use a circular dependency. Rollup will throw warnings at you if it encountered one.

Well, what makes the example "works" is that we have statements that are immediately evaluated within the module. If we change the evaluation of _PI to be lazy:

the order of modules now does not really matter much:

This is because at the time _PI is evaluated, PI has already been defined.

Summary

So, let's summarize what we've learned so far:

Module bundler helped us to combine multiple JavaScript modules into 1 JavaScript file.

Different bundler bundles differently, and we've looked into 2 of the modern bundler, webpack and rollup

the "webpack way":

uses module map

uses function to wrap each module

has a runtime code that glues the module together

the "rollup way":

flatter and smaller bundle

does not use function to wrap module

order matters, require sorting based on dependency

circular dependency may not work

References

This is a repost from my blog.

If you like this article and wish to read more similar articles, follow me on Twitter

# data[].attributes.attachment_link.title
What is module bundler and how does it work?

# data[].attributes.attachment_link.description
understand how module bundler works. Tagged with javascript, modulebundler, devtool, webpack.

# data[].attributes.body
Vite, es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos. Consta de dos partes principales:

Un servidor de desarrollo que proporciona mejoras enriquecidas de funcionalidades sobre módulos ES nativos, por ejemplo Hot Module Replacement (HMR) extremadamente rápido.

Un comando de compilación que empaqueta tu código con Rollup, preconfigurado para generar recursos estáticos altamente optimizados para producción.

FUENTE:
Vite. (s. f.). https://es.vitejs.dev/guide/

# data[].attributes.body
Es más un patrón que una tecnología específica, las personas a veces le dan significados diferentes. En el mundo de React, el término “DOM virtual” es normalmente asociado con elementos de React ya que son objetos representando la interfaz de usuario. Sin embargo, React también usa objetos internos llamados “fibers” para mantener información adicional acerca del árbol de componentes. Éstos pueden ser también considerados como parte de la implementación de “DOM virtual” de React.

¿Qué es “React Fiber”?

Fiber es el nuevo motor de reconciliación en React 16. Su principal objetivo es permitir el renderizado incremental del DOM virtual.

FUENTE
Vite. (s. f.). https://es.vitejs.dev/guide/

# data[].attributes.body
Tipos de estructuras para organizar proyectos:
1. Estructura por tipo de fichero
2. Estructura por funcionalidad o modular

3. Estructura basada en Atomic design
4. Estructura basada en la arquitectura hexagonal

Si te sientes completamente atascado, comienza por mantener todos los archivos en una sola carpeta. Eventualmente crecerá lo suficiente como para que quieras separar algunos archivos del resto. Para ese momento, tendrás suficiente conocimientos para saber qué archivos editas juntos con mayor frecuencia. En general, es una buena idea mantener los archivos que a menudo cambian juntos cerca unos de otros. Este principio se llama “colocación”.

Diferencias de CRM y VITE

Importaciones absolutas

Cuando comiences a desarrollar con Vite, lo primero que probablemente notarás es la diferencia en la resolución de rutas. A diferencia de CRA, Vite no tiene una ruta src incorporada.

Variables de entorno

Otra diferencia entre Create React App y Vite es la convención de nomenclatura de variables de entorno. Si usa variables de entorno en el proyecto, querrá reemplazar el prefijo REACT_APP_ por VITE_.

FUENTES
Mas, T. (2021, 8 febrero). 4 estructuras para organizar tu proyecto de React y React Native. Reboot Blog - Product development, UX/UI design and software. https://reboot.studio/blog/es/estructuras-organizar-proyecto-react/

Vite. (s. f.). https://es.vitejs.dev/guide/

# data[].attributes.body
JSX es una extensión de JavaScript creada por Facebook para el uso con la biblioteca React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código generado con React a JavaScript. JSX tiene su alternativa que es React. createElement pero es preferible JSX porque es mucho más legible y expresivo.

En el ejemplo a continuación, declaramos una variable llamada name y luego la usamos dentro del JSX envolviéndola dentro de llaves:

//Ejemplo insertando expresiones
const name = 'Jeferson Camero';
const element = <h1>Hello, {name}</h1>;

FUENTES
Platzi: Cursos online profesionales de tecnología. (s. f.). https://platzi.com/clases/1548-react-2019/18694-jsx/

Vite. (s. f.). https://es.vitejs.dev/guide/

# data[].attributes.body
Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y retornan elementos de React que describen lo que debe aparecer en la pantalla.

Componentes funcionales

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React. Llamamos a dichos componentes “funcionales” porque literalmente son funciones JavaScript.

Componentes de clase
Ejemplo de una clase de ES6 para definir un componente.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

PROPS
Las props son una forma de pasar datos o información de un componente de una aplicación de software a otro. En el desarrollo de aplicaciones, a menudo se utilizan componentes que son piezas reutilizables de código que se pueden combinar para formar la interfaz de usuario de una aplicación. Las props permiten a los componentes compartir información entre sí, lo que les permite interactuar y trabajar juntos para crear la aplicación final. Las props se definen y se pasan a los componentes como parámetros en su declaración o invocación, y luego se pueden acceder dentro del componente para utilizar la información que se les ha pasado.

FUENTES

Vite. (s. f.). https://es.vitejs.dev/guide/

# data[].attributes.body
En React, el estilo de un componente se puede definir utilizando CSS de dos maneras principales: mediante el uso de archivos externos de estilo CSS o mediante el uso de la propiedad style del componente.

Para utilizar archivos externos de estilo CSS, primero se deben importar al archivo JavaScript que contiene el componente en el que se desea aplicar el estilo. Esto se hace utilizando la palabra clave import y especificando la ruta del archivo de estilo que se desea importar. Una vez que el archivo de estilo ha sido importado, se puede aplicar a un componente mediante la especificación de la etiqueta className en el elemento que se desea estilizar.

Por otro lado, la propiedad style del componente permite definir estilos directamente en el código JavaScript que contiene el componente. Para utilizar esta propiedad, se debe especificar un objeto de estilo que contenga las reglas de estilo que se desean aplicar. Estas reglas se especifican como pares clave-valor, donde la clave es el nombre de la propiedad de estilo y el valor es el valor que se desea asignar a esa propiedad. Luego, se puede aplicar el objeto de estilo a un elemento del componente mediante la asignación de la propiedad style al elemento.

En resumen, en React se puede utilizar CSS mediante archivos externos o mediante la propiedad style del componente, dependiendo de las necesidades y preferencias del desarrollador.

# data[].attributes.body
Styled Components es una biblioteca de JavaScript que permite definir estilos para los componentes de una aplicación de manera más sencilla y elegante. Esta biblioteca utiliza la sintaxis de JavaScript para crear componentes estilizados que se pueden utilizar en una aplicación de React como si fueran componentes normales.

Styled Components permite definir estilos en línea directamente en el código JavaScript que contiene el componente, lo que hace que el código sea más limpio y legible. Además, permite utilizar características avanzadas de CSS, como el anidamiento de reglas de estilo y la interpolación de variables, lo que facilita la creación de estilos complejos y reutilizables.

Para utilizar Styled Components, primero se debe instalar la biblioteca utilizando un gestor de paquetes, como npm o yarn. Luego, se pueden crear componentes estilizados utilizando la función styled de la biblioteca, que toma como argumento el tipo de elemento que se desea estilizar. Esta función devuelve un nuevo componente que tiene todos los estilos especificados en línea aplicados. Finalmente, el nuevo componente se puede utilizar en la aplicación de React como cualquier otro componente.

# data[].attributes.body
En React, los eventos son acciones que ocurren en la interfaz de usuario de una aplicación y que pueden ser detectadas y manejadas por el código de la aplicación. Estos eventos pueden ser acciones del usuario, como hacer clic en un botón, o acciones del sistema, como cambios en el tamaño de la ventana del navegador.

Para manejar eventos en React, se utiliza la sintaxis de JavaScript para especificar qué función debe ejecutarse cuando se produce el evento en cuestión. Esto se hace asignando la función como el valor de la propiedad on<Event> del elemento al que se desea agregar el manejador de eventos. Por ejemplo, para agregar un manejador de eventos de clic a un botón, se puede utilizar la propiedad onClick del botón y asignarle la función que se desea que se ejecute cuando se haga clic en el botón.

En general, React utiliza una sintaxis ligeramente diferente para especificar los nombres de los eventos en comparación con el código JavaScript tradicional. En lugar de usar el nombre del evento en minúsculas, como click o mouseover, React utiliza el nombre del evento en camel case, como onClick o onMouseOver. Esto se debe a que las propiedades de los elementos en React deben ser especificadas en camel case.

# data[].attributes.body
Formik es una biblioteca de JavaScript para React que facilita la creación y el manejo de formularios en una aplicación. Esta biblioteca proporciona un conjunto de componentes y funcionalidades que permiten validar y enviar formularios de manera sencilla y consistente, sin tener que escribir mucho código personalizado.

Formik permite definir formularios utilizando componentes de React y proporciona funcionalidades para validar los datos ingresados por el usuario, mostrar mensajes de error y realizar el envío de los datos del formulario a un servidor. Además, integra bien con otras bibliotecas de React, como Redux y Yup, lo que facilita el trabajo con formularios en aplicaciones más grandes y complejas.

Para utilizar Formik, primero se debe instalar la biblioteca utilizando un gestor de paquetes, como npm o yarn. Luego, se puede crear un formulario utilizando el componente Formik de la biblioteca y especificando las propiedades y los elementos del formulario como hijos del componente Formik. Finalmente, se pueden utilizar las funcionalidades de Formik para validar y enviar el formulario según sea necesario.

# data[].attributes.body
Formik es una biblioteca de JavaScript para React que facilita la creación y el manejo de formularios en una aplicación. Esta biblioteca proporciona un conjunto de componentes y funcionalidades que permiten validar y enviar formularios de manera sencilla y consistente, sin tener que escribir mucho código personalizado.

Formik permite definir formularios utilizando componentes de React y proporciona funcionalidades para validar los datos ingresados por el usuario, mostrar mensajes de error y realizar el envío de los datos del formulario a un servidor. Además, integra bien con otras bibliotecas de React, como Redux y Yup, lo que facilita el trabajo con formularios en aplicaciones más grandes y complejas.

Para utilizar Formik, primero se debe instalar la biblioteca utilizando un gestor de paquetes, como npm o yarn. Luego, se puede crear un formulario utilizando el componente Formik de la biblioteca y especificando las propiedades y los elementos del formulario como hijos del componente Formik. Finalmente, se pueden utilizar las funcionalidades de Formik para validar y enviar el formulario según sea necesario.

# data[].attributes.body
El enrutamiento se refiere a la habilidad de una aplicación para mostrar distintas páginas o vistas en función de la dirección URL que se está utilizando.

React Router V6 proporciona un conjunto de componentes que permiten definir las distintas rutas de una aplicación y mostrar los componentes correspondientes según la dirección URL actual. Además, permite agregar características comunes en aplicaciones enrutadas, como enlaces entre diferentes rutas y gestión del historial del navegador.

Para utilizar React Router V6, primero se debe instalar la biblioteca utilizando un gestor de paquetes, como npm o yarn. Luego, se pueden crear las rutas de la aplicación utilizando el componente Router de la biblioteca y especificando las rutas y los componentes correspondientes como hijos del componente Router. Finalmente, se puede utilizar el componente Link de la biblioteca para crear enlaces que naveguen entre las diferentes rutas de la aplicación.

# data[].attributes.body
Existen varias versiones del enrutador de React, cada una con diferentes características y funcionalidades. Las principales versiones son las siguientes:

React Router V6: Esta es la última versión del enrutador de React, y se enfoca en proporcionar una sintaxis sencilla y limpia para definir las rutas de una aplicación. Esta versión también permite utilizar Hooks de React para manejar el estado y la lógica del enrutamiento, lo que facilita la creación de aplicaciones enrutadas.

React Router V5: Esta versión es anterior a React Router V6 y utiliza una sintaxis ligeramente diferente para definir las rutas de una aplicación. Además, esta versión no admite Hooks de React y utiliza un enfoque basado en clases para manejar el estado y la lógica del enrutamiento.

React Router V4: Esta es una versión aún más antigua del enrutador de React y utiliza una sintaxis y un enfoque diferentes a las versiones más recientes. Esta versión se utiliza en aplicaciones muy antiguas que todavía no se han actualizado a versiones más recientes del enrutador.

# data[].attributes.body
Para consumir una API utilizando el método Fetching, primero necesitará obtener la URL de la API y verificar si se requieren credenciales de autenticación para acceder a ella. Una vez que tenga la URL y las credenciales necesarias (si las hay), puede utilizar el método fetch() de JavaScript para enviar una solicitud a la API. Este método devolverá una promesa que puede utilizar para obtener la respuesta de la API y analizarla.

# data[].attributes.body
Axios es una biblioteca de JavaScript que se utiliza para realizar solicitudes HTTP. Axios proporciona una interfaz simple y fácil de usar que permite enviar solicitudes HTTP y manejar las respuestas de manera eficiente.

Axios se puede utilizar en aplicaciones de Node.js o en aplicaciones de navegador utilizando una biblioteca de empaquetado como Webpack o Browserify. Para utilizar Axios en su aplicación, primero debe instalar la biblioteca utilizando npm o un gestor de paquetes similar. Una vez que haya instalado Axios, puede importarla en su código y utilizarla para realizar solicitudes HTTP.

# data[].attributes.body
Siempre que tenga una variable que tenga el mismo nombre que una propiedad en un objeto, al construir el objeto, puede omitir el nombre de la propiedad.

function formatMessage (name, id, avatar) {

return {

name: name,

id: id,

avatar: avatar,

timestamp: Date.now()

}

}

Ahora se  ve de esta manerafunction formatMessage (name, id, avatar) {  return {    name,    id,    avatar,    timestamp: Date.now()  }}

Ahora, ¿y si una de esas propiedades fuera una función? Una función que es una propiedad de un objeto se llama método. Con los nombres de métodos abreviados de ES6, puede omitir la palabra clave de función por completo. Lo que eso significa es que el código que solía verse así

function formatMessage (name, id, avatar) {  return {    name,    id,    avatar,    timestamp: Date.now(),    save: function () {      // save message    }  }}

Ahora se ve asi

function formatMessage (name, id, avatar) {  return {    name,    id,    avatar,    timestamp: Date.now(),    save () {      //save message    }  }}

# data[].attributes.body
Arrays:

Destructuring nos da una manera de extraer datos de objetos o arreglos y asignarlos a variables.

con la función de destructuring en ES2015 lo haríamos de la manera:

const [a,b,c] = array;// a = 'pato'// b = 'ganzo'// c = 'pollo

i quisiéramos ignorar un elemento, podríamos realizar la asignación de la siguiente forma:

const [a,,c] = array; // a = 'pato'// c = 'pollo'

imagina que tienes dos variables y deseas intercambiar su valor, en ES5 tendríamos que crear una variable temporal para esto, pero con destructuring bastaría con hacer:

let x = 2;let y = 5; [x,y] = [y,x]; // x = 5// y = 2

Objetos

const objeto = {  a: ‘casa’,  b: ‘apartamento’};

Como asignariamos las propiedades de_ objeto_ a variables en ES5

var a = objeto.a;var b = objeto.b;

Con destructuring en ES2015, lo hariamos asi

const {a,b} = objeto; //a = 'casa'//b = 'apartamento'

asignar las propiedades del objeto, con nombres de variable diferentes, lo hacemos de la forma

const {a:uno,b:dos} = objeto; //uno = 'casa'//dos = 'apartamento'

# data[].attributes.body
permiten que los parámetros con nombre se inicien con valores predeterminados si no se pasa ningún valor o undefined.

Normalmente se estableceria de la siguiente forma

function multiply(a, b) {  return a * b} multiply(5, 2)  // 10multiply(5)     // NaN !

Para protegerte contra esto, usarías algo como la segunda línea, donde b se establece en 1 si llamas a multiply con un solo argumento:

function multiply(a, b) {  b = (typeof b !== 'undefined') ?  b : 1  return a * b} multiply(5, 2)  // 10multiply(5)     // 5

las comprobaciones en el cuerpo de la función ya no son necesarias. Ahora, puedes asignar 1 como valor predeterminado para b en el encabezado de la función:

function multiply(a, b = 1) {  return a * b} multiply(5, 2)          // 10multiply(5)             // 5multiply(5, undefined)  // 5

# data[].attributes.body
El operador condicional (ternario) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción if.

"La Cuota es de:  " + (isMember ? "$2.00" : "$10.00")

realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):

var firstCheck = false,    secondCheck = false,    access = firstCheck ? "Acceso Denegado" : secondCheck ? "Acceso Denegado" : "Acceso Permitido"; console.log( access ); // muestra "Acceso Permitido"

var stop = false, age = 23; age > 18 ? (    alert("OK, puedes continuar."),    location.assign("continue.html")) : (    stop = true,    alert("Disculpa, eres menor de edad!"));

# data[].attributes.body
map() : Permite recorrer el array y modificar los elementos presentes en él, retornando un nuevo array con la misma longitud que el original.

# data[].attributes.body
filter() : Recorre el array y retorna un nuevo array con aquellos elementos que pasen una determinada condición.

# data[].attributes.body
forEach() : Permite iterar el contenido de un array. Recibe un callback que toma como parámetro el elemento actual de la iteración y el indice del mismo.

# data[].attributes.body
find() : Recorre el array y retorna la primera coincidencia del elemento que se busca.

# data[].attributes.body
sort() : Ordena los elementos del array y retorna el arreglo ordenado. Los elementos se ordenarán en orden ascendente (de la A a la Z) por defecto.

# data[].attributes.body
some() : Itera el array y retorna un booleano si como mínimo uno de los elementos presentes en el array pasa una condición determinada. Recibe un callback que se encargara de preguntar aquello que queremos dentro del array.

# data[].attributes.body
every() : Es similar al some(), ya que itera el array y retorna un booleano. Pero esta vez, para que dicho booleano sea true todos los elementos del array deberán pasar la condición dada.

# data[].attributes.body
Determina si un array incluye un determinado elemento y retorna un booleano según corresponda.

# data[].attributes.body
join() : Une todos los elementos de un array en una cadena. Podemos pasarle como parámetro el carácter de separación que debe agregar entre los elementos.

# data[].attributes.body
reduce() : Aplica una función a un acumulador y a cada valor de una array (de izquierda a derecha) para reducirlo a un único valor.

# data[].attributes.body
indexOf() : Retorna el primer índice en el que se puede encontrar un elemento dado en el array, ó retorna -1 si el elemento no esta presente.

# data[].attributes.body
findIndex() : Retorna el índice del primer elemento de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.

# data[].attributes.body
fill() : Cambia todos los elementos de un array por un valor estático, desde el índice de inicio hasta el índice final. Retorna el array modificado.

# data[].attributes.body
push() : Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.

# data[].attributes.body
pop() : Elimina el último elemento de un array y lo devuelve. Este método cambia la longitud del array.

# data[].attributes.body
shift() : Elimina el primer elemento del array y lo retorna. Este método modifica la longitud del array.

# data[].attributes.body
unshift() : Agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array.

# data[].attributes.body
slice() : Devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificará.

# data[].attributes.body
reverse() : Invierte el orden de los elementos de un array. El primer elemento pasa a ser el último y el último pasa a ser el primero.

# data[].attributes.body
splice() : Cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

# data[].attributes.body
lastIndexOf() : Busca un elemento en un array y devuelve su posición. Comienza buscando por el final del array. Retorna -1 si el elemento no se encontrara.

# data[].attributes.body
flat() : Crea una nuevo array con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.

# data[].attributes.body
isArray() : Determina si el valor pasado es un Array.

# data[].attributes.body
from() : Crea una nueva instancia de Array a partir de un objeto iterable.

# data[].attributes.body
Cuando trabajamos con operaciones asíncronas en JavaScript, a menudo escuchamos el término Promise (Promesa).

Un “código productor” que hace algo y toma tiempo.

Un “código consumidor” que quiere el resultado del “código productor” una vez que está listo.

Una promesa es un objeto JavaScript especial que une el “código productor” y el “código consumidor”.

Sintaxis del constructor

let promise = new Promise(function(resolve, reject) {

// Ejecutor (el código productor, "cantante")

});

La función pasada a new Promise se llama ejecutor. Cuando se crea new Promise, el ejecutor corre automáticamente. Este contiene el código productor que a la larga debería producir el resultado

Sus argumentos resolve y reject son callbacks proporcionadas por el propio JavaScript. Nuestro código solo está dentro del ejecutor.

Cuando el ejecutor, más tarde o más temprano, eso no importa, obtiene el resultado, debe llamar a una de estos callbacks:

resolve(value) – si el trabajo finalizó con éxito, con el resultado value.

reject(error) – si ocurrió un error, error es el objeto error.

Para resumir: el ejecutor corre automáticamente e intenta realizar una tarea. Cuando termina con el intento, llama a resolve si fue exitoso o reject si hubo un error.

El objeto promise devuelto por el constructor new Promise tiene estas propiedades internas:

state – inicialmente "pendiente"; luego cambia a "cumplido" cuando se llama a resolve, o a "rechazado" cuando se llama a reject.

result – inicialmente undefined; luego cambia a valor cuando se llama a resolve(valor), o a error cuando se llama a reject(error).

Entonces el ejecutor, en algún momento, pasa la promise a uno de estos estados:

Después veremos cómo los “fanáticos” pueden suscribirse a estos cambios.

Aquí hay un ejemplo de un constructor de promesas y una función ejecutora simple con “código productor” que toma tiempo (a través de setTimeout):

let promise = new Promise(function(resolve, reject) {

// la función se ejecuta automáticamente cuando se construye la promesa

// después de 1 segundo, indica que la tarea está hecha con el resultado "hecho"

setTimeout(() => resolve("hecho"), 1000);

});

Podemos ver dos cosas al ejecutar el código anterior:

1. Se llama al ejecutor de forma automática e inmediata (por new Promise).

2. El ejecutor recibe dos argumentos: resolve y reject. Estas funciones están predefinidas por el motor de JavaScript, por lo que no necesitamos crearlas. Solo debemos llamar a uno de ellos cuando esté listo.

Después de un segundo de “procesamiento”, el ejecutor llama a resolve("hecho") para producir el resultado. Esto cambia el estado del objeto promise:

Ese fue un ejemplo de finalización exitosa de la tarea, una “promesa cumplida”.

Y ahora un ejemplo del ejecutor rechazando la promesa con un error:

let promise = new Promise(function(resolve, reject) {

// después de 1 segundo, indica que la tarea ha finalizado con un error

setTimeout(() => reject(new Error("¡Vaya!")), 1000);

});

La llamada a reject(...) mueve el objeto promise al estado "rechazado":

Para resumir, el ejecutor debe realizar una tarea (generalmente algo que toma tiempo) y luego llamar a “resolve” o “reject” para cambiar el estado del objeto promise correspondiente.

Una promesa que se resuelve o se rechaza se denomina “resuelta”, en oposición a una promesa inicialmente “pendiente”.

Solo puede haber un único resultado, o un error

El ejecutor debe llamar solo a un ‘resolve’ o un ‘reject’. Cualquier cambio de estado es definitivo.

Se ignoran todas las llamadas adicionales de ‘resolve’ y ‘reject’:

let promise = new Promise(function(resolve, reject) {

resolve("hecho");

reject(new Error("…")); // ignorado

setTimeout(() => resolve("…")); // ignorado

});

La idea es que una tarea realizada por el ejecutor puede tener solo un resultado o un error.

Además, resolve/reject espera solo un argumento (o ninguno) e ignorará argumentos adicionales.

Rechazar con objetos Error

En caso de que algo salga mal, el ejecutor debe llamar a ‘reject’. Eso se puede hacer con cualquier tipo de argumento (al igual que resolve). Pero se recomienda usar objetos Error (u objetos que hereden de Error). El razonamiento para eso pronto se hará evidente.

Inmediatamente llamando a resolve/reject

En la práctica, un ejecutor generalmente hace algo de forma asíncrona y llama a resolve/reject después de un tiempo, pero no está obligado a hacerlo así. También podemos llamar a resolve o reject inmediatamente:

let promise = new Promise(function(resolve, reject) {

// sin que nos quite tiempo para hacer la tarea

resolve(123); // dar inmediatamente el resultado: 123

});

Por ejemplo, esto puede suceder cuando comenzamos una tarea, pero luego vemos que todo ya se ha completado y almacenado en caché.

Está bien. Inmediatamente tenemos una promesa resuelta.

state y result son internos

Las propiedades state y result del objeto Promise son internas. No podemos acceder directamente a ellas. Podemos usar los métodos .then/.catch/.finally para eso.

# data[].attributes.body
la palabra clave async , que se pone delante de una declaración de función para convertirla en una función async.

Una función asíncrona es una función que sabe que es posible que se use la palabra clave  await dentro de ella para invocar código asíncrono.

La palabra clave async se añade a las funciones para que devuelvan una promesa en lugar de un valor directamente.

const cargarDatos = async () => {  const url = "https://jsonplaceholder.typicode.com/todos/1";  const res = await fetch(url);  const datos = await res.json();  console.log(datos);};cargarDatos();// output en la consola{  completed: false,  id: 1,  title: "delectus aut autem",  userId: 1}

Cómo una función Async devuelve una promesa

Este es uno de los rasgos de las funciones asíncronas — se garantiza que sus valores de retorno se convertirán en promesas. Para manejar los datos devueltos por una función async podemos usar una palabra clave then para obtener los datos.

const cargarDatos = async () => {  try{    const url = "https://jsonplaceholder.typicode.com/todos/1";    const res = await fetch(url);    const datos = await res.json();    return datos  } catch(err) {    console.log(err)  }}; const datos = cargarDatos().then(datos => console.log(datos));

# data[].attributes.body
, lo que se suele hacer en programación es separar nuestro archivo en distintas unidades. Esto se usa mucho en HTML y CSS, pero también es común en JavaScript. Aquí, los módulos son una herramienta que nos permite separar el archivo index.js en distintas unidades lógicas o archivos. Esta práctica facilita la lectura y edición al describir claramente el propósito de cada sección de nuestro proyecto.

# data[].attributes.body
Name export

utilizaremos la palabra clave import y su nombre de objeto, por lo que deberemos insertar las llaves. A continuación, te ponemos un ejemplo:

export const name = ‘value’

import { name } from ‘…’

Con este método, puedes importar más de una variable usando su nombre dentro de las llaves y separándolas por comas.

Default Export

Otra manera de exportar una variable es usando la palabra clave default. Esta nos permite hacer que, con cualquier nombre, se importe la variable que hemos exportado. A diferencia del name export, solo podemos tener una variable default en un archivo. Puedes ver cómo funciona esto a continuación:

const saludo = ‘hola’

export default saludo

import bienvenida from ‘…’

Entonces, lo que sucede es que le podemos dar cualquier nombre a la variable en nuestro nuevo archivo. Además, no necesitaremos usar las llaves para definir esta variable, pues no tiene un nombre específico.

Rename Export

Este método nos permite renombrar una variable en la exportación para que se use el nuevo nombre en la importación. Esto es muy útil cuando sabemos que habrá otra variable con el mismo nombre en el nuevo archivo.

export {name as newName }

import { newName } from ‘…’

Rename Import

Además de poder cambiar el nombre en la exportación, podemos hacerlo en la importación de elementos. A continuación, te mostramos un ejemplo de una exportación:

export {

name 1,

name2 as newName2

}

Ahora, podemos no solo usar el nombre dado en la exportación para las variables, sino también cambiarla en la importación.

import {

name1 as newName1,

newName2

} from ‘…’

# data[].attributes.body
Los Hooks son una nueva API de la librería de React que nos permite tener estado, y otras características de React, en los componentes creados con una function.

Hooks es gancho y, precisamente, lo que hacen, es que te permiten enganchar tus componentes funcionales a todas las características que ofrece React.