Iconos en React: librerías y SVG

Resumen

La incorporación de interactividad y la respuesta a eventos en las aplicaciones han sido el foco en el módulo que hemos trabajado; hemos logrado darle vida a la aplicación. No obstante, la estética sigue siendo un aspecto crucial que requiere atención. Vemos cómo detalles tan sencillos como el uso de una 'V' como botón de completar pueden disminuir el nivel de profesionalismo del diseño. Afortunadamente, con herramientas como React Icons y la habilidad de incrustar SVGs personalizados podemos elevar la interfaz de usuario a un nuevo estandard de calidad y funcionalidad. A continuación, exploraremos algunas maneras de integrar íconos estéticamente agradables y cómo gestionarlos para personalizar nuestras aplicaciones en React.

¿Por qué son importantes los íconos en las interfaces de usuario?

Los íconos son elementos gráficos que mejoran la experiencia del usuario al proporcionar pistas visuales claras y estéticamente atractivas. Incorporar íconos adecuados no solo mejora la apariencia de la aplicación, sino que también contribuye a una mayor comprensión de su funcionamiento.

Facilidad de uso

Ofrecen una manera rápida e intuitiva de interactuar con la aplicación.
Refuerzan la identificación de acciones específicas.

Mejora estética

Aportan un aspecto visual refinado y profesional.
Permiten mantener un diseño limpio y organizado.

¿Cómo podemos agregar íconos en React?

Agregar íconos en React puede ser una tarea sencilla gracias a librerías especializadas. Veamos cómo hacerlo con una de las más populares: React Icons.

Uso de librerías especializadas: React Icons

Instalación:
```
npm install react-icons
```
Uso: Se puede importar un ícono específico de la siguiente manera:
```
import { IconName } from 'react-icons/fa';
```
Reemplazar 'IconName' con el nombre del ícono deseado.

Personalización de íconos

Crear una librería de íconos personalizada puede ser necesario si se cuenta con diseños exclusivos.
Importar los SVGs diseñados por el equipo y utilizarlos en lugar de los predefinidos en librerías existentes.

¿Cómo crear una librería de íconos personalizada en React?

Para aquellos que necesitan íconos a medida, el proceso de crear una librería propia de íconos en React implica algunos pasos adicionales, pero igual de manejables.

Creación de los componentes de íconos personalizados

Configuración inicial:
1. Crear archivos CompleteIcon.js y DeleteIcon.js.
2. Importar React y definir la función del componente.
Importar SVGs: Los SVGs pueden ser importados directamente y utilizados como componentes en React.
Exportación y uso de íconos personalizados: Después de preparar los íconos, se pueden utilizar en la aplicación importándolos como cualquier otro componente.

¿Cómo gestionar íconos dinámicamente en React?

La flexibilidad para cambiar propiedades como el color de un ícono dinámicamente es crucial para una buena experiencia de diseño.

Gestión de íconos con propiedades dinámicas

Se pueden pasar propiedades como 'type' y 'color' a los íconos para modificar su apariencia programáticamente.
Utilizar condiciones en el componente para determinar qué ícono mostrar.

Manipulación de clases CSS para íconos

Las clases de CSS proporcionan la capacidad de posicionar y estilizar los íconos.
Se pueden aplicar diferentes estilos según el estado interactivo del ícono (por ejemplo, al pasar el mouse).

La implementación de íconos en aplicaciones de React no solo eleva la calidad visual sino que también mejora la accesibilidad y la experiencia del usuario. Independientemente de que prefieras una librería de íconos preexistente o crear tu conjunto personalizado, es importante abordar esta área con la meticulosidad que merece. Te animo a experimentar y personalizar tus aplicaciones, recuerda que la práctica constante y el aprendizaje continuo son claves en el desarrollo de habilidades en la programación. ¡Adelante y sigue creando interfaces impresionantes!

José Fabián Beltrán Meza

student•

Esto se veía muy feo

osman Perez

