# data[].attributes.headline
Cómo se consume API’s con Fetching y Axios?

# data[].attributes.subject
Cómo se consume API’s con Fetching y Axios?

# data[].attributes.body
Usando la API fetch

La API Fetch proporciona una interfaz JavaScript para getionar peticiones y respuestas HTTP. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

Tienes más ejemplos de uso de API Fetch (GET, POST, PUT, DELETE) en el curso de Javascript.

./app.jsimport {useEffect} from 'react';

const App = () => {
  const [name, setName] = useState(null);

  useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/ditto') // hacemos la petición get
    .then(res => res.json()) // cuando hayamos terminado (then) parseamos a json la respuesta de la petición
    .then(res => setName(res.name)); // cuando hayamos terminado (then) actualizamos el estado nombre
  }, []); //Debemos usar los [] para que la petición sólo se ejecute cuando el componente se monte. De lo contrario se ejecutaría en cada render. Si ponemos una variable de estado dentro de los [], la petición se ejecutárá cada vez que esa variable cambie.
  return <p>{name}</p>;
}

Axios

Para instalarlo, debemos ejecutar en la consola:

npm i axios

Petición GET

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

const App = (_) => {
  const [name, setName] = useState([]);

  useEffect(() => {
    axios
      .get(`https://pokeapi.co/api/v2/pokemon/ditto`)
      .then((res) => {
        setName(res.data.name);
      })
  }, []);

  return <div>{name}</div>;
};
export default App;

Petición GET con parámetros

 axios.get(`https://example.com`, {params: {paramName:paramValue}})

Abreviatura de una petición con axios

Con el siguiente código, podremos ahorranos poner la base_url en todas las peticiones.

import axios from 'axios';
const instance = axios.create({ baseURL: 'https://swapi.dev/api' });
export const getPeople = () => instance.get(`/people/`);

Dónde poner las peticiones al servidor

Cuando el proyecto empieza a crecer, es conveniente meter las peticiones al servidor en una carpeta llamada services que contendrá un fichero por cada entidad de la que vamos a hacer peticiones.

Cuando con el valor que devuelva una petición de las que tengamos en la carpeta de servicios querramos modificar un estado, lo que haremos es que dicha petición no devolverá un valor, sino una promesa que será gestionada en la página de destino.

Ejercicio

Vamos a hacer una petición a la API de chucknorris. Para ello, tendremos un fichero, api.js, en el que definiremos dos métodos:

getCategories()

getJokeFromCategory()

Estos dos métodos devolverán una promesa que será gestionada en App.js.

# data[].attributes.attachment_link.readable_text
Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
useEffect para recuperar datos de un servidor

Usando la API fetch

La API Fetch proporciona una interfaz JavaScript para getionar peticiones y respuestas HTTP. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

Tienes más ejemplos de uso de API Fetch (GET, POST, PUT, DELETE) en el curso de Javascript.

./app.js

