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

Clase 19 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Cómo organizar un proyecto React con rutas?

Bienvenido al mundo de React Routing. Un componente clave en la construcción de aplicaciones modernas con React es cómo organizar nuestros archivos y estructurar nuestras carpetas para manejar eficazmente múltiples vistas o rutas. En este análisis, desglosaremos cómo estructurar un proyecto con React Router DOM y compartirás consejos útiles para que apliques esta metodología en tu propio trabajo.

¿Qué es React Router DOM y por qué es relevante?

React Router DOM es una biblioteca esencial para manejar la navegación en aplicaciones React. Te permite definir múltiples rutas en una sola aplicación, mejorando su fluidez y modularidad.

Modularidad: Ayuda a dividir el código, asignando componentes específicos a distintas vistas.
Mantenibilidad: Facilita actualizar o cambiar configuraciones de rutas sin afectar completamente la lógica de la aplicación.
Conveniente: Optimiza la experiencia del desarrollador al manejar estados de URL, lo cual es crucial para aplicaciones web más complejas.

¿Cómo organizar la estructura de carpetas y archivos?

Una buena estrategia comienza organizando y dividiendo tu proyecto en carpetas clave. Vamos a desglosar un ejemplo de cómo podrías organizar tu proyecto React:

Creando carpetas específicas: UI y Routes

Carpeta UI:
- Almacena componentes que se reutilizan en varias vistas.
- Proporciona un lugar central para componentes de interfaz de usuario genéricos.
Carpeta Routes:
- Almacena componentes específicos para cada vista.
- Permite la coexistencia de componentes específicos de cada ruta junto con componentes compartidos.

Estructura ideal

src
- UI
  - ComponentA.jsx
  - ComponentB.jsx
  - [...]
- Routes
  - Home
    - HomePage.jsx
  - NewTodo
    - NewTodoPage.jsx
  - EditTodo
    - EditTodoPage.jsx

¿Cómo implementar y configurar React Router en el proyecto?

Implementar React Router requiere configurar una serie de rutas en tu componente App. Utilizaremos HashRouter para manejar las rutas en nuestro proyecto.

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './Routes/Home/HomePage';
import EditTodoPage from './Routes/Edit/EditTodoPage';
import NewTodoPage from './Routes/New/NewTodoPage';

function App() {
  return (
    <Router>
      <Switch>
        {/* Ruta Home */}
        <Route exact path="/" component={HomePage} />
        {/* Ruta Nueva Tarea */}
        <Route path="/new" component={NewTodoPage} />
        {/* Ruta Editar Tarea con Parámetro Dinámico */}
        <Route path="/edit/:id" component={EditTodoPage} />
        {/* Manejo de rutas no encontradas */}
        <Route path="*" render={() => <p>No encontrado</p>} />
      </Switch>
    </Router>
  );
}

export default App;

¿Cómo gestionar componentes al modificar estructuras?

Imports automáticos: Al mover archivos, algunos entornos de desarrollo como Visual Studio Code pueden ajustar automáticamente las rutas de importación.
Uso de alias: Considera el uso de alias para las importaciones, lo que facilitará la gestión de referencias complejas y repetitivas en tus archivos.
Manejo de rutas dinámicas: Utiliza patrones en los paths para admitir rutas que requieren parámetros, como IDs, permitiendo componentes específicos para acciones como editar un To Do.

¿Qué sigue después de configurar las rutas?

Con esta estructura y configuración base, es crucial mantener un enfoque iterativo. A medida que tu aplicación crece, aprovecha las posibilidades de React Router DOM para:

Introducir características de autenticación, protegiendo ciertas rutas.
Manejar estados y hooks específicos para la gestión del historial y la navegación.
Optimizar la carga a través de carga diferida (lazy loading), para mejorar el rendimiento de la página.

Mantente motivado y sigue innovando en la organización de tus aplicaciones, esto no solo mejora la experiencia de los usuarios, sino también la tuya como desarrollador. ¿Cuál es la estructura que más te ha funcionado? ¡Comparte tus experiencias en los comentarios!

Maury Sugheiry Alcalá Romero

student•

Sienndo creativos, asi quedo mi notFound

Leandro Martin Villafuerte

student•

Está muy bueno! le agregaría también un texto que diga page not found para los usuarios que no sepan qué significa 404 jeje

Raycris Maldonado

student•