student•

jjajajajajaj

Camilo Andrés Granda Cortés

student•

Así lo hice con React Icons:

Primero instalé react Icons

npm install react-icons --save

despues hice el componente DeleteIcon.js.

despues hice el componente CompleteIcon.js.

despues modifiqué el TodoItem.js

y en el css de TodoItem.css

eso es todo. la cuestion es que no sé que tan válido sea.

Alejandro Calderón

student•

Me gusta mucho como quedo el apartado visual.

Julio Peña

student•

Eres un crack, me parece una solución muy buena!

Enrique Villalobos Andrade

student•

React icons: https://react-icons.github.io/react-icons/

Comando:

npm install react-icons --save

Daniel Moreno

student•

en que archivo pegamos esa linea?

Jesus Alejandro Gutierrez Guevara

student•

en vs code abre la consola integrada para la carpeta en donde tienes el proyecto, y ejecutas ese comando

Leopoldo Martinez

student•

Para los que lo estan haciendo con la libreria de react-icons les recomiendo no usar el archivo TodoIcons.js, aumenta la complejidad del codigo. En lugar de eso creen los componentes de cada icono por separado y usenlos directamente sobre su componente TodoItem de esta manera

CompleteTodo.js

import React from 'react'
import {RxCheck} from 'react-icons/rx'


const CompleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCheck
        className={className}
        onClick={onClick}
    />
  )
}

export {CompleteIcon}

DeleteTodo.js

import React from 'react'
import {RxCross1} from 'react-icons/rx'

const DeleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCross1
        className={className}
        onClick={onClick}
    />
  )
}

export {DeleteIcon}

TodoItem

import React from "react";
import "../styles/TodoItem.css";
import { CompleteIcon } from "./CompleteIcon";
import { DeleteIcon } from "./DeleteIcon";

const TodoItem = (props) => {
  const { text, completed, onToggle, onDelete } = props;

  return (
    <li className="TodoItem">
      <div className={`check-container ${completed && "completed"}`}>
        <CompleteIcon
          className={`check ${completed && "completed"}`}
          onClick={onToggle}
        />
      </div>
      <p className={`todo ${completed && "completed"}`}>{text}</p>
      <div className="closer-container">
        <DeleteIcon className="closer" onClick={onDelete} />
      </div>
    </li>
  );
};

export { TodoItem };

Lucia Rodriguez

student•

solucionen los problemas que tienen con la carga de las clases, es imposible estudiar y entender un concepto si cada minuto y medio se pausa la clase y tengo que esperar otros tres minutos para que cargue. Paso una hora con cada clase

Chanel Mariannis Paredes Sánchez

student•

Encarecidamente Platzi!!

Santiago Quintana

student•

el cambio de servidor me salvo, si estaba lento

Facundo Castro

student•

Hasta ahora sigo usando la versión gratuita de FontAwesome. Por ahora, funciona como debe funcionar.

npm i @fortawesome/fontawesome-svg-core 
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

Luis Fernando Montoya Garcia

student•

Para los que no pudieron usar los icons aqui les dejo una lista de lo que podrian hacer para usar los iconos de la pagina "React icons"

Paso 1. Instala React Icons Si aun no lo has hecho, instala React Icons en tu proyecto

npm install react-icons

Importa el icono en tu componente: En tu archivo donde estás trabajando (supongamos que es un componente de React), importa el icono que deseas usar:

import React from 'react';
import { CiAlignCenterH } from "react-icons/ci";

Usa el icono dentro de tu JSX: Integra el icono dentro del elemento span en tu JSX:

<p><span><CiAlignCenterH/></span></p>

Espero te pueda servir.....!!!!!

Nick Jonathan Silva Riascos

student•

Para los que quieran usar react icons los importan tal cual como lo hacen en el video con los SVG , solo que usan el nombre del icono definido por la librería.

import { BsCheck } from "react-icons/bs";
import { TiDelete } from "react-icons/ti";