import {useEffect} from 'react'; const App = () => { const [name, setName] = useState(null); useEffect(() => { fetch('https://pokeapi.co/api/v2/pokemon/ditto') // hacemos la petición get .then(res => res.json()) // cuando hayamos terminado (then) parseamos a json la respuesta de la petición .then(res => setName(res.name)); // cuando hayamos terminado (then) actualizamos el estado nombre }, []); //Debemos usar los [] para que la petición sólo se ejecute cuando el componente se monte. De lo contrario se ejecutaría en cada render. Si ponemos una variable de estado dentro de los [], la petición se ejecutárá cada vez que esa variable cambie. return <p>{name}</p>; }

Axios

Para instalarlo, debemos ejecutar en la consola:

Petición GET

import { useState, useEffect } from "react"; import axios from "axios"; const App = (_) => { const [name, setName] = useState([]); useEffect(() => { axios .get(`https://pokeapi.co/api/v2/pokemon/ditto`) .then((res) => { setName(res.data.name); }) }, []); return <div>{name}</div>; }; export default App;

Petición GET con parámetros

 axios.get(`https://example.com`, {params: {paramName:paramValue}})

Abreviatura de una petición con axios

Con el siguiente código, podremos ahorranos poner la base_url en todas las peticiones.

import axios from 'axios'; const instance = axios.create({ baseURL: 'https://swapi.dev/api' }); export const getPeople = () => instance.get(`/people/`);

Dónde poner las peticiones al servidor

Cuando con el valor que devuelva una petición de las que tengamos en la carpeta de servicios querramos modificar un estado, lo que haremos es que dicha petición no devolverá un valor, sino una promesa que será gestionada en la página de destino.

Ejercicio

Vamos a hacer una petición a la API de chucknorris. Para ello, tendremos un fichero, api.js, en el que definiremos dos métodos:

getCategories()

getJokeFromCategory()

Estos dos métodos devolverán una promesa que será gestionada en App.js.

# data[].attributes.attachment_link.description
Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia. La API Fetch proporciona una interfaz JavaScript para getionar peticiones y respuestas HTTP. También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

# data[].attributes.headline
React Router V6 y diferencias con sus versiones anteriores?

# data[].attributes.subject
React Router V6 y diferencias con sus versiones anteriores?

# data[].attributes.body
La versión 5 de React Router incorporó por fin los hooks para dar soporte al nuevo paradigma de React y dentro de pocos meses quedará liberada la versión 6 que trae importantes cambios. De ahí que me haya animado a escribir este artículo para resumir los principales que veremos incorporados.

¡Vamos allá!

⚠️ Pero antes… una pequeña advertencia

Si algo ha caracterizado a React Router es que a menudo las nuevas versiones rompen características antiguas lo cual hace complicado actualizar la librería sin tener que reescribir algunas partes. Por eso, en el momento en que te plantees usar esta versión (todavía se encuentra en beta) revisa bien toda aquella funcionalidad que te tocará actualizar.

Nuevo componente Routes

El componente Switch de versiones anteriores que permitía discriminar entre rutas en función del path visitado va a ser reemplazado por el componente Routes .

De este modo, todas las rutas que definamos dentro de este componente mediante <Route path...> así como los enlaces que generemos mediante el componente <Link to...> serán relativos a la ruta padre donde estén definidos.

La idea según la documentación es facilitar que una aplicación pueda verse como distintas partes independientes, cada una de ellas viviendo dentro de una ruta:

En el ejemplo, todos los Link definidos dentro del componente “Products” son relativos a la ruta products/ de modo que por ejemplo el componente <Link to="/iphone" ...> generará <a href="/products/iphone" ...> .

Lo mismo sucederá para las rutas definidas dentro del componente “Products” por medio del componente Routes : todas ellas irán bajo el path /products .

El componente Outlet

Además, ha aparecido un nuevo componente llamado Outlet en el caso en que queramos llevar la declaración de rutas a un único lugar pero queramos definir un “layout” para cada grupo de rutas:

En este caso, estamos agrupando las rutas de “/products” sobre el componente Products que cuando se “renderea” pinta una barra de navegación con enlaces a productos junto con el componente <Outlet /> , donde se alojarán las rutas hijas definidas, pintando aquella que haga “match” con el “path” visitado (bien ProductsList o bien Product .

# data[].attributes.attachment_link.readable_text
Descubre las principales novedades que traerá la librería React Router

React Router es una de las librerías más usadas cuando trabajamos en React y necesitamos gestionar la navegación de nuestra aplicación. De hecho y si os soy sincero desconozco si existen otras alternativas ya que tanto en los proyectos en los que me he integrado como en aquellos que he...

# data[].attributes.attachment_link.description
Descubre las principales novedades que traerá la librería React Router React Router es una de las librerías más usadas cuando trabajamos en React y necesitamos gestionar la navegación de nuestra aplicación. De hecho y si os soy sincero desconozco si existen otras alternativas ya que tanto en los proyectos en los que me he integrado como en aquellos que he...

# data[].attributes.headline
¿Qué es formik y cómo se implementa en React?

# data[].attributes.subject
¿Qué es formik y cómo se implementa en React?

# data[].attributes.body
Formik utiliza componentes controlados. Además como podemos mantener el estado del formulario localizado y gestionado por Formik es bueno para construir formularios de varios pasos. En Formik se pueden construir formularios de dos maneras diferentes, una con el uso de un componente Formik y campos proporcionados por Formik.

# data[].attributes.attachment_link.title
Comparación de librerías de React forms: Formik vs React Hook Form | Apiumhub

# data[].attributes.attachment_link.description
En este artículo nos centraremos en cómo React puede resolver el problema de trabajar con formularios y hablaremos de dos conocidas librerías llamadas React Hook Form y Formik.

# data[].attributes.headline
QUE ES UN EVENTO EN JS Y COMO SE MANEJA EN REACT?

# data[].attributes.subject
QUE ES UN EVENTO EN JS Y COMO SE MANEJA EN REACT?

# data[].attributes.body
Manejo de eventos

Los eventos de JavaScript permiten la interacción entre las aplicaciones JavaScript y los usuarios. Cada vez que se pulsa un botón, se produce un evento. Cada vez que se pulsa una tecla, también se produce un evento. No obstante, para que se produzca un evento no es obligatorio que intervenga el usuario, ya que por ejemplo, cada vez que se carga una página, también se produce un evento.

Manejar eventos en elementos de React es muy similar a manejar eventos con elementos del DOM. Hay algunas diferencias de sintaxis:

•              Los eventos de React se nombran usando camelCase, en vez de minúsculas.

•              Con JSX pasas una función como el manejador del evento, en vez de un string.

En React es algo diferente:

Otra diferencia es que en React no puedes retornar false ara prevenir el comportamiento por defecto. Debes, explícitamente, llamar preventDefault.

# data[].attributes.attachment_link.readable_text
Manejar eventos en elementos de React es muy similar a manejar eventos con elementos del DOM. Hay algunas diferencias de sintaxis:

Los eventos de React se nombran usando camelCase, en vez de minúsculas.

Con JSX pasas una función como el manejador del evento, en vez de un string.

Por ejemplo, el HTML:

En React es algo diferente:

Otra diferencia es que en React no puedes retornar false para prevenir el comportamiento por defecto. Debes, explícitamente, llamar preventDefault. Por ejemplo, en un HTML plano, para prevenir el comportamiento por defecto de enviar un formulario, puedes escribir:

En cambio en React, esto podría ser:

Aquí, e es un evento sintético. React define estos eventos sintéticos acorde a las especificaciones W3C, para que no tengas que preocuparte por la compatibilidad entre distintos navegadores. Los eventos de React no funcionan exactamente igual que los eventos nativos. Mira la guía de referencia SyntheticEvent para aprender más.

Cuando estás utilizando React, generalmente no necesitas llamar addEventListener para agregar escuchadores de eventos a un elemento del DOM después de que este es creado. En cambio, solo debes proveer un manejador de eventos cuando el elemento se renderiza inicialmente.

Cuando defines un componente usando una clase de ES6, un patrón muy común es que los manejadores de eventos sean un método de la clase. Por ejemplo, este componente Toggle renderiza un botón que permite al usuario cambiar el estado entre "ENCENDIDO" y "APAGADO":

Tienes que tener mucho cuidado en cuanto al significado de this en los callbacks de JSX. En JavaScript, los métodos de clase no están ligados por defecto. Si olvidas ligar this.handleClick y lo pasas a onClick, this será undefined cuando se llame la función.

Esto no es un comportamiento especifico de React; esto hace parte de como operan las funciones JavaScript. Generalmente, si refieres un método sin usar () después de este, tal como onClick={this.handleClick}, deberías ligar ese método.

Si te molesta llamar bind, existen dos maneras de evitarlo. Puedes usar la sintaxis de campos públicos de clases para ligar los callbacks correctamente:

Esta sintaxis está habilitada por defecto en Create React App.

Si no estas usando la sintaxis de campos públicos de clases, puedes usar una función flecha en el callback:

El problema con esta sintaxis es que un callback diferente es creado cada vez que LogginButton es renderizado. En la mayoría de los casos, esto está bien. Sin embargo, si este callback se pasa como una propiedad a componentes más bajos, estos componentes podrían renderizarse nuevamente. Generalmente, recomendamos ligar en el constructor o usar la sintaxis de campos de clases, para evitar esta clase de problemas de rendimiento.

Pasando argumentos a escuchadores de eventos

Dentro de un bucle es muy común querer pasar un parámetro extra a un manejador de eventos. Por ejemplo, si id es el ID de una fila, cualquiera de los códigos a continuación podría funcionar:

Las dos líneas anteriores son equivalentes, y utilizan funciones flecha y Function.prototype.bind respectivamente.

En ambos casos, el argumento e que representa el evento de React va a ser pasado como un segundo argumento después del ID. Con una función flecha, tenemos que pasarlo explícitamente, pero con bind cualquier argumento adicional es pasado automáticamente

# data[].attributes.attachment_link.description
Manejar eventos en elementos de React es muy similar a manejar eventos con elementos del DOM. Hay algunas diferencias de sintaxis: Los eventos de React se nombran usando camelCase, en vez de minúsculas. Con JSX pasas una función como el manejador del evento, en vez de un string.

# data[].attributes.body
¿Cómo agrego clases CSS a los componentes?Pasa una string como la prop className:render() {  return <span className="menu navigation-menu">Menu</span>}Es común que las clases CSS dependan de las props o del estado del componente:render() {  let className = 'menu';  if (this.props.isActive) {    className += ' menu-active';  }  return <span className={className}>Menu</span>}TipSi a menudo escribes código como este, el paquete classnames puede hacerlo más simple.¿Puedo usar estilos en línea?Sí, ve la documentación sobre estilo aquí.¿Los estilos en línea son malos?Las clases CSS son generalmente mejores para el rendimiento que los estilos en línea.¿Qué es CSS-in-JS?“CSS-in-JS” se refiere a un patrón donde el CSS se compone usando JavaScript en lugar de definirlo en archivos externos.Ten en cuenta que esta funcionalidad no es parte de React, sino que es proporcionada por bibliotecas de terceros. React no tiene una opinión sobre cómo se definen los estilos; en caso de dudas, un buen punto de partida es definir tus estilos en un archivo *.css separado como de costumbre y referirse a ellos usando className.¿Puedo hacer animaciones en React?React puede usarse para potenciar animaciones. Revisa React Transition Group, React Motion, React Spring o Framer Motion.

# data[].attributes.attachment_link.readable_text
¿Cómo agrego clases CSS a los componentes?

Pasa una string como la prop className:

Es común que las clases CSS dependan de las props o del estado del componente:

Tip

Si a menudo escribes código como este, el paquete classnames puede hacerlo más simple.

¿Puedo usar estilos en línea?

Sí, ve la documentación sobre estilo aquí.

¿Los estilos en línea son malos?

Las clases CSS son generalmente mejores para el rendimiento que los estilos en línea.

¿Qué es CSS-in-JS?

"CSS-in-JS" se refiere a un patrón donde el CSS se compone usando JavaScript en lugar de definirlo en archivos externos.

Ten en cuenta que esta funcionalidad no es parte de React, sino que es proporcionada por bibliotecas de terceros. React no tiene una opinión sobre cómo se definen los estilos; en caso de dudas, un buen punto de partida es definir tus estilos en un archivo *.css separado como de costumbre y referirse a ellos usando .

¿Puedo hacer animaciones en React?

React puede usarse para potenciar animaciones. Revisa React Transition Group, React Motion, React Spring o Framer Motion, por ejemplo.

# data[].attributes.attachment_link.description
Pasa una string como la prop className: Es común que las clases CSS dependan de las props o del estado del componente: Tip Si a menudo escribes código como este, el paquete classnames puede hacerlo más simple. Sí, ve la documentación sobre estilo aquí.

# data[].attributes.body
Useeffect sirve para renderizar  la API

# data[].attributes.body
Sirve para  incorporar el estado de React a un componente de función.

Ejemplo de la MasterClass donde se hizo uso de   UseEffect y UseState

# data[].attributes.body
es una función de javascript que permite crear/acceder al estado y a los ciclos de vida de React y que, para asegurar la estabilidad de la

# data[].attributes.attachment_link.title
React Hooks: Qué son y qué problemas solucionan

# data[].attributes.attachment_link.description
En este artículo aprenderás qué son los Hooks en React, qué problemas solucionan, los tipos que existen, cómo usarlos y algunos ejemplos prácticos.

# data[].attributes.body
Métodos estáticos

Array.from()

Crea una nueva instancia de Array a partir de similarAUnArray, un objeto iterable o parecido a un array.

Array.isArray()

Devuelve true si valor es un array, y false en caso contrario.

Array.of()

Crea una nueva instancia de Array con un número variable de parámetros, independientemente del número y del tipo de dichos parámetros.

Propiedades de instancia

Array.prototype.length

Indica el número de elementos de un array.

Array.prototype[@@unscopables]

Símbolo que contiene todos los nombres de las propiedades que se excluyen de un ámbito de enlace with.

Métodos de instancia

Array.prototype.concat()

Devuelve un nuevo array que es la concatenación de aquél sobre el que se invoca, seguido de otros array(s) o valor(es).

Array.prototype.copyWithin()

Copia una secuencia de elementos de un array dentro del propio array.

Array.prototype.entries()

Devuelve un nuevo objeto Array Iterator que contiene los pares clave/valor para cada índice del array.

Array.prototype.every()

Devuelve true si todos los elementos del array cumplen el predicado que recibe como parámetro.

Array.prototype.fill()

Asigna un valor estático a todos los elementos del array entre las posiciones inicio y fin.

Array.prototype.filter()

Devuelve un nuevo array que contiene todos los elementos de aquél para el cual se llama que cumplan el predicado que se le pasa como parámetro.

Array.prototype.find()

Devuelve el primer elemento del array que cumpla el predicado que se pasa como parámetro, o undefined si ninguno lo cumple.

Array.prototype.findIndex()

Devuelve el índice del primer elemento del array que cumpla el predicado que se pasa como parámetro, o -1 si nunguno lo cumple.

Array.prototype.forEach()

Llama a la función pasada como parámetro para todos los elementos del array.

Array.prototype.includes()

Determina si el array contiene el valorBuscado y devuelve true o false según sea el caso.

Array.prototype.indexOf()

Devuelve el índice del primer elemento del array que sea igual a elementoBuscado, o -1 si no existe.

Array.prototype.join()

Concatena en un string todos los elementos de un array.

Array.prototype.keys()

Devuelve un nuevo Array Iterator que contiene las claves de cada índice del array.

Array.prototype.lastIndexOf()

Devuelve el índice del último elemento del array que sea igual a elementoBuscado, o -1 si no existe.

Array.prototype.map()

Devuelve un nuevo array que contiene el resultado de llamar a la función pasada como parámetro a todos los elementos del array sobre el que se invoca.

Array.prototype.pop()

Elimina el último elemento de un array, y devuelve dicho elemento.

Array.prototype.push()

Añade uno o más elementos al final de un array y devuelve el nuevo valor de su propiedad length.

Array.prototype.reduce()

Aplica la función pasada como parámetro a un acumulador y a cada valor del array, que se recorre de izquierda a derecha, para reducirlo a un único valor.

Array.prototype.reduceRight()

Aplica la función pasada como parámetro a un acumulador y a cada valor del array, que se recorre de derecha a izquierda, para reducirlo a un único valor.

Array.prototype.reverse()

Invierte el orden de los elementos de un array (el primero pasa a ser el último y el último a ser el primero) en el propio array. Este método modifica el array.

Array.prototype.shift()

Elimina el primer elemento de un array, y devuelve dicho elemento.

Array.prototype.slice()

Extrae una porción del array sobre el que se llama y devuelve un nuevo array.

Array.prototype.some()

Devuelve true si al menos un elemento del array cumple con el predicado que se pasa como parámetro.

Array.prototype.sort()

Ordena los elementos de un array, modificando éste, y devuelve el array ordenado.

Array.prototype.splice()

Añade, borra o modifica elementos de un array.

Array.prototype.toLocaleString()

Devuelve un string adaptado a la configuración regional que representa el array y sus elementos. Redefine el método Object.prototype.toLocaleString().

Array.prototype.toString()

Devuelve un string que representa el array y sus elementos. Redefine el método Object.prototype.toString().

Array.prototype.unshift()

Añada uno o más elementos al inicio de un array y devuelve el nuevo valor de length para el array resultante.

Array.prototype.values()

Devuelve un nuevo objeto Array Iterator que contiene los valores para cada índice del array.

Array.prototype[@@iterator]()

Devuelve un nuevo objeto Array Iterator que contiene los valores para cada índice del array.

# data[].attributes.attachment_link.description
Los arrays son objetos similares a una lista cuyo prototipo proporciona métodos para efectuar operaciones de recorrido y de mutación. Tanto la longitud como el tipo de los elementos de un array son variables. Dado que la longitud de un array puede cambiar en cualquier momento, y los datos se pueden…

# data[].attributes.body
El operador de propagación es una nueva adición al conjunto de operadores en JavaScript ES6.Toma un iterable (por ejemplo, una matriz) y lo expande en elementos individuales.

El operador de propagación se usa comúnmente para hacer copias superficiales de objetos JS. El uso de este operador hace que el código sea conciso y mejora su legibilidad.

# data[].attributes.attachment_link.provider_name
Educative: Interactive Courses for Software Developers

# data[].attributes.attachment_link.title
What is the spread operator in JavaScript?

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

# data[].attributes.attachment_link.readable_text
Si la condición es true, el operador retorna el valor de la expr1; de lo contrario, devuelve el valor de expr2. Por ejemplo, para mostrar un mensaje diferente en función del valor de la variable se puede usar esta declaración:

También puedes asignar variables dependiendo del resultado de la condición ternaria:

También es posible realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):

También puede usar operaciones ternarias en espacio vacío con el propósito de realizar diferentes operaciones:

También puede realizar más de una operación por caso, separándolas con una coma:

También puede realizar más de una operación durante la asignación de un valor. En este caso, el último valor separado por una coma del paréntesis será el valor asignado.

# data[].attributes.attachment_link.title
Operador condicional (ternario) - JavaScript | MDN

# data[].attributes.attachment_link.description
Si la condición es true, el operador retorna el valor de la expr1; de lo contrario, devuelve el valor de expr2.

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

# data[].attributes.attachment_link.title
Parámetros predeterminados - JavaScript | MDN

# data[].attributes.attachment_link.description
Parámetros predeterminados de función permiten que los parámetros con nombre se inicien con valores predeterminados si no se pasa ningún valor o undefined.

# data[].attributes.body
Destructuring, o destructuración en un lenguaje más hispanizado, es una nueva característica de ES6 para Javascript que nos da la posibilidad de poder coger los datos de objetos o array directamente y de manera múltiple, para extraerlos a variables o constantes.

# data[].attributes.attachment_link.description
“Todo es muy difícil antes de ser sencillo” Thomas Fuller Hay una nueva programación que viene de camino. Una programación que da prioridad a una lectura fácil sacrificando un poco de dificultad a la hora de escribir el código. Ya hemos hablado de ello en posts como La energía del

# data[].attributes.body
Con las propiedades abreviadas, 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.

# data[].attributes.body
Nos ayudan a manejar los string de manera inteligente en vez de usar comillas (“) usamos (´´) podemos hacer un salto de línea.

# data[].attributes.body
Reaccionar accesorios

React Props son como argumentos de función en JavaScript y atributos en HTML.

Para enviar accesorios a un componente, use la misma sintaxis que los atributos HTML:

Ejemplo

Agregue un atributo de "marca" al elemento Car:

const myElement = <Car brand="Ford" />;

El componente recibe el argumento como un propsobjeto:

Ejemplo

Utilice el atributo de marca en el componente:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
Los componentes le permiten dividir la interfaz de usuario en piezas independientes y reutilizables, y pensar en cada pieza de forma aislada. Esta página proporciona una introducción a la idea de los componentes. Puede encontrar una referencia detallada de la API del componente aquí .

Conceptualmente, los componentes son como funciones de JavaScript. Aceptan entradas arbitrarias (llamadas "accesorios") y devuelven elementos React que describen lo que debería aparecer en la pantalla.

# data[].attributes.attachment_link.readable_text
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

Function and Class Components

The simplest way to define a component is to write a JavaScript function:

This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

The above two components are equivalent from React's point of view.

Function and Class components both have some additional features that we will discuss in the next sections.

Rendering a Component

Previously, we only encountered React elements that represent DOM tags:

However, elements can also represent user-defined components:

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object "props".

For example, this code renders "Hello, Sara" on the page:

Let's recap what happens in this example:

1. We call ReactDOM.render() with the <Welcome name="Sara" /> element.

2. React calls the Welcome component with {name: 'Sara'} as the props.

3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.

4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.

Composing Components

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

For example, we can create an App component that renders Welcome many times:

Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.

Extracting Components

Don't be afraid to split components into smaller components.

For example, consider this Comment component:

It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.

First, we will extract Avatar:

The Avatar doesn't need to know that it is being rendered inside a Comment. This is why we have given its prop a more generic name: user rather than author.

We recommend naming props from the component's own point of view rather than the context in which it is being used.

We can now simplify Comment a tiny bit:

Next, we will extract a UserInfo component that renders an Avatar next to the user's name:

This lets us simplify Comment even further:

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times ( Button, Panel, Avatar), or is complex enough on its own ( App, FeedStory, Comment), it is a good candidate to be a reusable component.

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:

Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

In contrast, this function is impure because it changes its own input:

React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.
Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

# data[].attributes.attachment_link.description
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here. Conceptually, components are like JavaScript functions.

# data[].attributes.body
Considera la declaración de esta variable:

const element = <h1>Hello, world!</h1>;

Esta curiosa sintaxis de etiquetas no es ni un string ni HTML.

Se llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.

JSX produce “elementos” de React. Exploraremos como renderizarlos en el DOM

# data[].attributes.attachment_link.description
A JavaScript library for building user interfaces

# data[].attributes.body
Cuando comience a desarrollar con Vite, lo primero que probablemente notará es la diferencia en la resolución de rutas. A diferencia de CRA, Vite no tiene una srcruta incorporada.

Entonces, en lugar de importar archivos y componentes en su aplicación React de esta manera:

importar tarjetas desde "componentes/tarjetas" ;

Tendrás que importarlos así:

importar Tarjetas desde “/ src / components / cards . jsx ”

Afortunadamente, hay una solución para resolver esta ruta.

Vaya a la carpeta raíz del proyecto, abra el archivo y reemplace el código existente:vite.config.js

importar { defineConfig } desde "vite" ; importar reaccionar desde "@vitejs/plugin-react" ;

exportar defineConfig predeterminado ({   complementos : [ reaccionar ()], });

Con lo siguiente:

importar { defineConfig } desde "vite" ; importar reaccionar desde "@vitejs/plugin-react" ;

export default defineConfig ({
  resolve : {
    alias : [ {
        find : "common" ,


        replace : resolve ( __dirname , "src/common" ), }, ], },





  complementos : [ reaccionar ()], });

Guarde el código y ahora debería poder usar rutas absolutas en su proyecto.

Variables de entorno
Otra diferencia entre Create React App y Vite es la convención de nomenclatura de variables de entorno. Si está utilizando variables de entorno en su proyecto, querrá reemplazar el REACT_APP_prefijo con VITE_.

//En lugar de esto
REACT_APP_ API_KEY = 1234567890. . //Utilice este
VITE_API_KEY = 1234567890. .

Cambiar las variables una por una puede ser una molestia, especialmente si tiene muchas variables presentes en el archivo. Afortunadamente, el paquete compatible con vite-plugin-env nos permite usar variables de entorno sin cambiar sus nombres..env
Use el siguiente comando para instalar el paquete vite-plugin-env-compatible:

npm i vite - plugin - env ​​- compatible

A continuación, vaya al archivo en la carpeta raíz del proyecto y agregue el siguiente código:vite.config.js

importar envCompatible desde 'vite-plugin-env-compatible' ;


exportar defineConfig predeterminado ({ ...


  envPrefix : 'REACT_APP_' ,





  complementos : [
    reaccionar (),
    envCompatible
  ], });

La envPrefixpropiedad le indicará a Vite que use variables con un REACT_APP_prefijo. Ahora puede usar variables de entorno en su proyecto sin cambiar los nombres. Sin embargo, aún tendrá que reemplazar con en su código.process.envimport.meta.env

Puede usar la función de búsqueda en su IDE para encontrar y reemplazar rápidamente todo en su base de código.process.env

# data[].attributes.attachment_link.readable_text
Create React App (CRA) has played a pivotal role in the development of React's community and its ecosystem at large. It is the tool of choice for developers of different skill sets when it comes to constructing a local React development environment on a whim.

CRA boasts several standout features that make it hard to overlook, the most prominent ones being: local development server, Hot Module Replacement (HMR), and production bundling. CRA does, however, have a significant drawback, which is progressive speed and performance deterioration.

As an application grows in size and complexity, Create React App's performance tends to dip, and the time it takes to start a development server increases significantly. This makes CRA unfit for production.

In this guide, we'll introduce Vite, a build tool built on esbuild. We'll cover everything you need to know to start building React applications with Vite. We'll also review the differences between Vite vs. CRA and demonstrate how to migrate from Create React App to Vite.

Prerequisites

To follow along with the tutorial portion of this article, you'll need the following:

Node.js v14.18 or higher

A browser with support for native ES modules (ESM) and dynamic imports; most modern browsers have this support

A package manager, such as npm or Yarn

What is Vite?

Vite is a build tool that aims to bridge the gap between current and next-generation web development. It focuses on providing a faster and more performant experience for developers and modern web projects.

Vite is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10-100 times faster than JavaScript-based bundlers.

Vite was created by Evan You, the creator of Vue.js. However, it is platform-agnostic, meaning it can be used used to develop JavaScript/TypeScript applications with support for popular libraries such as React, Svelte, Preact, and even vanilla JavaScript.

Vite leverages the browser's native ESM to parse and compile your code as the browser requests it. Then it serves the source file using a plugin such as Koa (a lightweight Node.js web server) to create a dev server with support for Hot Module Replacement (HMR) for updating served modules and Rollup for production builds.

How do Vite and Create React App work?

Vite and CRA are not as different as you might think. At their core, they pretty much do the same thing, which is to serve a local development server and bundle codes for production. The major difference you'll notice is how code is served in development and which modules are supported.

Create React App is a development environment that helps speed up the development process by letting developers focus on their code instead of configuring build tools.

CRA uses a third-party build tool called webpack to handle its core functionalities under the hood. This is really what Vite is up against.

So, what is webpack? webpack is a JavaScript module bundler just like Vite. But unlike Vite, webpack supports more than one module out of the box:

ESM

CommonJS

Asynchronous Module Definition (AMD) API

webpack uses any of these JavaScript module systems to combine assets and modules into one or more static assets, then it uses the Express.js web server and webpack-dev-server to serve content from the bundled asset with support for HMR.

To help put things into perspective, we'll break down how both tools handle these functionalities in development.

Create React App in development

When you start a CRA development for the first time, the first thing webpack does is use the app's entry point (the index.js file) to create a tree of dependencies from all the modules in the project.

Next, it transpiles the code with Babel, bundles the code together, and serves it with the Express.js web server. Lastly, it sets up sockets that will handle the Hot Module Replacement.

Although this approach is quicker and lets you focus on your code, it has a significant drawback.

webpack repeats the bundling process every time there is a change in the code. As a result, when your source code grows larger, everything becomes sluggish. The time it takes to serve a dev server and build your projects increases significantly.

Here's a visual depiction of the CRA development process:

Vite in development

On the other hand, Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.

Vite doesn't need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.

After serving the app, Vite uses route-based code-splitting to determine which part of the code needs to be loaded, instead of rebuilding and reloading the entire page like CRA. Next, it uses the browser to parse the native ES modules from the app's entry point.

What this means is that the browser will read the import and export statements in your code and make HTTP requests back to the server for each import. The dev server then intercepts the requests and performs code transformation where necessary.

Modules without any changes will return a 304 "not modified" status code, so the browser just ignores them. This way, the browser doesn't have to reload and the application gets to keep its state.

More great articles from LogRocket:

Here's a visual depiction of the Vite development process:

Why use Vite?

We previously reviewed a few advantages of using Vite for React app development. Now, let's take a closer look at Vite's benefits.

Superior performance

During the pre-bundling process, Vite converts dependencies that are shipped as CommonJS or UMD into ESM. This conversion occurs because Vite only supports ESM and serves native ESM codes by default.

Vite can convert dependencies with many internal modules into a single module to improve page load performance. These modules tend to fire hundreds of requests at the same time, which could create congestion in the browser and negatively impact load time. But, by pre-bundling these dependencies into a single file, they only need to send one request, thereby increasing overall performance.

Extensive plugin compatibility

Vite leverages the Rollup plugin interface to improve a developer's experience by allowing them to rely on the mature ecosystem of Rollup plugins. In other words, Vite is compatible with most Rollup plugins out of the box.

We previously explained how HMR speed deteriorates significantly in a bundled-based server as the size of the application increases.

In Vite, HMR is performed over native ESM. When changes occur in a module that accepts hot updates, Vite only needs to precisely invalidate the module. This results in a faster HMR update time, regardless of the size of the application.

Faster build time

Vite uses pre-configured Rollup to build apps for production. Rollup is a more efficient bundler than webpack, so Vite's build time tends to be quicker than that of CRA, and its output is smaller in size

Setting up a React project with Vite 3.0

To create a Vite app, go to your machine's terminal, cd to a preferred folder, and run the following command:

npm create[email protected]

After running the command, the CLI will prompt you to provide a project name. In our case, we'll use the default name vite-project. Next, we'll select react from the list of available templates. This usually takes 10s or less.

Alternatively, you can specify your template of choice in the command, and avoid going through the prompt.

You can do this by adding a --template flag, followed by the framework's name:

npm init[email protected] vite-project --template react

Next, cd into the project folder, install the necessary dependencies, and start the dev server with the following commands:

cd vite-project
npm install
npm run dev

After these commands run, a development server will be up and running on port 5173. It usually takes Vite just 1325ms to serve an application.

Now open your browser and enter localhost:5173. You'll see a page similar to the one below with the quintessential count button.

That's it! We've successfully set up a Vite React development environment!

Next, we'll look at how to migrate a Create React App project to Vite.

Migrating a Create React App project to Vite

If you have an existing CRA project, it's pretty simple to migrate it to Vite.

As a first step, open the package.json file in your project folder and delete react-scripts from the list of dependencies:

  "dependencies": {
    ...
    "react-scripts": "5.0.1",
    ...
  },

Next, add a "devDependencies" with the following content:

  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.1",
    "vite": "^3.0.7"
  },

N.B., it is recommended to always use the latest version
Now, replace the scripts:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

With the following:

  "scripts": {
    "start": "vite",
    "build": "vite build",
  },

Next, go to the index.html file inside the Public folder and remove every %PUBLIC_URL%/ prefix in the link paths:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Replace the removed prefix with the following:

<link rel="icon" href="./public/favicon.ico" />
 ...
<link rel="apple-touch-icon" href="./public/logo192.png" />
 ...
<link rel="manifest" href="./public/manifest.json" />

Then, add an entry point script inside the body element, just below the root div:

<script type="module" src="/src/index.jsx"></script>

But before you do this, rename every .js file that contains React codes to a .jsx file. For example, you'd rename the index.js file index.jsx.

Then, move the index.html file to the root folder.

The next step is to create a Vite config file, delete the node modules folder, and reinstall the dependencies.

Start by creating a vite.config.js file inside the root folder and add the following code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
})

