Fundamentos de navegación en la web

1

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

2

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

3

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

4

Instalación de React Router DOM 6 en un proyecto React

5

Uso de Hash Router en Aplicaciones Web con React Router DOM

6

Creación de Rutas Dinámicas con React Router DOM 6

7

Navegación en React Router: Uso de Link y NavLink

8

Rutas dinámicas con React Router DOM y useParams

9

Uso de useNavigate en React Router DOM para navegación dinámica

10

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

11

Autenticación y Autorización en Apps con React Router y Hooks

12

Control de Acceso en Menú con Autenticación React

13

Protección de Rutas con React Router y Hooks

14

Roles y permisos en aplicaciones web: Autenticación y autorización

15

Retos avanzados en React: manejo de estado y composición de componentes

16

Mejorando la Redirección Post-Login en Aplicaciones Web

17

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

18

Migración de Todo Machine a React Router 6

19

Organización de carpetas y rutas en React con React Router DOM 6

20

Maquetación de Botón Editar en Lista de Tareas con React

21

Generación de IDs únicos para gestionar tareas en React

22

Migración de modales a rutas en React: implementación práctica

23

Editar ToDos en React con Custom Hook y URL Parameters

24

Mejora de la Experiencia del Usuario al Editar To Do's en React

25

Implementación de React Router en Proyectos Legacy

Próximos pasos

26

Filtrado de Búsquedas en URL con React Router

27

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

28

Clonación de Platzi Movies usando React y React Router

29

Clonación de React Router en Componentes React

30

Navegación Avanzada con React Router DOM 6

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Maquetación de Botón Editar en Lista de Tareas con React

20/30
Recursos

0 0 24 24"
  fill = "none"
  xmlns = "http://www.w3.org/2000/svg"
>
  18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.
    9993Z"
  />
  23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.
    130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099
    5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
  

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Dejo el codigo del edit icon, en los recursos aparece incompleto.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns="https://www.w3.org/2000/svg"
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

Si tienen problemas con los iconos, les recomiendo usar react icons.
Es muy sencillo y práctico de usar

Para quien tenga errores relacionados al edit.svg: en mi caso, lo solucioné eliminando los saltos de línea de la propiedad “d” de la etiqueta <path/> 😉

El .SVG para editar que use de: heroicons

<svg 

   xmlns='https://www.w3.org/2000/svg'
   fill='none' viewBox='0 0 24 24' 
   strokeWidth={1.7} 
   stroke='currentColor' 
   className='w-6 h-6'>

   <path strokeLinecap='round' strokeLinejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' />

</svg>

Botón de editar TODOs

.
Dentro de la carpeta src/ui/TodoIcon crearemos un archivo edit.svg de la siguiente manera.
.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns=""
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

.
Posteriormente, dentro del archivo index.js en el mismo directorio, vamos a añadir este svg al objeto de iconTypes del componente TodoIcon.
.

import React from 'react';
import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css';

const iconTypes = {
  "check": color => (
    <CheckSVG className="Icon-svg Icon-svg--check" fill={color} />
  ),
  "edit": color => (
    <EditSVG className="Icon-svg Icon-svg--edit" fill={color} />
  ),
  "delete": color => (
    <DeleteSVG className="Icon-svg Icon-svg--delete" fill={color} />
  ),
};

function TodoIcon({ type, color = 'gray', onClick }) {
  return (
    <span
      className={`Icon-container Icon-container--${type}`}
      onClick={onClick}
    >
      {iconTypes[type](color)}
    </span>
  );
}

export { TodoIcon };

.
Creamos un archivo EditIcon.js donde llamamos a TodoIcon pasandole el tipo edit y la función onEdit en onClick como propiedades.
.

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

function EditIcon({ onEdit }) {
  return (
    <TodoIcon
      type="edit"
      onClick={onEdit}
    />
  );
}

export { EditIcon };

.
En el archivo TodoIcon.css agregamos la clase Icon-container--edit y Icon-container:hover .Icon-svg--edit.
.

.Icon-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  /* background-color: #CCC; */
}
.Icon-container--check {
  position: absolute;
  left: 12px;
}
.Icon-container--edit {
  position: absolute;
  top: -24px;
  right: 48px;
}
.Icon-container--delete {
  position: absolute;
  top: -24px;
  right: 0;
}