Como mi TODOs machine lo hice con la temática de Naruto, hice un simple not found component, solamente con una imagen y un título. así quedó.

Jose Ever Muñoz Muñoz

student•

jaja buenisimo

Sebastian Carballo

student•

Genial.

Lo que sí, "found" es en pasado simple.

Si lo que quieres decir es "no puedo encontrar esta ruta", la palabra es "find".

Pero en pasado se conjuga irregular, con lo que también se ecribe: "I couldn't find this route"

Éxitos!

Maury Sugheiry Alcalá Romero

student•

Yo soy revelde y no le hice caso a la junta Directiva y estoy trabajando en react 18 jejejejje muy bueno el reto

Juan Castro

teacher•

:joy:

Bramucci Candela

student•

Esta es la estructura que yo uso. Me parece bastante cómoda.

Javier Fernando Chi Ortiz

student•

Me gusto, justo queria una forma que me sienta mas comodo

Geovanni Labastida Vázquez

student•

Para los que quieran usar Alias para hacer imports más limpios y evitar usar Paths extensos y relativos . Tienen que configurar su herramienta build tool. . En mi caso uso Vite.js entonces lo modifique de la siguiente manera

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@App': '/src/App',
      '@components': '/src/components',
      '@hooks': '/src/hooks',
      '@pages': '/src/pages',
      // Add more aliases as needed
    }
  }
})