Next, go to the root folder and delete the node_modules folder. Then, run the following command to reinstall the dependencies and start the development server:

npm install
npm start

Now, if you open your browser and go to localhost:5173, the development server should successfully boot up.

Differences between Create React App and Vite

We've looked at how CRA and Vite work, and we've reviewed some of the benefits of using Vite over CRA. Now, let's take a look at some differences between these tools.

Absolute imports

When you start developing with Vite, the first thing you'll probably notice is the difference in path resolving. Unlike CRA, Vite doesn't have an inbuilt src path.

So, instead of importing files and components in your React app like this:

import Cards from "components/cards";

You'll need to import them like this:

import Cards from "/src/components/cards.jsx"

Fortunately, there's a fix for this path resolving.

Go to the project's root folder, open the vite.config.js file, and replace the existing code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

With the following:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});

Save the code, and now you should be able to use absolute paths in your project.

Environment variables

Another difference between Create React App and Vite is the environment variable naming convention. If you're using environment variables in your project, you'll want to replace the REACT_APP_ prefix with VITE_.

//Instead of this
REACT_APP_ API_KEY = 1234567890..
//Use this
VITE_API_KEY = 1234567890..

Changing the variables one by one can be a pain, especially if you have a lot of variables present in the .env file. Fortunately, the vite-plugin-env-compatible package, lets us use environment variables without changing their names.

