Dato curioso platzi esta hecho con react
Introducción y requisitos
¿Qué necesitas para aprender React.js?
Maquetación con React.js
¿Qué es un componente?
Componentes de TODO Machine
¿Cómo se comunican los componentes? Props y atributos
Estilos CSS en React
Interacción con React.js
Eventos en React: onClick, onChange
¿Qué es el estado?
Contando TODOs
Buscando TODOs
Completando y eliminando TODOs
Librería de Iconos Personalizados
Iconos en React: librerías y SVG
Iconos con colores dinámicos
Herramientas avanzadas: escalabilidad, organización y persistencia
Local Storage con React.js
Custom Hooks
Organización de archivos y carpetas
Feature-First Directories en React
Tips para naming y abstracción de componentes React
¿Qué son los efectos en React?
Estados de carga y error
Actualizando estados desde useEffect
Reto: loading skeletons
¿Qué es React Context?
useContext
¿Qué son los React Portals?
Reto: estados para abrir y cerrar un modal
Maquetando formularios en React
Crear TODOs: React Context dentro de React Portals
Deploy
Despliegue de TODO Machine en GitHub Pages
Presentación de proyectos para tu portafolio
Próximos pasos: React #UnderTheHood
Diferencias entre versiones de React.js
¿Cuándo realmente necesitas React.js?
Bonus: creando proyectos en React desde cero
React con Create React App
React con Next.js
React con Vite
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En las aplicaciones web actuales, los estados de carga y error son vitales para mejorar la experiencia del usuario, pues permiten informar al usuario sobre lo que ocurre en segundo plano. En este artículo, exploraremos cómo implementar estos estados de forma efectiva en una aplicación React utilizando un Custom Hook.
Simular un retraso en la obtención de datos de localStorage
nos ayuda a comprender cómo manejar datos asincrónicos en nuestra aplicación. Aunque localStorage
suele ser rápido y síncrono, es relevante aprender a gestionar posibles demoras. Para lograr esto:
setTimeout
para encapsular llamadas dentro de un retardo predefinido (por ejemplo, dos o tres segundos).const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = React.useState(initialValue);
React.useEffect(() => {
const retrieveData = async () => {
await new Promise(resolve => setTimeout(resolve, 2000));
const item = window.localStorage.getItem(key);
item ? setStoredValue(JSON.parse(item)) : setStoredValue(initialValue);
};
retrieveData();
}, [initialValue, key]);
return [storedValue, setStoredValue];
};
Para mantener a los usuarios informados sobre la carga y posibles errores:
useState
: loading
y error
.loading
inicializa a true
y cambia a false
cuando los datos han sido cargados.error
se inicializa en false
, cambiando a true
en caso de ocurrir un error.const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(false);
React.useEffect(() => {
async function fetchData() {
try {
// Simular retraso
await new Promise((resolve) => setTimeout(resolve, 2000));
const item = window.localStorage.getItem(key);
// Manejar datos
item ? setStoredValue(JSON.parse(item)) : setStoredValue(initialValue);
} catch (err) {
setError(true);
} finally {
setLoading(false);
}
}
fetchData();
}, [key, initialValue]);
Finalmente, mostramos mensajes adecuados según el estado:
return (
<div>
{loading && <p>Estamos cargando...</p>}
{error && <p>¡Hubo un error!</p>}
{!loading && !error && storedValue.length === 0 && <p>Crea tu primer todo</p>}
{!loading && !error && storedValue.map(todo => <Item key={todo.id} {...todo} />)}
</div>
);
Cuando trabajamos con Custom Hooks que retornan múltiples valores, seguir las siguientes prácticas mejora la claridad de nuestro código:
const { item, loading, error } = useLocalStorage('todos', []);
Este enfoque garantiza que nuestros componentes sean mantenibles y entendibles a largo plazo. ¡Sigue explorando y aplicando estas técnicas para optimizar la UX en tus aplicaciones React!
Aportes 12
Preguntas 2
Dato curioso platzi esta hecho con react
Por fin ya entendí como grabaron el curso
El VSC realmente solo es el 70% de la pantalla el 30% demás es agregado en edición al igual que sus elementos y lineas para que coincida, gran trabajo pero por unos pixeles y los símbolos duplicados me di de cuenta sin embargo es un gran avance
Otra forma de realizar la logica para informarle a el usuario que debe crear un TODO es
!loading && !searchedTodos.length && 'Crea algún TODO'}
si es 0 es un valor Falsy y al negarlo se convierte en verdadero
https://developer.mozilla.org/en-US/docs/Glossary/Falsy
Dato curioso, de la siguiente manera se pueden importar las diferentes herramientas que nos provee React:
import React, { useState, useEffect } from "react";
quiero dar mi aporte dejo mi codigo aqui para que puedan entender el flujo de la app que explica el profe
import React from "react";
import { useEffect } from "react";
//custom Hooks
export const useLocalStorage = (itemName, initialValue)=>{
//local storage
const item_Todos = () => {
/**
* Retrieves the value of an item from the local storage. If the item does not exist, it sets the initial value for the item in the local storage and returns the initial value. If the item exists, it returns the value of the item from the local storage.
*
* @returns {any} The value of the item from the local storage.
*/
let localStorageItem = JSON.parse(localStorage.getItem(itemName));
if (!localStorageItem) {
localStorage.setItem(itemName, JSON.stringify(initialValue));
return (localStorageItem = initialValue);
} else {
return localStorageItem;
}
};
//state of react
const [item, setItem] = React.useState(initialValue);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(false);
//useEffect
useEffect(()=>{
setTimeout(()=>{
try {
setItem(item_Todos());
setLoading(false);
} catch (error) {
setLoading(false);
setError(true);
}
}, 1800);
},[])
//almacenamiento en local storage
const saveItem=(newItem)=>{
localStorage.setItem(itemName, JSON.stringify(newItem));
setItem(newItem);
}
return {item, saveItem, loading, error}
}
Condicionales en React: https://es.legacy.reactjs.org/docs/conditional-rendering.html
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?