Contenido del curso

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

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

Resumen

¿Cuál es el reto al trabajar con paquetes desactualizados en empresas?

Cuando nos enfrentamos al mundo real de una empresa, no siempre trabajamos con las tecnologías más recientes. Así que, ¿qué ocurre cuando te encuentras con versiones antiguas de ciertas herramientas, como React Router DOM 5, en lugar de las actuales que usaste para tus proyectos personales? La respuesta, según la experiencia compartida, es que debes adaptarte al entorno laboral que encuentres. Es crucial entender que, aunque el aprendizaje y el impulso por estar al día son importantes, muchas empresas aún operan con configuraciones que garantizan estabilidad y continuidad en sus aplicaciones.

¿Qué implica regresar a versiones anteriores de paquetes?

Challenge personal y profesional: Volver a usar versiones anteriores nos desafía a encontrar soluciones con herramientas que quizás no sean tan avanzadas como las actuales.
Contexto empresarial: Las empresas priorizan la estabilidad y eficiencia de sus operaciones diarias sobre estar a la vanguardia tecnológica.
Rendimiento y compatibilidad: Algunas veces, la migración hacia versiones más nuevas no proporciona un beneficio directo en el rendimiento ni mejora la compatibilidad de la API que justifique el cambio.

¿Cómo abordar el trabajo en entornos tecnológicos anteriores?

Trabajar en un entorno que no siempre está a la vanguardia puede parecer un retroceso, pero tiene su propio valor y lecciones:

Flexibilidad y adaptabilidad: Ser capaz de adaptarse a diferentes versiones y tecnologías es una habilidad valiosa.
Concentrarse en la funcionalidad: Es esencial mantener el enfoque en resolver problemas reales y proporcionar valor inmediato, más que obsesionarse con actualizar herramientas.
Justificación de cambios tecnológicos: Ante propuestas de actualización, siempre tendrás que justificar cómo el cambio aporta valor, como mejor rendimiento o funcionalidad crucial para el usuario.

¿Por qué podría no ser prioritario actualizar las dependencias?

En un caso hipotético donde se plantee la migración de React Router DOM de la versión 5 a la 6, la discusión puede centrarse en aspectos prácticos:

Costo-beneficio: ¿Realmente el beneficio justifica el esfuerzo y tiempo de hacer la actualización?
Impacto en el usuario: Mejorar las características que impactan directamente al usuario puede ser más prioritario que internalizar novedades de nuevas versiones.
Esfuerzo en el cambio: La migración implica no solo cambiar el package.json, sino adaptar todo el código preocupado por las dependencias usadas.

Este es un escenario muy común en empresas consolidadas y describe la necesidad de balancear entre innovar y preservar la estabilidad de los productos ya funcionando. Y aunque pueda parecer restrictivo, este tipo de retos nos preparan para enfrentar situaciones similares en entornos laborales reales, donde la adaptabilidad y la habilidad para trabajar con diversas versiones se vuelven cruciales. Por lo tanto, nunca subestimes el valor de dominar versiones anteriores, porque te dota de una perspectiva más amplia y flexible.

Harold Zurita Simon

student•

Reto: TODO Machine con React Router DOM 5

. El reto es replicar el mismo comportamiento de la aplicación con React Router DOM 5. . Para ello vamos a mantener la misma estructura de carpetas que utilizamos para la aplicación con React Router DOM 6 pero modificando algunos archivos donde algunos hooks o componentes proporcionados por este no existan o funcionen distintamente en la versión 5. . Para este reto hemos utilizado la versión 5.3.4 de React Router DOM. .

"react-router-dom": "^5.3.4"

. En src/routes/App.js ya no se usa el componente Routes de la versión 6, sino que se usa Switch. En lugar de element para definir el componente que se debe renderizar ahora utilizamos component. . Otra diferencia es que en la versión 6 element acepta un elemento de React directamente como <HomePage />, mientras que en la versión 5 component solo acepta una referencia a un componente como HomePage. . En la versión 6, es más directo usar el prop element={<p>Not Found</p>} con JSX, mientras que en la versión 5, se utiliza una función que retorna JSX component={() => <p>Not Found</p>}. . en la versión 6 Routes entiende de forma implícita cuándo una ruta es exacta, no se usa exact porque el enrutador lo maneja automáticamente, mientras que en la versión 5 usa exact para asegurar que la ruta exacta se corresponda. .

import React from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import { EditTodoPage } from "./edit/EditTodoPage";
import { HomePage } from "./home/HomePage";
import { NewTodoPage } from "./new/NewTodoPage";

function App() {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/new" component={NewTodoPage} />
        <Route path="/edit/:id" component={EditTodoPage} />
        <Route path="*" component={() => <p>Not Found</p>} />
      </Switch>
    </HashRouter>
  );
}

export { App };

. En el componente HomePage, vamos a remplazar useNavigate por useHistory para la navegación con React Router DOM 5. El hook useHistory utiliza un método push para navegar a una ruta. . Ambas versiones permiten pasar un estado a través de la navegación, en la versión 6 con navigate('/edit/' + todo.id, { state: { todo } }) y en la versión 5 con history.push('/edit/' + todo.id, { todo }). .

import React from "react";
import { useHistory } from "react-router-dom";
import { useTodos } from "../useTodos";
import { TodoHeader } from "../../ui/TodoHeader";
import { TodoCounter } from "../../ui/TodoCounter";
import { TodoSearch } from "../../ui/TodoSearch";
import { TodoList } from "../../ui/TodoList";
import { TodoItem } from "../../ui/TodoItem";
import { TodosError } from "../../ui/TodosError";
import { TodosLoading } from "../../ui/TodosLoading";
import { EmptyTodos } from "../../ui/EmptyTodos";
import { CreateTodoButton } from "../../ui/CreateTodoButton";
import { ChangeAlert } from "../../ui/ChangeAlert";