Use the following command to install the vite-plugin-env-compatible package:

npm i vite-plugin-env-compatible

Next, go to the vite.config.js file in the root folder of the project and add the following code:

import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
    ...
  envPrefix: 'REACT_APP_',

  plugins: [
    react(),
    envCompatible
  ],
});

The envPrefix property will tell Vite to use variables with a REACT_APP_ prefix. Now you can use environment variables in your project without changing names. However, you'll still have to replace process.env with import.meta.env in your code.

You can use the search feature in your IDE to quickly find and replace every process.env in your codebase.

Conclusion

In this article, we introduced Vite, compared its core concepts to those of Create React App, and looked at how both tools work in development. We also examined the benefits of using Vite and demonstrated how to migrate a Create React App project to Vite.

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you're interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

# data[].attributes.attachment_link.title
Vite 3.0 vs. Create React App - LogRocket Blog

# data[].attributes.attachment_link.description
Learn how to build React applications with Vite and how to migrate from Create React App to Vite. Compare the core concepts of both tools.

# data[].attributes.headline
¿Hay una forma recomendada de estructurar los proyectos React?

# data[].attributes.subject
¿Hay una forma recomendada de estructurar los proyectos React?

# data[].attributes.body
React no tiene opiniones sobre cómo poner los archivos en carpetas. Dicho esto, hay algunos enfoques comunes que son populares en el ecosistema que podrías considerar.