const iconType = {
    'check': <BsCheck/>,
    'delete': <TiDelete/>
};

function TodoIcon({type}) {
    return <span className={`icon icon-${type}`}>
        {iconType[type]}
    </span>
}

export { TodoIcon };
```import { BsCheck } from "react-icons/bs";import { TiDelete } from "react-icons/ti";
const iconType = {    'check': \<BsCheck/>,    'delete': \<TiDelete/>};
function TodoIcon({type}) {    return \<span className={`icon icon-${type}`}>        {iconType\[type]}    \</span>}
export { TodoIcon };

Rodrigo Damián Martinez

student•

Me salvaste, no sabia como avanzar y solo tenia que usar el nombre del icono definido por la librería.

Gian HM

student•

Si estan usando react-icons, se realiza de la siguiente manera y es más facil

import { BsCheckCircleFill } from "react-icons/bs";
import { BsFillXCircleFill } from "react-icons/bs";
import './TodoItem.css'

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span
        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
        onClick={props.onComplete}
      >
        <BsCheckCircleFill />
      </span>
      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}</p>
      <span
        className="Icon Icon-delete"
        onClick={props.onDelete}
      >
        <BsFillXCircleFill />
      </span>
    </li>
  );
}

export { TodoItem };
```import { BsCheckCircleFill } from "react-icons/bs";import { BsFillXCircleFill } from "react-icons/bs";import './TodoItem.css'
function TodoItem(props) {  return (    \<li className="TodoItem">      \<span        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}        onClick={props.onComplete}      >        \<BsCheckCircleFill />      \</span>      \<p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}\</p>      \<span        className="Icon Icon-delete"        onClick={props.onDelete}      >        \<BsFillXCircleFill />      \</span>    \</li>  );}
export { TodoItem };

Juan Pablo Berrio Berrio

student•

totalmente, que complejo es ponerse a dar vueltas y vueltas cuando puedes hacerlo mas sencillo y rapido

Chanel Mariannis Paredes Sánchez

student•

Super!

Javier Andrés Portilla Rosero

student•

Quedé un poco perdido en cómo se estaba haciendo antes pero lo probé de esta manera y quisiera compartirlo :D

TodoItem.js

import './TodoItem.css';
import { DeleteIcon } from "./DeleteIcon";
import { CompleteIcon } from "./CompleteIcon";

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon completed={props.completed} onComplete={props.onComplete} />
      <p className={`TodoItem-p ${props.completed && "TodoItem-p-completed"}`}>{props.text}</p>
      <DeleteIcon onDelete={props.onDelete} />
    </li>
  );
}
export { TodoItem };

A continuación CompleteIcon.js

import { GiChainedArrowHeads } from "react-icons/gi";
import React from 'react'

export const CompleteIcon = (props) => {
  return (
    <GiChainedArrowHeads
    className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
    onClick={props.onComplete}
    />
  )
}

A continuación DeleteIcon.js

import React from 'react'
import {GiAnticlockwiseRotation} from "react-icons/gi";

export const DeleteIcon = (props) => {
  return (
    <GiAnticlockwiseRotation
    className={"Icon Icon-delete"}
    onClick={props.onDelete}
    />
  )
}

Jesús Vivas

student•

Me sirvio esta solucion :), gracias

SANTIAGO CANO GONZALEZ

student•

Hasta este momento les queria compartir como realice la app. Utilizando emojis jajajaj

Me gusto bastante agregarle nuevos estilos, pero me genera curiosidad, ahora que entendemos mejor los estados. ¿Cómo evitar los dupliacados de arreglos para diferentes operaciones y de ser posible implementar buenas practicas en react?

Pero como todo, con la practica podemos aprender un monton. Muchas gracias!

Juan Castro

teacher•

A qué te refieres con los duplicados de arreglos, Santi?

Antonio Pineda

student•

Yo lo pude hacer de otra manera:

function TodoIcon({ type }) { return ( <span className={Icon Icon-svg Icon-${type}} > {type === 'check' && <Check />} {type === 'delete' && <Delete />}

    </span>
);

}

Donovan RM

student•

Bueno revisando los comentarios y lo aprendido en clase logré ambos usos uno con el svg local y otro importando la libreria de react:

npm install react-icons --save

el TodoItem.js

import { DeleteIcon } from './DeleteIcon'
import { CheckIcon } from './CheckIcon'
import './TodoItem.css'

function TodoItem (props) {

    return(
      <li className="TodoItem">
        <label>
          <CheckIcon 
              completed={props.completed}
              onClick={props.onComplete}
          />          
          <p 
            className={`TodoItem-p ${props.completed ? 'TodoItem-p--complete' : ''}`}>
            {props.text}
          </p>
        </label>
        <DeleteIcon 
          onClick = {props.onDelete}  
        />
        
        
      </li>
    );
  }
  export { TodoItem };

el TodoIcon.js:

import { ReactComponent as DeleteSVG } from './quit.svg';
import { BsClipboardCheck } from 'react-icons/bs';


const iconTypes = {
    "check": <BsClipboardCheck />,
    "delete": <DeleteSVG />,
};

function TodoIcon({ type , onClick , completed}) {
    return (
        <span
            className={`Icon Icon-${type} ${completed ? `Icon-${type}--active` : ''}`}
            onClick = {onClick}
        >
            {iconTypes[type]}
        </span>
    )
}

export { TodoIcon };

el CheckIcon.js

import React from 'react';
import { TodoIcon } from './TodoIcon'

function CheckIcon({ completed, onClick}) {
    return (
        <TodoIcon 
            type="check"
            color="gray"
            completed = {completed}
            onClick={onClick}
        />
    );
}

export { CheckIcon };

y el que vimos en clase DeleteIcon.js

import React from 'react';
import { TodoIcon } from './TodoIcon'

function DeleteIcon({onClick}) {
    return (
        <TodoIcon 
            type="delete"
            color="gray"
            onClick={onClick}
        />
    );
}

export { DeleteIcon };

Espero les sirva un poco

Donovan RM

student•

Les envio el Repo https://github.com/IngDonovan/list-todo-react.git

Rubén Ernesto Aragón Gil

student•

Tip:

Cuando vayas a importar un useEffect, useState, useRef no hagas esto:

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

Mejor déjalo así:

import { useEffect, useState } from "react";

Que se quitó, pues, el React. Porque agregar este mismo es redundante.

Andrés Soret Chacin

student•

En esta sección, nos enfocaremos en personalizar íconos en ReactJS para mejorar la apariencia de nuestra aplicación. Utilizaremos una librería de íconos llamada React Icons, aunque también exploraremos cómo crear nuestra propia librería de íconos para íconos personalizados. A continuación, detallamos los pasos:

Librería React Icons

React Icons: Una herramienta popular que facilita la integración de íconos en proyectos React.
Permite la importación sencilla de íconos como componentes, brindando una amplia variedad de opciones, como íconos de Andesign, Bootstrap, Fontosom, GitHub Octicons, Material Design, entre otros.
Se puede integrar fácilmente en aplicaciones React, haciendo que la visualización de íconos sea tan simple como importar y utilizar un componente.

Creación de Íconos Personalizados

Aunque React Icons proporciona una amplia gama de íconos, en algunos casos, es necesario trabajar con íconos personalizados diseñados específicamente para el proyecto.
En el ejemplo, se menciona que el equipo de diseño compartió íconos en formato SVG llamados check.svg y delete.svg.
La personalización de íconos también implica gestionar su posición y color, lo cual se abordará dinámicamente mediante React.

Implementación en ReactJS