Tambien hice un archivo en el Root del projecto llamado jsconfig.json para ayudarle a VSCode a reconocer estos aliases y poder seguir usando auto-imports e IntelliSense.

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@App/*": ["src/App/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      // Add more aliases as needed
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

. Una vez hecho esto ya podemos actualizar nuestros imports.

//import sin path Aliases
import SomeComponent from '../../components/SomeComponent';

//import con path aliases
import SomeComponent from '@components/SomeComponent';

Jose Miguel Valero Reyes

student•

Diego Reyes Cabrera

student•

En qué se diferencian la carpeta common y ui?

Max Andy Diaz Neyra

student•

la carpeta common serian componentes comunes, de uso general.

Seba Cardoso

student•

Yo siempre uso alias. Me facilita mucho el trabajo.

Samuel Miranda Martínez

student•

Hablando de alias, sabes como se configuran para que se puedan navegar con ctrl+click?

Seba Cardoso

student•

Buena pregunta! No lo se, pero me gustaria saberlo tambien.

Santiago Lopera Naranjo

student•

Siempre me a gustado mucho esta estructura, carpetas para hooks, componentes y paginas.

Josue Tapia Linarez

student•

mi organización:

Diego Toledo

student•

Hola Profe tengo un problema, me salta este error en VisualCode:

Compiled with warnings.

[eslint] src\router\useLocalStorage.js Line 50:6: React Hook React.useEffect has missing dependencies: 'initialValue' and 'itemName'. Either include them or remove the dependency array react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint] src\router\useLocalStorage.js Line 50:6: React Hook React.useEffect has missing dependencies: 'initialValue' and 'itemName'. Either include them or remove the dependency array react-hooks/exhaustive-deps

webpack compiled with 1 warning

creo que tiene algo que ver con el useEffect saludos :D

Juan Castro

teacher•

useEffect es algo más complejo de lo que hemos visto en los cursos hasta ahora, definitivamente hace falta un curso de debugging y optimización de render para entrar a mucha más profundidad. Por ahora te puedo decir que con ignorar el warning o agregar [itemName] como segundo argumento del efecto es suficiente por ahora. :D

Diego Toledo

student•

Gracias genio! :D

Alexis Castro Arias

student•

¿Es realmente necesario re-organizar y re-nombrar archivos, si lo que necesitamos es aprender Router? Se podría dejar para el final.

Juan Castro

teacher•

En en el curso de intro me super machacaron por hacerlo al final en vez de al principio :facepalm:

Pero pos tú puedes hacerlo al final, vamos a tener el mismo resultado 🤷

Sebastián Andrés Sanhueza Tapia

student•

Se me habia roto todo, puesto que lo hice levemente diferente al profe y fue un cacho, pero lo logré

😁🎉🎉🎉

Harold Zurita Simon

student•

Creando las rutas de TODO Machine

. Vamos a reestructurar el proyecto de TodoMachine para remplazar portales y modales, por rutas utilizando React Router DOM. . La estructura de carpetas será la siguiente. .

public
src
- routes
- ui
- index.css
- index.js
.gitignore
README.md
package-lock.json
package.json
yarn.lock

. Dentro de src se va a dar el mayor cambio, puesto que ahora manejamos un archivo de routes que contiene nuestras rutas, nuestros custom hooks y la aplicación principal en App.js. .

routes
- edit
-- EditTodoPage.js
- home
-- HomePage.js
- new
-- NewTodoPage.js
- App.css
- App.js
- useLocalStorage.js
- useTodos.js

. Cada ruta tiene su propia página o componente que se va a renderizar para esa ruta. .

import React from 'react';

function EditTodoPage() {
  return (
    <p>Editar TODO</p>
  );
}

export { EditTodoPage };

import React from 'react';
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 { TodoForm } from '../../ui/TodoForm';
import { CreateTodoButton } from '../../ui/CreateTodoButton';
import { Modal } from '../../ui/Modal';
import { ChangeAlert } from '../../ui/ChangeAlert';

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

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

  const {
    setOpenModal,
    addTodo,
    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.text}
            text={todo.text}
            completed={todo.completed}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
      </TodoList>

      {!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )}

      <CreateTodoButton
        setOpenModal={setOpenModal}
      />

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

export { HomePage };

import React from 'react';

function NewTodoPage() {
  return (
    <p>New Todo</p>
  );
}

export { NewTodoPage };

. Es evidente que las importaciones van a cambiar, debido a que todos nuestros componentes de interfaz se movieron a una carpeta llamada ui, entre otros cambios. . La estructura de la carpeta ui contempla lo siguiente. .

ui
- ChangeAlert
- CreateTodoButton
- EmptyTodos
- Modal
- TodoCounter
- TodoForm
- TodoHeader
- TodoIcon
- TodoItem
- TodoList
- TodoSearch
- TodosError
- TodosLoading

. A todo esto, los 2 archivos más importantes para poder migrar la aplicación a rutas serán index.js dentro de src, y App.js que se encuentra dentro de routes. .

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './routes/App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

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

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

export { App };

. En App.js creamos la estructura principal de rutas utilizando a HashRouter como provider con 4 rutas principales que ya hemos mencionado previamente, añadiendo una ruta adicional para rutas que sean Not Found. . Finalmente lo exportamos como un export nombrado, por lo que lo importamos de la manera correspondiente desde el index.js que se encuentra en src.

Lucas Mateo Pintos Fitipaldi

student•

Te dan puntos por esto, verdad?

Ivan Sosa Tovar

student•

bueno algo sencillo decidi crear un componente y su respectivo css

import React from "react";
import "./notfound.css"; // Importa los estilos CSS

const NotFound = () => {
    return (
        <div className="container">
            <h1 className="heading">¡Oops, Te Perdiste!</h2> 
            <p>Esta página es tan escurridiza como un unicornio en patines.</p>
            <img
                className="image" 
                src="https://img.freepik.com/vector-gratis/lindo-unicornio-jugando-patinaje-sobre-ruedas-ilustracion_138676-3287.jpg?w=740&t=st=1691293684~exp=1691294284~hmac=b7bffe0c0e9c8be85358879314e1199cbaebdc0378cbaff6d8460804b88d8163"
                alt="Lost Unicorn"
            />
        </div>
    );
};

export {NotFound} ;

css

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: sans-serif;
}

.heading {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.image {
    max-width: 50%; 
    height: auto;
}

Jose Tellez

student•

En mi estructura tengo una carpeta llamada "Pages" y una llamada "Components". Creo que tienen nombres bastantes descriptivos jajaja. . En mi caso, el componente App lo he introducido como cualquier otro componente dentro de la carpeta "Components" y tengo una carpeta de "Hooks" donde están los hooks ya creados y si se necesitan nuevos hooks también irán ahí

Omar Díaz Hernández

student•

Como yo uso SASS tengo todos los estilos aparte

Nery Alberto Cano Ortigoza

student•

En mi caso suelo utilizar el NewPage también en el edit, solo que controlo si la ruta tiene algún id con el cual pueda buscar en la base de datos, en el caso de que exista el botón pasa de new a update y se cargan los datos en los campos.

Jhon Jairo Dueñas Vega

student•

Voy con React@18 y Material UI

Henry Alexander Velásquez Rosas

student•

¿La sección de comentarios está fallando?

Juan Castro

teacher•

Por qué lo dices? ves algún error?

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

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