Agrupación por funcionalidades o rutas

Una forma común de estructurar proyectos es ubicar CSS, JS y tests juntos dentro de carpetas agrupadas por funcionalidad o ruta.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

La definición de una “funcionalidad” no es universal, y depende de ti elegir la granularidad. Si no puedes pensar en una lista de carpetas de nivel superior, puede preguntarle a los usuarios de tu producto cuáles son las partes principales y usar su modelo mental como estructura.

Agrupando por tipo de archivo

Otra forma popular de estructurar proyectos es agrupar archivos similares, por ejemplo:

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Algunas personas también prefieren ir más lejos y separar los componentes en diferentes carpetas dependiendo de su función en la aplicación. Por ejemplo, Atomic Design es una metodología de diseño basada en este principio. Recuerda que a menudo es más productivo tratar estas metodologías como ejemplos útiles en lugar de reglas estrictas a seguir.

Evita el exceso de anidación

Hay muchos puntos débiles asociados con el anidamiento profundo de directorios en proyectos JavaScript. Se vuelve más difícil escribir importaciones relativas entre ellas o actualizar esas importaciones cuando se mueven los archivos. A menos que tengas una razón muy convincente para usar una estructura de carpetas profunda, considera limitarte a un máximo de tres o cuatro carpetas anidadas dentro de un solo proyecto. Por supuesto, esto es solo una recomendación y puede que no sea relevante para tu proyecto.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

La definición de una “funcionalidad” no es universal, y depende de ti elegir la granularidad. Si no puedes pensar en una lista de carpetas de nivel superior, puede preguntarle a los usuarios de tu producto cuáles son las partes principales y usar su modelo mental como estructura.

Agrupando por tipo de archivo

Otra forma popular de estructurar proyectos es agrupar archivos similares, por ejemplo:

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Algunas personas también prefieren ir más lejos y separar los componentes en diferentes carpetas dependiendo de su función en la aplicación. Por ejemplo, Atomic Design es una metodología de diseño basada en este principio. Recuerda que a menudo es más productivo tratar estas metodologías como ejemplos útiles en lugar de reglas estrictas a seguir.

Evita el exceso de anidación

Hay muchos puntos débiles asociados con el anidamiento profundo de directorios en proyectos JavaScript. Se vuelve más difícil escribir importaciones relativas entre ellas o actualizar esas importaciones cuando se mueven los archivos. A menos que tengas una razón muy convincente para usar una estructura de carpetas profunda, considera limitarte a un máximo de tres o cuatro carpetas anidadas dentro de un solo proyecto. Por supuesto, esto es solo una recomendación y puede que no sea relevante para tu proyecto.

# data[].attributes.attachment_link.readable_text
¿Hay una forma recomendada de estructurar los proyectos React?

React no tiene opiniones sobre cómo poner los archivos en carpetas. Dicho esto, hay algunos enfoques comunes que son populares en el ecosistema que podrías considerar.

Agrupación por funcionalidades o rutas

Una forma común de estructurar proyectos es ubicar CSS, JS y tests juntos dentro de carpetas agrupadas por funcionalidad o ruta.

common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedStory.test.js FeedAPI.js profile/ index.js Profile.js ProfileHeader.js ProfileHeader.css ProfileAPI.js

La definición de una "funcionalidad" no es universal, y depende de ti elegir la granularidad. Si no puedes pensar en una lista de carpetas de nivel superior, puede preguntarle a los usuarios de tu producto cuáles son las partes principales y usar su modelo mental como estructura.

Agrupando por tipo de archivo