Crear Archivo de Iconos Personalizados (todoicon.js):
- Se crea un archivo central para manejar la lógica de los íconos personalizados.
- Este archivo permite importar íconos específicos según el tipo y aplicar propiedades como el color.
Componentes CompleteIcon y DeleteIcon:
- Se crean componentes específicos (CompleteIcon.js y DeleteIcon.js) que importan íconos personalizados y especifican el tipo y el color.
- La personalización incluye el uso de React para manejar dinámicamente la clase de estilo y los sbg.
Lógica de Estilo y Posición:
- Se emplea una lógica sencilla para asignar clases dinámicas y aplicar estilos CSS según el tipo de ícono.
- La propiedad type decide qué ícono renderizar, y las clases de estilo (icon-check o icon-delete) gestionan su posición.
Integración en la Aplicación:
- Se integran los componentes CompleteIcon y DeleteIcon en la aplicación principal.
- Se establecen propiedades como type y color para personalizar la apariencia de los íconos según las necesidades del proyecto.

Próximos Pasos

Continuar explorando y personalizando íconos según el diseño del proyecto.
Adaptar y mejorar la aplicación para cumplir con los estándares de presentación y usabilidad.
Considerar la posibilidad de utilizar React Icons para íconos estándar o explorar otras bibliotecas de íconos populares en el ecosistema de React.

Este enfoque en la personalización de íconos proporciona flexibilidad y control sobre la apariencia de la aplicación, permitiendo adaptarse a los requisitos específicos del proyecto.

Willie David Roa Hidalgo

student•

🙃 Los que estén oscuros sobre SVG, entren acá. 🙂

Nataly Fernandez

student•

duuudeee, y yo importando desde google fonts 😂😂

yeferson soto

student•

tengo una pregunta uso como empaquetador a vite.js y no puedo usar ReactComponent con los svg que soluciones me pueden dar ya que al momento de compilar no funciona no reconoce ReactComponent help plis

Juan Castro

teacher•

Mira: https://dev.to/cassidoo/importing-svg-files-as-react-components-with-vite-l3n

yeferson soto

student•

You should use @svgr/rollup instead of vite-plugin-svgr. vite-plugin-svgr is not a good choice, because it doesn't support svgo, and it use esbuild to transform some svg code, it may have some problem in es5 environment.

The worst thing is vite-plugin-svgr can't add svgo plugin, see this issue: https://github.com/pd4d10/vite-plugin-svgr/issues/49.

//en vite.config.js add:

import svgr from '@svgr/rollup';

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

Michael Vega

student•

Use tailwindcss para darle más estilo y use react-icons con fontawesome 6.

Leydi Paola Portela Sanchez

student•

me pareció mucha vuelta para insertar un icono . yo lo hice así :

import React from 'react'
import {RxCheck} from 'react-icons/rx'


const CompleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCheck
        className={className}
        onClick={onClick}
    />
  )
}

export {CompleteIcon}

import React from 'react'
import {RxCross1} from 'react-icons/rx'

const DeleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCross1
        className={className}
        onClick={onClick}
    />
  )
}

export {DeleteIcon}

import React from "react";
import "../styles/TodoItem.css";
import { CompleteIcon } from "./CompleteIcon";
import { DeleteIcon } from "./DeleteIcon";

const TodoItem = (props) => {
  const { text, completed, onToggle, onDelete } = props;

  return (
    <li className="TodoItem">
      <div className={`check-container ${completed && "completed"}`}>
        <CompleteIcon
          className={`check ${completed && "completed"}`}
          onClick={onToggle}
        />
      </div>
      <p className={`todo ${completed && "completed"}`}>{text}</p>
      <div className="closer-container">
        <DeleteIcon className="closer" onClick={onDelete} />
      </div>
    </li>
  );
};

export { TodoItem };

import { BsCheck } from "react-icons/bs";
import { TiDelete } from "react-icons/ti";

const iconType = {
    'check': <BsCheck/>,
    'delete': <TiDelete/>
};

function TodoIcon({type}) {
    return <span className={`icon icon-${type}`}>
        {iconType[type]}
    </span>
}