.Icon-svg {
  width: 24px;
  height: 24px;
  transition: fill .15s;
}
.Icon-container:hover .Icon-svg--check {
  fill: #4caf50;
}
.Icon-container:hover .Icon-svg--edit {
  fill: #61DAFA;
}
.Icon-container:hover .Icon-svg--delete {
  fill: red;
}

.
Finalmente, solo queda renderizar este botón desde el componente TodoItem de la siguiente manera.
.

import React from 'react';
import { CompleteIcon } from '../TodoIcon/CompleteIcon';
import { EditIcon } from '../TodoIcon/EditIcon';
import { DeleteIcon } from '../TodoIcon/DeleteIcon';
import './TodoItem.css';

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

export { TodoItem };

.
Por lo que tendremos que añadir la render prop onEdit desde el llamado a TodoItem en el componente HomePage, donde en este caso solo mostrará un mensaje que indica que se editará un TODO.
.

function HomePage() {
...
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => console.log('Editar todo')}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
...
  );
}

export { HomePage };

parece que falto algo en esta clase, aca les dejo el codigo de mi solucion para la funcionalidad del boton de editar en el componente “TodoIcom”.

import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css'

const iconTypes = {
  'check': color => <CheckSVG className='Icon-svg Icon-svg--check' fill={color} />,
  'delete': color => <DeleteSVG className='Icon-svg Icon-svg--delete' fill={color} />,
  'edit':  (color, onEditTwo) => <EditSVG className='Icon-svg icon-svg--edit' fill={color} onClick={onEditTwo}/>,
};

const TodoIcon = ({ type, color = 'gray', joinCrossOutEliminate, onEditTwo }) => {
  return (
    <span
    className={`Icon-container Icon-container-${type}`}
    onClick={joinCrossOutEliminate}
    > 
    {iconTypes[type](color, onEditTwo)}
    </span>
  )
};


export { TodoIcon };

Código de la clase con typescript y react icons

import { FC } from "react"
import { BiCheckCircle, BiEdit } from 'react-icons/bi'
import { TiDelete } from 'react-icons/ti'

import './TodoItem.css'

interface Props {
  text:string,
  completed: boolean,
  onComplete: ()=>void,
  onEdit: ()=>void,
  onDelete: ()=>void
}

const TodoItem:FC<Props> = ({
  text,
  completed,
  onComplete,
  onEdit,
  onDelete
}) => {
  return (
    <li className="TodoItem">
      <BiCheckCircle
        className={`Icon Icon-check ${completed && "Icon-check--active"}`}
        onClick={onComplete}
      />
      <p className={`TodoItem-p ${completed && "TodoItem-p--complete"}`}>{text}</p>
      <BiEdit
        className={`Icon Icon-edit`}
        onClick={onEdit}
      />
      <TiDelete 
        className="Icon Icon-delete"
        onClick={onDelete}
      />
    </li>
  )
}

export { TodoItem }

A mi me pasó que cuando quería cambiarle el color al seg que exporté de Figma no me dejaba.
Al editar el icono svg en VS me di cuenta que tenía una propiedad fill, por lo que se la quité y con eso ya funcionó 😃

My dear colleagues, here I leave you my english version commit and branch for the class. Keep rocking it 🚀 **- My english ver. branch:** <https://github.com/SebaMat3/react-todo/tree/feat/add-edit-todo-icon> **Branch name:** feat/add-edit-todo-icon **Commit message:** git commit -m "feat: add edit icon functionality to todo items \- Add EditIcon component for todo items \- Implement edit icon styling in TodoIcon.css \- Add edit SVG icon from react-icons \- Update TodoItem to include edit functionality"
@Profeee porfaaa el **Curso de optimización y debugging del render de componentes en React.js,** creo que seria muy interesante poder entender como funciona React por debajo, entender cuando una data presiste entre render, cuando algo va a provocar uno o mas rerenders, comprender porque es necesario usar useRef para poder implementar lazy loading con observers de javascript. Realmente me atrae muchisimo la idea de poder comprender todo esto. No se diganme ustedes chicos.