Otra forma popular de estructurar proyectos es agrupar archivos similares, por ejemplo:

api/ APIUtils.js APIUtils.test.js ProfileAPI.js UserAPI.js components/ Avatar.js Avatar.css Feed.js Feed.css FeedStory.js FeedStory.test.js Profile.js ProfileHeader.js ProfileHeader.css

Algunas personas también prefieren ir más lejos y separar los componentes en diferentes carpetas dependiendo de su función en la aplicación. Por ejemplo, Atomic Design es una metodología de diseño basada en este principio. Recuerda que a menudo es más productivo tratar estas metodologías como ejemplos útiles en lugar de reglas estrictas a seguir.

Evita el exceso de anidación

Hay muchos puntos débiles asociados con el anidamiento profundo de directorios en proyectos JavaScript. Se vuelve más difícil escribir importaciones relativas entre ellas o actualizar esas importaciones cuando se mueven los archivos. A menos que tengas una razón muy convincente para usar una estructura de carpetas profunda, considera limitarte a un máximo de tres o cuatro carpetas anidadas dentro de un solo proyecto. Por supuesto, esto es solo una recomendación y puede que no sea relevante para tu proyecto.

No lo pienses demasiado

Si estás comenzando un proyecto, no gastes más de cinco minutos en elegir una estructura de archivos. ¡Elige cualquiera de los enfoques anteriores (o crea uno propio) y comienza a escribir código! Probablemente querrás volver a pensarlo de todos modos después de haber escrito código real.

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".

A medida que los proyectos crecen, frecuentemente utilizan una combinación de los dos enfoques anteriores en la práctica. Así que elegir el "correcto" al principio no es muy importante.

# data[].attributes.attachment_link.description
React no tiene opiniones sobre cómo poner los archivos en carpetas. Dicho esto, hay algunos enfoques comunes que son populares en el ecosistema que podrías considerar. Agrupación por funcionalidades o rutas Una forma común de estructurar proyectos es ubicar CSS, JS y tests juntos dentro de carpetas agrupadas por funcionalidad o ruta.

# data[].attributes.body
Create React App es una forma oficialmente admitida de crear aplicaciones React de una sola página. Ofrece una configuración de construcción moderna sin configuración.

# data[].attributes.attachment_link.description
Create React App is an officially supported way to create single-page React

# data[].attributes.body
El DOM (Document Object Model, en español Modelo de Objetos del Documento) es una API definida para representar e interactuar con cualquier documento HTML o XML. El DOM es un modelo de documento que se carga en el navegador web y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un elemento, una cadena de texto o un comentario).

# data[].attributes.attachment_link.readable_text
El DOM (Document Object Model, en español Modelo de Objetos del Documento) es una API definida para representar e interactuar con cualquier documento HTML o XML. El DOM es un modelo de documento que se carga en el navegador web y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un elemento, una cadena de texto o un comentario).

El DOM es una de las APIs más usadas en la Web, pues permite ejecutar código en el navegador para acceder e interactuar con cualquier nodo del documento. Estos nodos pueden crearse, moverse o modificarse. Pueden añadirse a estos nodos manejadores de eventos ( event listeners en inglés) que se ejecutarán/activarán cuando ocurra el evento indicado en este manejador.

El DOM surgió a partir de la implementación de JavaScript en los navegadores. A esta primera versión también se la conoce como DOM 0 o "Legacy DOM". Hoy en día el grupo WHATWG es el encargado de actualizar el estándar de DOM.

# data[].attributes.attachment_link.title
DOM - Glosario de MDN Web Docs: Definiciones de términos relacionados con la Web | MDN

# data[].attributes.attachment_link.description
El DOM (Document Object Model, en español Modelo de Objetos del Documento) es una API definida para representar e interactuar con cualquier documento HTML o XML. El DOM es un modelo de documento que se carga en el navegador web y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un elemento, una cadena de texto o un comentario).

# data[].attributes.body
Vite es una herramienta de construcción que tiene como objetivo cerrar la brecha entre el desarrollo web actual y el de próxima generación. Se enfoca en brindar una experiencia más rápida y de mayor rendimiento para desarrolladores y proyectos web modernos.

Vite se basa en esbuild, un paquete de JavaScript escrito en Go, que agrupa las dependencias de 10 a 100 veces más rápido que los paquetes basados ​​en JavaScript.

# data[].attributes.attachment_link.readable_text
Create React App (CRA) has played a pivotal role in the development of React's community and its ecosystem at large. It is the tool of choice for developers of different skill sets when it comes to constructing a local React development environment on a whim.

CRA boasts several standout features that make it hard to overlook, the most prominent ones being: local development server, Hot Module Replacement (HMR), and production bundling. CRA does, however, have a significant drawback, which is progressive speed and performance deterioration.

As an application grows in size and complexity, Create React App's performance tends to dip, and the time it takes to start a development server increases significantly. This makes CRA unfit for production.

In this guide, we'll introduce Vite, a build tool built on esbuild. We'll cover everything you need to know to start building React applications with Vite. We'll also review the differences between Vite vs. CRA and demonstrate how to migrate from Create React App to Vite.

Prerequisites

To follow along with the tutorial portion of this article, you'll need the following:

Node.js v14.18 or higher

A browser with support for native ES modules (ESM) and dynamic imports; most modern browsers have this support

A package manager, such as npm or Yarn

What is Vite?

Vite is a build tool that aims to bridge the gap between current and next-generation web development. It focuses on providing a faster and more performant experience for developers and modern web projects.

Vite is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10-100 times faster than JavaScript-based bundlers.

Vite was created by Evan You, the creator of Vue.js. However, it is platform-agnostic, meaning it can be used used to develop JavaScript/TypeScript applications with support for popular libraries such as React, Svelte, Preact, and even vanilla JavaScript.

Vite leverages the browser's native ESM to parse and compile your code as the browser requests it. Then it serves the source file using a plugin such as Koa (a lightweight Node.js web server) to create a dev server with support for Hot Module Replacement (HMR) for updating served modules and Rollup for production builds.

How do Vite and Create React App work?

Vite and CRA are not as different as you might think. At their core, they pretty much do the same thing, which is to serve a local development server and bundle codes for production. The major difference you'll notice is how code is served in development and which modules are supported.

Create React App is a development environment that helps speed up the development process by letting developers focus on their code instead of configuring build tools.

CRA uses a third-party build tool called webpack to handle its core functionalities under the hood. This is really what Vite is up against.

So, what is webpack? webpack is a JavaScript module bundler just like Vite. But unlike Vite, webpack supports more than one module out of the box:

ESM

CommonJS

Asynchronous Module Definition (AMD) API

webpack uses any of these JavaScript module systems to combine assets and modules into one or more static assets, then it uses the Express.js web server and webpack-dev-server to serve content from the bundled asset with support for HMR.

To help put things into perspective, we'll break down how both tools handle these functionalities in development.

Create React App in development

When you start a CRA development for the first time, the first thing webpack does is use the app's entry point (the index.js file) to create a tree of dependencies from all the modules in the project.

Next, it transpiles the code with Babel, bundles the code together, and serves it with the Express.js web server. Lastly, it sets up sockets that will handle the Hot Module Replacement.

Although this approach is quicker and lets you focus on your code, it has a significant drawback.

webpack repeats the bundling process every time there is a change in the code. As a result, when your source code grows larger, everything becomes sluggish. The time it takes to serve a dev server and build your projects increases significantly.

Here's a visual depiction of the CRA development process:

Vite in development

On the other hand, Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.

Vite doesn't need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.

After serving the app, Vite uses route-based code-splitting to determine which part of the code needs to be loaded, instead of rebuilding and reloading the entire page like CRA. Next, it uses the browser to parse the native ES modules from the app's entry point.

What this means is that the browser will read the import and export statements in your code and make HTTP requests back to the server for each import. The dev server then intercepts the requests and performs code transformation where necessary.

Modules without any changes will return a 304 "not modified" status code, so the browser just ignores them. This way, the browser doesn't have to reload and the application gets to keep its state.

More great articles from LogRocket:

Here's a visual depiction of the Vite development process:

Why use Vite?

We previously reviewed a few advantages of using Vite for React app development. Now, let's take a closer look at Vite's benefits.

Superior performance

During the pre-bundling process, Vite converts dependencies that are shipped as CommonJS or UMD into ESM. This conversion occurs because Vite only supports ESM and serves native ESM codes by default.