export { TodoIcon };
```import { BsCheck } from "react-icons/bs";import { TiDelete } from "react-icons/ti";
const iconType = {    'check': \<BsCheck/>,    'delete': \<TiDelete/>};
function TodoIcon({type}) {    return \<span className={`icon icon-${type}`}>        {iconType\[type]}    \</span>}
export { TodoIcon };

import { BsCheckCircleFill } from "react-icons/bs";
import { BsFillXCircleFill } from "react-icons/bs";
import './TodoItem.css'

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span
        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
        onClick={props.onComplete}
      >
        <BsCheckCircleFill />
      </span>
      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}</p>
      <span
        className="Icon Icon-delete"
        onClick={props.onDelete}
      >
        <BsFillXCircleFill />
      </span>
    </li>
  );
}

export { TodoItem };
```import { BsCheckCircleFill } from "react-icons/bs";import { BsFillXCircleFill } from "react-icons/bs";import './TodoItem.css'
function TodoItem(props) {  return (    \<li className="TodoItem">      \<span        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}        onClick={props.onComplete}      >        \<BsCheckCircleFill />      \</span>      \<p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}\</p>      \<span        className="Icon Icon-delete"        onClick={props.onDelete}      >        \<BsFillXCircleFill />      \</span>    \</li>  );}
export { TodoItem };

import './TodoItem.css';
import { DeleteIcon } from "./DeleteIcon";
import { CompleteIcon } from "./CompleteIcon";

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon completed={props.completed} onComplete={props.onComplete} />
      <p className={`TodoItem-p ${props.completed && "TodoItem-p-completed"}`}>{props.text}</p>
      <DeleteIcon onDelete={props.onDelete} />
    </li>
  );
}
export { TodoItem };

import { GiChainedArrowHeads } from "react-icons/gi";
import React from 'react'

export const CompleteIcon = (props) => {
  return (
    <GiChainedArrowHeads
    className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
    onClick={props.onComplete}
    />
  )
}

import React from 'react'
import {GiAnticlockwiseRotation} from "react-icons/gi";

export const DeleteIcon = (props) => {
  return (
    <GiAnticlockwiseRotation
    className={"Icon Icon-delete"}
    onClick={props.onDelete}
    />
  )
}

import { DeleteIcon } from './DeleteIcon'
import { CheckIcon } from './CheckIcon'
import './TodoItem.css'

function TodoItem (props) {

    return(
      <li className="TodoItem">
        <label>
          <CheckIcon 
              completed={props.completed}
              onClick={props.onComplete}
          />          
          <p 
            className={`TodoItem-p ${props.completed ? 'TodoItem-p--complete' : ''}`}>
            {props.text}
          </p>
        </label>
        <DeleteIcon 
          onClick = {props.onDelete}  
        />
        
        
      </li>
    );
  }
  export { TodoItem };

import { ReactComponent as DeleteSVG } from './quit.svg';
import { BsClipboardCheck } from 'react-icons/bs';


const iconTypes = {
    "check": <BsClipboardCheck />,
    "delete": <DeleteSVG />,
};

function TodoIcon({ type , onClick , completed}) {
    return (
        <span
            className={`Icon Icon-${type} ${completed ? `Icon-${type}--active` : ''}`}
            onClick = {onClick}
        >
            {iconTypes[type]}
        </span>
    )
}

export { TodoIcon };

import React from 'react';
import { TodoIcon } from './TodoIcon'

function CheckIcon({ completed, onClick}) {
    return (
        <TodoIcon 
            type="check"
            color="gray"
            completed = {completed}
            onClick={onClick}
        />
    );
}

export { CheckIcon };

import React from 'react';
import { TodoIcon } from './TodoIcon'

function DeleteIcon({onClick}) {
    return (
        <TodoIcon 
            type="delete"
            color="gray"
            onClick={onClick}
        />
    );
}

export { DeleteIcon };

Iconos en React: librerías y SVG

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