function HomePage() {
  const history = useHistory();
  const { state, stateUpdaters } = useTodos();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    searchValue,
  } = state;

  const {
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;

  return (
    <React.Fragment>
      <TodoHeader loading={loading}>
        <TodoCounter totalTodos={totalTodos} completedTodos={completedTodos} />
        <TodoSearch searchValue={searchValue} setSearchValue={setSearchValue} />
      </TodoHeader>

      <TodoList
        error={error}
        loading={loading}
        totalTodos={totalTodos}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        onError={() => <TodosError />}
        onLoading={() => <TodosLoading />}
        onEmptyTodos={() => <EmptyTodos />}
        onEmptySearchResults={(searchText) => (
          <p>No hay resultados para {searchText}</p>
        )}
      >
        {(todo) => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => {
              history.push("/edit/" + todo.id, { todo });
            }}
            onComplete={() => completeTodo(todo.id)}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
      </TodoList>

      <CreateTodoButton
        onClick={() => history.push("/new")}
        // setOpenModal={setOpenModal}
      />

      <ChangeAlert sincronize={sincronizeTodos} />
    </React.Fragment>
  );
}

export { HomePage };

. En TodoForm es hacer lo mismo, remplazar useNavigate por useHistory. .

import React from 'react';
import { useHistory } from 'react-router-dom';
import './TodoForm.css';

function TodoForm(props) {
  const history = useHistory();
  const [newTodoValue, setNewTodoValue] = React.useState(props.defaultTodoText || '');

  const onChange = (event) => {
    setNewTodoValue(event.target.value);
  };
  const onCancel = () => {
    history.push('/');
  };
  const onSubmit = (event) => {
    event.preventDefault();
    props.submitEvent(newTodoValue);
    history.push('/');
  };

  return (
    <form onSubmit={onSubmit}>
      <label>{props.label}</label>
      <textarea
        value={newTodoValue}
        onChange={onChange}
        placeholder="Cortar la cebolla oara el almuerzo"
      />
      <div className="TodoForm-buttonContainer">
        <button
          type="button"
          className="TodoForm-button TodoForm-button--cancel"
          onClick={onCancel}
          >
          Cancelar
        </button>
        <button
          type="submit"
          className="TodoForm-button TodoForm-button--add"
        >
          {props.submitText}
        </button>
      </div>
    </form>
  );
}

export { TodoForm };

. Finalmente, en TodoSearch es donde se dio el mayor cambio, puesto que habíamos implementado búsqueda por navegación con useSearchParams. Sin embargo, este hook no existe en la versión 5 de React Router DOM. . Lo que se hizo fue utilizar useHistory y useLocation para obtener la propiedad search de useLocation, luego cada que escribamos algo en el input de búsqueda vamos a navegar con useHistory hacia el pathname / con ?search=${event.target.value} concatenado con lo que escribamos en dicho input. . Finalmente, en un useEffect revisamos que si el search empieza con ?search= significa que hemos accedido directamente a la búsqueda por la url, así que recuperamos el valor de la búsqueda, lo decodificamos en caso de que la búsqueda contuviera espacios representados como %20 y cambiamos el estado de searchValue mediante setSearchValue. . De esta manera obtendremos la búsqueda por navegación tanto por el input de búsqueda, como desde la url. .

import React, { useEffect } from "react";
import "./TodoSearch.css";
import { useHistory, useLocation } from "react-router-dom";

function TodoSearch({ searchValue, setSearchValue, loading }) {
  const { search } = useLocation();
  const history = useHistory();

  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);
    history.push({
      pathname: "/",
      search: `?search=${event.target.value}`,
    });
  };

  useEffect(() => {
    if (search.startsWith("?search=")) {
      setSearchValue(decodeURIComponent(search.substring(8)));
    }
  }, [searchValue]);

  return (
    <input
      className="TodoSearch"
      placeholder="Cebolla"
      value={searchValue}
      onChange={onSearchValueChange}
      disabled={loading}
    />
  );
}

export { TodoSearch };

Jose Ever Muñoz Muñoz

student•

es la mejor explicacion que he leido :)

Axlin Miranda

Seba Cardoso

Juan Castro

teacher•

Orlando Manuel Mendoza Vargas

Gilbert Ardila

Bramucci Candela

Raycris Maldonado

Diego Reyes Cabrera

Josue Tapia Linarez

Juan Pablo Cortés

Lenin Garizabalo

Neil Ruiz

Sebastian Carballo

Invitado Certificado

Adrian Villamil

Ricardo Daniel Quiroga

gemma clavero del moral

Andres Prieto

Fundamentos de navegación en la web

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

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

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

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

Uso de Hash Router en Aplicaciones Web con React Router DOM

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

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

Rutas dinámicas con React Router DOM y useParams

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

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

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

Control de Acceso en Menú con Autenticación React

Protección de Rutas con React Router y Hooks

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

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

Mejorando la Redirección Post-Login en Aplicaciones Web

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

Migración de Todo Machine a React Router 6

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

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

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

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

Editar ToDos en React con Custom Hook y URL Parameters

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

Implementación de React Router en Proyectos Legacy

Próximos pasos

Filtrado de Búsquedas en URL con React Router

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

Clonación de Platzi Movies usando React y React Router

Clonación de React Router en Componentes React

Navegación Avanzada con React Router DOM 6

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