Vite can convert dependencies with many internal modules into a single module to improve page load performance. These modules tend to fire hundreds of requests at the same time, which could create congestion in the browser and negatively impact load time. But, by pre-bundling these dependencies into a single file, they only need to send one request, thereby increasing overall performance.

Extensive plugin compatibility

Vite leverages the Rollup plugin interface to improve a developer's experience by allowing them to rely on the mature ecosystem of Rollup plugins. In other words, Vite is compatible with most Rollup plugins out of the box.

We previously explained how HMR speed deteriorates significantly in a bundled-based server as the size of the application increases.

In Vite, HMR is performed over native ESM. When changes occur in a module that accepts hot updates, Vite only needs to precisely invalidate the module. This results in a faster HMR update time, regardless of the size of the application.

Faster build time

Vite uses pre-configured Rollup to build apps for production. Rollup is a more efficient bundler than webpack, so Vite's build time tends to be quicker than that of CRA, and its output is smaller in size

Setting up a React project with Vite 3.0

To create a Vite app, go to your machine's terminal, cd to a preferred folder, and run the following command:

npm create[email protected]

After running the command, the CLI will prompt you to provide a project name. In our case, we'll use the default name vite-project. Next, we'll select react from the list of available templates. This usually takes 10s or less.

Alternatively, you can specify your template of choice in the command, and avoid going through the prompt.

You can do this by adding a --template flag, followed by the framework's name:

npm init[email protected] vite-project --template react

Next, cd into the project folder, install the necessary dependencies, and start the dev server with the following commands:

cd vite-project
npm install
npm run dev

After these commands run, a development server will be up and running on port 5173. It usually takes Vite just 1325ms to serve an application.

Now open your browser and enter localhost:5173. You'll see a page similar to the one below with the quintessential count button.

That's it! We've successfully set up a Vite React development environment!

Next, we'll look at how to migrate a Create React App project to Vite.

Migrating a Create React App project to Vite

If you have an existing CRA project, it's pretty simple to migrate it to Vite.

As a first step, open the package.json file in your project folder and delete react-scripts from the list of dependencies:

  "dependencies": {
    ...
    "react-scripts": "5.0.1",
    ...
  },

Next, add a "devDependencies" with the following content:

  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.1",
    "vite": "^3.0.7"
  },

N.B., it is recommended to always use the latest version
Now, replace the scripts:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

With the following:

  "scripts": {
    "start": "vite",
    "build": "vite build",
  },

Next, go to the index.html file inside the Public folder and remove every %PUBLIC_URL%/ prefix in the link paths:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Replace the removed prefix with the following:

<link rel="icon" href="./public/favicon.ico" />
 ...
<link rel="apple-touch-icon" href="./public/logo192.png" />
 ...
<link rel="manifest" href="./public/manifest.json" />

Then, add an entry point script inside the body element, just below the root div:

<script type="module" src="/src/index.jsx"></script>

But before you do this, rename every .js file that contains React codes to a .jsx file. For example, you'd rename the index.js file index.jsx.

Then, move the index.html file to the root folder.

The next step is to create a Vite config file, delete the node modules folder, and reinstall the dependencies.

Start by creating a vite.config.js file inside the root folder and add the following code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
})

Next, go to the root folder and delete the node_modules folder. Then, run the following command to reinstall the dependencies and start the development server:

npm install
npm start

Now, if you open your browser and go to localhost:5173, the development server should successfully boot up.

Differences between Create React App and Vite

We've looked at how CRA and Vite work, and we've reviewed some of the benefits of using Vite over CRA. Now, let's take a look at some differences between these tools.

Absolute imports

When you start developing with Vite, the first thing you'll probably notice is the difference in path resolving. Unlike CRA, Vite doesn't have an inbuilt src path.

So, instead of importing files and components in your React app like this:

import Cards from "components/cards";

You'll need to import them like this:

import Cards from "/src/components/cards.jsx"

Fortunately, there's a fix for this path resolving.

Go to the project's root folder, open the vite.config.js file, and replace the existing code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

With the following:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});

Save the code, and now you should be able to use absolute paths in your project.

Environment variables

Another difference between Create React App and Vite is the environment variable naming convention. If you're using environment variables in your project, you'll want to replace the REACT_APP_ prefix with VITE_.

//Instead of this
REACT_APP_ API_KEY = 1234567890..
//Use this
VITE_API_KEY = 1234567890..

Changing the variables one by one can be a pain, especially if you have a lot of variables present in the .env file. Fortunately, the vite-plugin-env-compatible package, lets us use environment variables without changing their names.

Use the following command to install the vite-plugin-env-compatible package:

npm i vite-plugin-env-compatible

Next, go to the vite.config.js file in the root folder of the project and add the following code:

import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
    ...
  envPrefix: 'REACT_APP_',

  plugins: [
    react(),
    envCompatible
  ],
});

The envPrefix property will tell Vite to use variables with a REACT_APP_ prefix. Now you can use environment variables in your project without changing names. However, you'll still have to replace process.env with import.meta.env in your code.

You can use the search feature in your IDE to quickly find and replace every process.env in your codebase.

Conclusion

In this article, we introduced Vite, compared its core concepts to those of Create React App, and looked at how both tools work in development. We also examined the benefits of using Vite and demonstrated how to migrate a Create React App project to Vite.

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you're interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

# data[].attributes.attachment_link.title
Vite 3.0 vs. Create React App - LogRocket Blog

# data[].attributes.attachment_link.description
Learn how to build React applications with Vite and how to migrate from Create React App to Vite. Compare the core concepts of both tools.

# data[].attributes.body
Styled Components es una de las librerías más populares para inyectar CSS en JavaScript. No es específica para React ni para ningún otro framework. La puedes utilizar junto con cualquier framework basado en componentes.

# data[].attributes.attachment_link.readable_text
¿Qué es CSS-en-JS?

CSS-en-JS es un patrón que utiliza JavaScript para inyectar estilo al DOM. De esta manera, puedes dar estilo a tus componentes basado en el estado del mismo. Bibliotecas o frameworks como React, Angular, y Vue empacan HTML y JavaScript en un solo archivo. Las bibliotecas de CSS-en-JS, te proveen una manera de incluir las reglas de CSS para el componente en el mismo archivo, manteniendo así la modalidad del framework.

Styled Components

¿Qué es?

Styled Components es una de las librerías más populares para inyectar CSS en JavaScript. No es específica para React ni para ningún otro framework. La puedes utilizar junto con cualquier framework basado en componentes.

Gráfica sobre la cantidad de estrellas de las librerías más populares de CSS-en-JS

Utiliza template literals u objetos para crear componentes con estilo que puedes usar directamente en tu código.

Los tratas igual que a los componentes que ya conoces por lo que puedes pasar props, poner componentes dentro de otros componentes, darle un id, ser reutilizados, entre otras.

Para dar estilo puedes usar CSS y otras funcionalidades adicionales popularizadas por pre-procesadores como Sass.

Styled Components añade una clase única a cada componente para evitar problemas de especificidad. Además, esto asegura que el buscador solo cargue el código necesario para cada página de tu aplicación.

Otras bibliotecas mítigan este riesgo inyectando CSS directamente en el HTML (conocido como inline styles). Esta modalidad previene el uso de funcionalidades como pseudo selectors y media queries.

Una de las ventajas más importantes de Styled Components es que automáticamente añade los prefijos de buscadores. Solo te tienes que preocupar por escribir CSS y ellos se preocupan porque funcione en la mayoría de los buscadores más utilizados. Aquí puedes ver la lista de los buscadores que apoyan.

Pre-Requisitos

Este artículo asume que tienes conocimientos básicos de CSS, HTML, JavaScript y React.

Instalación

Para instalar styled-components puedes utilizar o . En mis ejemplos utilizaré npm.

Desde el directorio principal de tu aplicación ejecuta el siguiente comando:

En cada archivo en el que lo quieras utilizar, debes importarlo. En la parte superior del archivo escribe:

Estilizar Componentes de React

👉 Recuerda borrar los archivos de *.css qué create-react-app genera para que no tengas ningún conflicto con tus estilos. Si deseas mantener algunos de estos estilos, puedes cambiarlos a Styled Components.

Básico

Empezaremos dándole estilo a un botón básico.

De momento, así se ve el botón.

Este botón contiene solo los estilos del buscador. Muy aburrido, ¿no?

Para darle estilo, importamos styled-components en la parte superior del archivo. Esto te permite utilizar objetos, como en React, o template literals.

En mis ejemplos estaré utilizando template literals.

Por ahora, el botón es solo un elemento de HTML. Con Styled Components lo convertiremos en un componente que se comportará como cualquier otro componente de React. La diferencia es que este tendrá sus estilos en una clase única. Por esto, el nombre del componente estilizado tendrá que empezar con letra mayúscula.

Debes crear una constante fuera del componente Button. Puedes colocarlo debajo de las importaciones.

Notarás que styled utiliza notación de punto para obtener el elemento de HTML que deseas estilizar. En este caso, utilizamos button, pero igual podemos poner div, h1, o cualquier otro elemento de HTML. Entre los backticks, escribes CSS al igual que lo harías en un archivo de CSS.

En el componente Button, <PrettyButton> reemplaza a <button>.

Este botón ahora luce así.

👉 Usuarios de VS Code: puedes añadir la extensión [vscode-styled-components](<https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components>) para obtener syntax highlighting e IntelliSense en tus styled components.

Heredar Estilos de un Componente Existente

Tal vez necesitas otro botón idéntico al anterior, pero con un color de fondo diferente. Tu primer impulso puede ser copiar el componente anterior y simplemente cambiarle el color. Styled Components nos provee una mejor manera que no requiere duplicar código. Podemos utilizar el constructor styled().

Entre los paréntesis deberás colocar el styled component que deseas extender. Luego, solo añade los estilos que quieras sobreponer.

Este nuevo botón luce así.

Estilos Condicionados a Props

Una de las funcionalidades más poderosas de Styled Components es la habilidad de estilizar componentes de acuerdo al estado.

Lo demostraré con un botón que cambia de color al presionarlo. Estaré utilizando el hook de React useState() para manejar el estado del botón.

Primero, importo el hook y creo el componente básico, sin estilos.

Utilicé useState() para cambiar el estado del botón que dictará si el fondo del botón será rosado o no mediante el valor de isPink. Al comienzo, no será rosado por lo que iniciamos el estado como false. Al presionar el botón setIsPink(!isPink)cambiará el estado a true. Al volver a presionarlo, volverá a su color original.

Ahora estamos listos para estilizar nuestro componente.

Para que Styled Components pueda notar este cambio de estado hay que hacer dos cosas.

1. Añade la variable de estado isPink como prop en el componente del botón

2. Obtén la prop en el estilo que quieras cambiar de acuerdo al estado

Botón cambia de color al presionarlo

👉 ¡No olvides importar styled-components en la parte superior del archivo!

Estilos en línea con CSS Prop

A veces editamos estilos en línea para iterar rápidamente antes de decidir sobre uno en particular. En React, los estilos se escriben en forma de objeto. Si utilizas la css prop de Styled Components, podrás escribir estilos en línea de manera estándar pues también utiliza template literals.

Otra ventaja, es que Styled Components obtiene éstos estilos y los convierte en una clase única. De esta manera, el HTML no se llena de estilos en línea. Al igual que los estilos en línea de HTML, estas propiedades también pueden ser sobrescritas por un Styled Component si éste incluye !important.

Para utilizar esta prop, tendrás que importar el macro de styled components. En el tope del archivo, donde importas Styled Components simplemente añade /macro al final. Se verá así:

Aquí va un ejemplo utilizando la css prop para lograr el mismo estilo que el <PrettyButton> que estilizamos en la sección Básico.

En el próximo ejemplo podrás notar que a pesar de que incluí un estilo en línea para cambiar el color del text a blanco, este se mantiene negro. Ya que en el styled component sobrepuse que el color fuese negro con !important.

Botón con estilos en línea utilizando css prop

Estilos Globales

Los styled components que hemos visto hasta el momento están aislados de otros componentes. Las classes de CSS generadas son solo locales. ¿Qué pasa si queremos inyectar estilos que apliquen a toda nuestra aplicación? Algunos ejemplos de esto pueden ser el fuente, colores, etc..

Styled Components provee una función para esto. En este caso tenemos que importar createGlobalStyle.

Para añadir estilos globales con Styled Components, hay dos pasos.

1. Crea un archivo de JavaScript en /src para los estilos globales.

En mi ejemplo, le llamaré GlobalStyles.js.

Luego, debes crear un componente con los estilos globales y exportarlo.

2. Añade tu componente como el primer componente en App.js, en el tope del árbol de React.

¡Listo!

👉 Aunque muchos de los conceptos que hemos discutido hasta ahora funcionan con React Native, createGlobalStyle no es uno de ellos.

Animaciones

La función keyframes de Styled Components nos permite crear animaciones sin tener que sin tener que añadirlas a nivel global. Esta genera una instancia única que puede ser utilizada a través de toda la aplicación.

Para crear animaciones necesitas tomar tres pasos:

1. Importa keyframes y crea los keyframes

2. Crea el styled component y exportalo

3. Añádelo al árbol de React colocándolo en App.js

Esta animación luce así.

Texto Escuela Frontend rotando

Temas

Puedes utilizar temas para cambiar los estilos, mayormente los colores, de tu aplicación. Es muy útil para crear una versión dark mode y una versión light mode, por ejemplo.

Styled Components provee una función para aplicar un tema a una aplicación. Puedes crear un archivo independiente para el tema, o puedes crearlo dentro del mismo archivo de App.js. Independientemente de cual opción escojas, debes importar el ThemeProvider.

Este componente toma una prop llamada theme con un objeto con los estilos del tema.

1. Crea el objeto

2. Crea el styled component y exportalo

3. Impórtalo en App.js y envuelve el árbol de React con el componente del tema

theme será una prop que puedes acceder desde cada propiedad de los styled components. La puedes utilizar de la misma forma en que utilizamos el estado isPink para cambiar el color de un botón en una de las secciones anteriores.

Organización

Es cierto que una de las atracciones de Styled Components es la habilidad de colocar los estilos en el mismo archivo que el componente. También puedes reutilizar los componentes con estilo en cualquier parte de tu aplicación. Por ejemplo, puedes tener un botón simple estilizado que forme parte de otros componentes. En lugar de duplicar el styled component, puedes crear un archivo solo de estilos y exportar cada uno.

Conclusión

Styled Components te permite darle estilo a tus componentes manteniendo la modularidad de React. Puedes utilizar funcionalidades adicionales a las que trae CSS en formato de template literal o de objeto y no te tienes que preocupar por añadirle los prefijos de buscadores. ¡Styled Components lo hace por ti!

Sandbox

Puedes jugar con los componentes que creé durante el artículo en este codesandbox.

# data[].attributes.attachment_link.title
Cómo Utilizar Styled Components en React

# data[].attributes.attachment_link.description
CSS-en-JS es un patrón que utiliza JavaScript para inyectar estilo al DOM. De esta manera, puedes dar estilo a tus componentes basado en el estado del mismo. Bibliotecas o frameworks como React, Angular, y Vue empacan HTML y JavaScript en un solo archivo.

# data[].attributes.body
El DOM virtual (VDOM) es un concepto de programación donde una representación ideal o “virtual” de la IU se mantiene en memoria y en sincronía con el DOM “real”, mediante una biblioteca como ReactDOM. Este proceso se conoce como reconciliación.

# data[].attributes.attachment_link.readable_text
¿Qué es el DOM virtual?

El DOM virtual (VDOM) es un concepto de programación donde una representación ideal o "virtual" de la IU se mantiene en memoria y en sincronía con el DOM "real", mediante una biblioteca como ReactDOM. Este proceso se conoce como reconciliación.

Este enfoque hace posible la API declarativa de React: le dices a React en qué estado quieres que esté la IU, y se hará cargo de llevar el DOM a ese estado. Esto abstrae la manipulación de atributos, manejo de eventos y actualización manual del DOM que de otra manera tendrías que usar para construir tu aplicación.

Ya que "DOM virtual" 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.

¿Es el Shadow DOM lo mismo que el DOM virtual?

No, son diferentes. El Shadow DOM es una tecnología de los navegadores diseñada principalmente para limitar el alcance de variables y CSS en componentes web. El DOM virtual es un concepto que implementan bibliotecas en JavaScript por encima de las APIs de los navegadores.

¿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. Leer más.

# data[].attributes.attachment_link.title
DOM virtual y detalles de implementación - React

# data[].attributes.attachment_link.description
El DOM virtual (VDOM) es un concepto de programación donde una representación ideal o "virtual" de la IU se mantiene en memoria y en sincronía con el DOM "real", mediante una biblioteca como ReactDOM. Este proceso se conoce como reconciliación.