{"componentChunkName":"component---src-templates-content-template-js","path":"/es/part5/react_router_librerias_de_ui","result":{"data":{"markdownRemark":{"html":"
\n

La interfaz de usuario de nuestra aplicación es actualmente bastante básica:

\n\n

Queremos cambiar eso. Comencemos con la estructura de navegación de la aplicación.

\n

Es muy común que las aplicaciones web tengan una barra de navegación que permite a los usuarios cambiar entre diferentes vistas dentro de la aplicación. Nuestra aplicación para tomar notas podría incluir una página de inicio:

\n\n

y una página separada para ver notas:

\n\n

así como una página para crear notas:

\n\n

En una aplicación web tradicional, cambiar entre las páginas mostradas por la aplicación implicaba que el navegador enviara una nueva solicitud HTTP GET al servidor y luego renderizara el código HTML devuelto por el servidor, que correspondía a la nueva vista.

\n

Sin embargo, en las aplicaciones de una sola página, en realidad estás en la misma página todo el tiempo y el código JavaScript ejecutado en el navegador crea la ilusión de diferentes \"páginas\". Si se realizan solicitudes HTTP al cambiar de vista, se utilizan únicamente para recuperar datos con formato JSON que pueden ser necesarios para mostrar la nueva vista.

\n

Una aplicación con una barra de navegación y múltiples vistas sería fácil de implementar con React, por ejemplo, haciendo que el estado de la aplicación page recuerde en qué página se encuentra el usuario y muestre la vista correcta en función de esto:

\n
const App = () => {\n  const [page, setPage] = useState('home')\n\n const  toPage = (page) => (event) => {\n    event.preventDefault()\n    setPage(page)\n  }\n\n  const content = () => {\n    if (page === 'home') {\n      return <Home />\n    } else if (page === 'notes') {\n      return <Notes />\n    } else if (page === 'users') {\n      return <Users />\n    }\n  }\n\n  return (\n    <div>\n      <div>\n        <a href=\"\" onClick={toPage('home')} >\n          home\n        </a>\n        <a href=\"\" onClick={toPage('notes')}>\n          notes\n        </a>\n        <a href=\"\" onClick={toPage('users')} >\n          users\n        </a>\n      </div>\n\n      {content()}\n    </div>\n  )\n}
\n

Sin embargo, este método no es óptimo: la URL del sitio web sigue siendo la misma incluso cuando estás en una vista diferente. Sin embargo, cada vista debe tener su propia URL para que los usuarios puedan, por ejemplo, marcar páginas como favoritas. Además, el botón Atrás del navegador no funciona lógicamente si las páginas no tienen direcciones propias; es decir, hacer clic en el botón Atrás no lo llevará a la vista de la aplicación vista anteriormente, sino a otro lugar completamente diferente.

\n

React Router

\n

Afortunadamente, la librería React Router ofrece una excelente solución para gestionar la navegación en una aplicación React.

\n

Instalemos React Router:

\n
npm install react-router-dom
\n

Creemos un nuevo componente que sirva como página principal de la aplicación.

\n
const Home = () => {\n  return (\n    <div>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n    </div>\n  )\n}\n\nexport default Home
\n

Extraeremos la vista principal anterior de la aplicación (que estaba en el componente App) a su propio componente, pero moveremos el manejo del estado de las notas fuera del componente:

\n
// list of notes passed as a parameter\nconst NoteList = ({ notes }) => {  // content mostly the same as in the App component\n  // reference to NoteForm is removed\n}
\n

El componente App ahora cambia de la siguiente manera

\n
import { useState, useEffect } from 'react'\nimport noteService from './services/notes'\n\nimport {\n  BrowserRouter as Router,\n  Routes, Route, Link\n} from 'react-router-dom'\nimport NoteList from './components/NoteList'\nimport Home from './components/Home'\nimport Footer from './components/Footer'\nimport NoteForm from './components/NoteForm'\n\nconst App = () => {\n  const [notes, setNotes] = useState([])\n\n  useEffect(() => {\n    noteService.getAll().then(initialNotes => {\n      setNotes(initialNotes)\n    })\n  }, [])\n\n  const addNote = noteObject => {\n    noteService.create(noteObject).then(returnedNote => {\n      setNotes(notes.concat(returnedNote))\n    })\n  }\n\n  const padding = {\n    padding: 5\n  }\n\n  return (\n    <Router>      <div>        <Link style={padding} to=\"/\">home</Link>        <Link style={padding} to=\"/notes\">notes</Link>        <Link style={padding} to=\"/create\">new note</Link>      </div>\n      <Routes>        <Route path=\"/notes\" element={          <NoteList notes={notes} />        } />        <Route path=\"/create\" element={          <NoteForm createNote={addNote}/>        } />        <Route path=\"/\" element={<Home />} />      </Routes>      <Footer />    </Router>  )\n}\n\nexport default App
\n

El enrutamiento —es decir, el renderizado condicional de componentes según la URL del navegador— se habilita colocando los componentes como hijos de Router, dentro de sus etiquetas.

\n

Primero, la barra de navegación de la aplicación se define utilizando el componente Link. El atributo to especifica cómo se cambia la URL del navegador cuando se hace clic en el enlace:

\n
<div>\n  <Link style={padding} to=\"/\">home</Link>\n  <Link style={padding} to=\"/notes\">notes</Link>\n  <Link style={padding} to=\"/create\">new note</Link>\n</div>
\n

A continuación, el enrutamiento de la aplicación se define utilizando el componente Routes. Dentro del componente usamos Route para definir un conjunto de reglas y los componentes que se renderizarán para cada una:

\n
<Routes>\n  <Route path=\"/notes\" element={\n    <NoteList notes={notes} />\n  } />\n  <Route path=\"/create\" element={\n    <NoteForm createNote={addNote}/>\n  } />\n  <Route path=\"/\" element={<Home />} />\n</Routes>
\n

En la URL raíz de la aplicación se renderiza el componente Home:

\n\n

Al hacer clic en \"notas\" en la barra de navegación, la dirección del navegador cambia a notes y se renderiza el componente NoteList:

\n\n

De manera similar, al hacer clic en \"nueva nota\", la URL pasa a ser create y se renderiza el componente NoteForm.

\n

En una página web normal, cambiar la dirección en la barra de direcciones del navegador hace que la página se vuelva a cargar. Sin embargo, cuando se usa React Router, esto no sucede; en cambio, el enrutamiento se maneja completamente a través de JavaScript en la interfaz.

\n

El componente del enrutador que utilizamos es BrowserRouter:

\n
import {\n  BrowserRouter as Router,  Routes, Route, Link\n} from 'react-router-dom'
\n

Según la documentación

\n
\n

BrowserRouter es un Router que utiliza la API de historial HTML5 (pushState, replaceState y el evento popstate) para mantener su interfaz de usuario sincronizada con la URL.

\n
\n

BrowserRouter utiliza la API de historial HTML5 para permitir que la URL en la barra de direcciones del navegador se use para el \"enrutamiento\" interno dentro de una aplicación React, lo que significa que incluso si la URL en la barra de direcciones cambia, el contenido de la página se manipula únicamente a través de JavaScript y el navegador no carga contenido nuevo desde el servidor. Sin embargo, el comportamiento del navegador con respecto a las funciones de avance y retroceso y los marcadores es intuitivo: funciona igual que en los sitios web tradicionales.

\n

El código actual de la aplicación está disponible en su totalidad en GitHub, en la rama part5-10.

\n

Ruta parametrizada

\n

Movamos los detalles de una sola nota a su propia vista, a la que se puede acceder haciendo clic en el nombre de la nota:

\n\n

La capacidad de hacer clic en el nombre se ha implementado en el componente NoteList de la siguiente manera:

\n
import { Link } from 'react-router-dom'\nconst NoteList = ({ notes }) => {\n  // ...\n\n  return (\n    <div>\n      <h1>Notes</h1>\n      <Notification message={errorMessage} />\n\n      {!user && loginForm()}\n\n      <div>\n        <button onClick={() => setShowAll(!showAll)}>\n          show {showAll ? 'important' : 'all'}\n        </button>\n      </div>\n      <ul>\n        {notesToShow.map(note => (\n          <li key={note.id}>\n            <Link to={`/notes/${note.id}`}>{note.content}</Link>          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nexport default NoteList
\n

Así volvemos a utilizar Link. Por ejemplo, al hacer clic en el nombre de una nota cuyo id es 12345, la URL del navegador se actualiza a notes/12345.

\n

La URL parametrizada se define en el enrutamiento dentro del componente App de la siguiente manera:

\n
<Router>\n  // ...\n\n  <Routes>\n    <Route path=\"/notes/:id\" element={      <Note notes={notes} toggleImportanceOf={toggleImportanceOf} />     } />    <Route path=\"/notes\" element={<Notes notes={notes} />} />   \n    <Route path=\"/users\" element={user ? <Users /> : <Navigate replace to=\"/login\" />} />\n    <Route path=\"/login\" element={<Login onLogin={login} />} />\n    <Route path=\"/\" element={<Home />} />      \n  </Routes>\n</Router>
\n

La ruta que representa la vista para una sola nota se define en el \"estilo Express\" marcando el parámetro de ruta con la notación :id de la siguiente manera:

\n
<Route path=\"/notes/:id\" element={<Note notes={notes} ... />} />
\n

Cuando el navegador navega a la URL única de una nota, por ejemplo, /notes/12345, se representa el componente Note, que ahora hemos tenido que modificar ligeramente:

\n
import { useParams } from 'react-router-dom'\nconst Note = ({ notes, toggleImportance }) => {\n  const id = useParams().id  const note = notes.find(n => n.id === id)\n  const label = note.important ? 'make not important' : 'make important'\n\n  return (\n    <li className=\"note\">\n      <span>{note.content}</span>\n      <button onClick={() => toggleImportance(id)}>{label}</button>\n    </li>\n  )\n}\n\nexport default Note
\n

A diferencia de antes, el componente Note ahora recibe todas las notas mediante la prop notes y puede acceder a la parte variable de la URL —en concreto, el id de la nota que se mostrará— mediante el hook useParams de React Router.

\n

useNavigate

\n

El backend ya admite la eliminación de notas. Para implementar esto, agreguemos un botón a la página de notas individuales en la aplicación:

\n\n

Agreguemos un controlador al componente App que realiza la eliminación y pasémoslo al componente Note:

\n
const App = () => {\n\n  const deleteNote = (id) => {    noteService.remove(id).then(() => {      setNotes(notes.filter(n => n.id !== id))    })  }\n  return (\n      // ...\n\n      <Routes>\n        <Route path=\"/notes/:id\" element={\n          <Note \n            notes={notes}\n            toggleImportanceOf={toggleImportanceOf}\n            deleteNote={deleteNote}          />\n        } />\n        <Route path=\"/notes\" element={\n          <NoteList notes={notes} />\n        } />\n        <Route path=\"/create\" element={\n          <NoteForm createNote={addNote}/>\n        } />\n        <Route path=\"/\" element={<Home />} />\n      </Routes>\n\n      <Footer />\n    </Router>\n  )\n}
\n

El componente Note cambia de la siguiente manera:

\n
import { useParams, useNavigate } from 'react-router-dom'\n\nconst Note = ({ notes, toggleImportanceOf, deleteNote }) => {  const id = useParams().id\n  const navigate = useNavigate()  const note = notes.find(n => n.id === id)\n\n  const label = note.important ? 'make not important' : 'make important'\n\n  const handleDelete = () => {    if (window.confirm(`Delete note \"${note.content}\"?`)) {      deleteNote(id)      navigate('/notes')    }  }\n  return (\n    <li className=\"note\">\n      <span>{note.content}</span>\n      <button onClick={() => toggleImportanceOf(id)}>{label}</button>\n      <button onClick={handleDelete}>delete</button>    </li>\n  )\n}\n\nexport default Note
\n

Cuando se elimina una nota, el usuario regresa a la página que enumera todas las notas. Esto se hace llamando a la función devuelta por useNavigate de React Router con la URL deseada: navigate('/notes').

\n

Las funciones useParams y useNavigate de React Router son hooks, al igual que useState y useEffect, que ya hemos utilizado muchas veces. Como vimos en la parte 1, existen ciertas reglas asociadas al uso de hooks.

\n

Modifiquemos también el componente NoteForm para que después de agregar una nueva nota, el usuario acceda a la página que contiene todas las notas:

\n
import { useState } from 'react' \nimport { useNavigate } from 'react-router-dom'\nconst NoteForm = ({ createNote }) => {\n  const [newNote, setNewNote] = useState('')\n  const navigate = useNavigate()\n  const addNote = event => {\n    event.preventDefault()\n    createNote({\n      content: newNote,\n      important: true\n    })\n\n    navigate('/notes')    setNewNote('')\n  }\n\n  return (\n    <div>\n      <h2>Create a new note</h2>\n\n      <form onSubmit={addNote}>\n        <input\n          value={newNote}\n          onChange={event => setNewNote(event.target.value)}\n          placeholder=\"write note content here\"\n        />\n        <button type=\"submit\">save</button>\n      </form>\n    </div>\n  )\n}
\n

Ruta parametrizada revisada

\n

Hay un problema ligeramente molesto con la aplicación. El componente Note recibe all notes como props, aunque solo muestra aquella cuyo id coincide con la parte parametrizada de la URL:

\n
const Note = ({ notes, toggleImportance }) => { \n  const id = useParams().id\n  const note = notes.find(n => n.id === Number(id))\n  // ...\n}
\n

¿Sería posible modificar la aplicación para que Note reciba solo la nota que se mostrará como prop?

\n
import { useParams, useNavigate } from 'react-router-dom'\n\nconst Note = ({ note, id, toggleImportanceOf, deleteNote }) => {  const id = useParams().id\n  const navigate = useNavigate()\n\n  // ...\n\n  return (\n    <li className=\"note\">\n      <span>{note.content}</span>\n      <button onClick={() => toggleImportanceOf(id)}>{label}</button>\n      <button onClick={handleDelete}>delete</button>\n    </li>\n  )\n}\n\nexport default Note
\n

Una posibilidad es determinar dentro del componente el id de la nota que se mostrará mediante el hook useMatch de React Router.

\n

No es posible utilizar el hook useMatch en el mismo componente que define la parte enrutable de la aplicación. Movamos el componente Router fuera de App:

\n
ReactDOM.createRoot(document.getElementById('root')).render(\n  <Router>    <App />\n  </Router>)
\n

El componente App se convierte en:

\n
import {\n  // ...\n  useMatch} from 'react-router-dom'\n\nconst App = () => {\n  // ...\n\n  const match = useMatch('/notes/:id')  const note = match    ? notes.find(note => note.id === match.params.id)    : null\n  return (\n    <div>\n      <div>\n        <Link style={padding} to=\"/\">home</Link>\n        // ...\n      </div>\n\n      <Routes>\n        <Route path=\"/notes/:id\" element={\n          <Note\n            note={note}            toggleImportanceOf={toggleImportanceOf}\n            deleteNote={deleteNote}\n          />\n        } />\n        <Route path=\"/notes\" element={\n          <NoteList notes={notes} />\n        } />\n        <Route path=\"/create\" element={\n          <NoteForm createNote={addNote}/>\n        } />\n        <Route path=\"/\" element={<Home />} />\n      </Routes>\n\n      <div>\n        <em>Note app, Department of Computer Science 2026</em>\n      </div>\n    </div>\n  )\n}
\n

Cada vez que se renderiza el componente App (lo que, en la práctica, ocurre cada vez que cambia la URL en la barra de direcciones del navegador) se ejecuta el siguiente comando

\n
const match = useMatch('/notes/:id')
\n

Si la URL tiene el formato /notes/:id, es decir, corresponde a la URL de una sola nota, a la variable match se le asigna un objeto que puede usarse para determinar la parte parametrizada de la ruta, es decir, el id de la nota. Esto nos permite recuperar la nota a renderizar:

\n
const note = match \n  ? notes.find(note => note.id === match.params.id)\n  : null
\n

Todavía hay un pequeño error en nuestra aplicación. Si el navegador se recarga en una sola página de notas, se produce un error:

\n\n

El problema surge porque se intenta representar la página antes de que se hayan obtenido las notas del backend. Podemos resolver este problema con renderizado condicional:

\n
const Note = ({ note, toggleImportanceOf, deleteNote }) => {\n  const id = useParams().id\n  const navigate = useNavigate()\n\n  if(!note) {    return null  }\n  return (\n    //...\n  )\n}
\n

La aplicación tiene una característica más molesta: la lógica de inicio de sesión todavía está en la página que enumera las notas. Sin embargo, dejaremos la funcionalidad en este estado algo incompleto por ahora.

\n

El código actual de la aplicación está disponible en su totalidad en GitHub, en la rama part5-11.

\n
\n
\n

Ejercicios 5.24–5.28.

\n

5.24: blogs enrutados, paso 1

\n

Añade React Router a la aplicación de blogs para que los enlaces de la barra de navegación controlen qué vista se muestra.

\n

En la raíz de la aplicación, es decir, la ruta /, se muestra una lista de todos los blogs:

\n\n

La ruta /login permite a los usuarios iniciar sesión

\n\n

Si el usuario ha iniciado sesión, aparece un botón de cierre de sesión en la barra de navegación:

\n\n

Después de iniciar y cerrar sesión, el usuario debe ser dirigido a la página que enumera todos los blogs.

\n

En esta etapa, todavía no necesita preocuparse por crear blogs.

\n

5.25: blogs enrutados, paso 2

\n

Implementa una vista que muestre la información de una única publicación del blog:

\n\n

Los usuarios navegan a la vista de publicación de blog única desde la lista de blogs:

\n\n

¡Asegúrate de que la función \"Me gusta\" para blogs todavía funcione! También modifique la funcionalidad para que sólo los usuarios que hayan iniciado sesión puedan darle \"Me gusta\" a un blog.

\n

5.26: blogs enrutados, paso 3

\n

Crea una nueva vista para añadir blogs a la que puedan acceder desde la navegación los usuarios que hayan iniciado sesión:

\n\n

Agregar un blog nuevo y eliminar un blog existente debería redirigir al usuario a la vista de todos los blogs.

\n

5.27: blogs enrutados, paso 4

\n

La usabilidad y apariencia de la aplicación ahora son mejores que antes. Desafortunadamente, algunas de las pruebas han fallado.

\n

Ahora modifique las pruebas para la vista de blog única creada en Vitest de la siguiente manera

\n\n

5.28: blogs enrutados, paso 5

\n

El siguiente paso es arreglar las pruebas de un extremo a otro creadas con Playwright. Las pruebas que escribimos anteriormente no funcionan por completo y tendremos que realizarles cambios importantes.

\n

Crea pruebas para los siguientes escenarios:

\n\n

Por lo tanto, la clasificación de blogs por Me gusta no se está probando en este momento.

\n
\n
\n

Librerías de UI

\n

En la parte 2 ya vimos dos formas de añadir estilos: mediante un único archivo CSS tradicional y mediante estilos en línea. En esta sección veremos algunas formas más.

\n

Una forma de definir los estilos de una aplicación es utilizar un framework de UI, es decir, una librería de estilos para interfaces de usuario.

\n

El primer framework de UI que alcanzó una gran popularidad fue Bootstrap, desarrollado por Twitter. Durante los últimos años, los frameworks de UI han proliferado. La selección es tan amplia que ni siquiera merece la pena intentar enumerarlos todos aquí.

\n

Muchos marcos de UI incluyen temas predefinidos para aplicaciones web, así como \"componentes\", como botones, menús y tablas. El término \"componente\" está escrito entre comillas arriba porque no se refiere a lo mismo que un componente de React. La mayoría de las veces, los marcos de UI se utilizan incluyendo las hojas de estilo CSS del marco y el código JavaScript en la aplicación.

\n

Muchos marcos de UI se han adaptado a versiones compatibles con React, donde los \"componentes\" definidos por el marco de UI se han convertido en componentes de React. Por ejemplo, hay un par de versiones React de Bootstrap, la más popular de las cuales es React-Bootstrap.

\n

En lugar de Bootstrap, veamos el que quizá sea actualmente el framework de UI más popular: la librería para React Material UI, que implementa el lenguaje de diseño Material Design de Google.

\n

Instalemos la librería:

\n
npm install @mui/material @emotion/react @emotion/styled
\n

Cuando se utiliza Material UI, todo el contenido de la aplicación suele renderizarse dentro del componente Container:

\n
import { Container } from '@mui/material'\n\nconst App = () => {\n  // ...\n  return (\n    <Container>\n      // ...\n    </Container>\n  )\n}
\n

Tabla

\n

Comencemos con el componente NoteList y rendericemos la lista de notas como una tabla, que también muestra el usuario que creó cada nota:

\n
import { useState, useEffect } from 'react'\n\nimport { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material'\n\n//...\n\nconst NoteList = ({ notes }) => {\n\n  // ...\n\n  return (\n    <div>\n      // ...\n      <h2>Notes</h2>\n\n      <TableContainer component={Paper}>\n        <Table>\n          <TableHead>\n            <TableRow>\n              <TableCell>content</TableCell>\n              <TableCell>user</TableCell>\n              <TableCell>important</TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {notes.map(note => (\n              <TableRow key={note.id}>\n                <TableCell>\n                  <Link to={`/notes/${note.id}`}>\n                    {note.content}\n                  </Link>\n                </TableCell>\n                <TableCell>\n                  {note.user.name}\n                </TableCell>\n                <TableCell>\n                  {note.important ? 'yes': ''}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </TableContainer>\n\n    </div>\n  )\n}\n\nexport default NoteList
\n

La tabla se ve así:

\n\n

Formulario

\n

A continuación, mejoremos la vista para crear una nueva nota NoteForm usando los componentes TextField y Button:

\n
import { TextField, Button } from '@mui/material'\n\n// ...\n\nconst NoteForm = ({ createNote }) => {\n  // ...\n\n  return (\n    <div>\n      <h2>Create a new note</h2>\n\n      <form onSubmit={addNote}>\n        <TextField\n          label=\"note content\"\n          value={newNote}\n          onChange={event => setNewNote(event.target.value)}\n        />\n        <div>\n          <Button type=\"submit\" variant=\"contained\" style={{ marginTop: 10 }}>\n            save\n          </Button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default NoteForm
\n

El resultado es elegante:

\n\n

Notificaciones

\n

Mejoremos el componente de notificación mediante el componente Alert de Material UI:

\n
import { Alert } from '@mui/material'\n\nconst Notification = ({ notification }) => {\n  if (notification === null) {\n    return null\n  }\n\n  return (\n    <Alert style={{ marginTop: 10, marginBottom: 10 }} severity={notification.type}>\n      {notification.text}\n    </Alert>\n  )\n}\n\nexport default Notification
\n

Mueva el componente de notificación y su gestión de estado al componente App:

\n
const App = () => {\n  const [notes, setNotes] = useState([])\n  const [notification, setNotification] = useState(null)\n  // ...\n\n  const addNote = noteObject => {\n    noteService.create(noteObject).then(returnedNote => {\n      setNotes(notes.concat(returnedNote))\n      setNotification({ text: `Note '${returnedNote.content}' added!`, type: 'success' })      setTimeout(() => {\n        setNotification(null)\n      }, 5000)\n    })\n  }\n\n  return (\n    <Container>\n      <div>\n        <Link style={padding} to=\"/\">home</Link>\n        <Link style={padding} to=\"/notes\">notes</Link>\n        <Link style={padding} to=\"/create\">new note</Link>\n      </div>\n\n      <Notification notification={notification} />\n      <Routes>\n        <Route path=\"/notes/:id\" element={\n          <Note\n            note={note}\n            toggleImportanceOf={toggleImportanceOf}\n            deleteNote={deleteNote}\n          />\n        } />\n        <Route path=\"/notes\" element={\n          <NoteList notes={notes} setNotification={setNotification} />\n        } />\n        <Route path=\"/create\" element={\n          <NoteForm createNote={addNote} />\n        } />\n        <Route path=\"/\" element={<Home />} />\n      </Routes>\n\n      <Footer />\n    </Container>\n  )\n}
\n

Alert tiene un diseño elegante:

\n\n

Menú de navegación

\n

El menú de navegación se implementa utilizando el componente AppBar.

\n

Si aplicamos el ejemplo de la documentación directamente

\n
<AppBar position=\"static\">\n  <Toolbar>\n    <Button color=\"inherit\"><Link to=\"/\">home</Link></Button>\n    <Button color=\"inherit\"><Link to=\"/notes\">notes</Link></Button>\n    <Button color=\"inherit\"><Link to=\"/create\">new note</Link></Button>\n  </Toolbar>\n</AppBar>
\n

Esto proporciona una solución funcional, pero su apariencia no es la mejor posible:

\n\n

En la documentación encontramos una alternativa mejor: la prop component, que permite cambiar cómo se renderiza el elemento raíz de un componente de Material UI.

\n

Al definir

\n
<Button color=\"inherit\" component={Link} to=\"/\">\n  home\n</Button>
\n

El componente Button se renderiza usando como raíz el componente Link de react-router-dom, al que se pasa la prop to que especifica la ruta.

\n

El código completo para la barra de navegación es el siguiente

\n
<AppBar position=\"static\">\n  <Toolbar>\n    <Button color=\"inherit\" component={Link} to=\"/\">home</Button>\n    <Button color=\"inherit\" component={Link} to=\"/notes\">notes</Button>\n    <Button color=\"inherit\" component={Link} to=\"/create\">new note</Button>\n  </Toolbar>\n</AppBar>
\n

y el resultado se ve tal como queremos:

\n\n

Sin embargo, notamos que cuando se mueve el mouse sobre la barra de navegación, el indicador de desplazamiento es demasiado sutil. Arreglemos esto definiendo un color de fondo ligeramente mejor para estas situaciones:

\n
const style = { '&:hover': { bgcolor: 'rgba(255,255,255,0.3)' } }\n\nreturn (\n  <Container>\n    <AppBar position=\"static\">\n      <Toolbar>\n        <Button color=\"inherit\" component={Link} to=\"/\" sx={style}>\n          home\n        </Button>\n        <Button color=\"inherit\" component={Link} to=\"/notes\" sx={style}>\n          notes\n        </Button>\n        <Button color=\"inherit\" component={Link} to=\"/create\" sx={style}>\n          new note\n        </Button>\n      </Toolbar>\n    </AppBar>\n\n    // ...\n)
\n

Finalmente estamos satisfechos:

\n\n

El código actual de la aplicación está disponible en su totalidad en GitHub, en la rama part5-12.

\n

Styled Components

\n

Además de lo que ya hemos visto, existen otras formas de aplicar estilos a una aplicación React.

\n

La librería styled-components, que utiliza la sintaxis literal de plantilla etiquetada de ES6, ofrece un enfoque interesante para definir estilos.

\n

Instalemos Styled Components y utilicémoslo para realizar algunos cambios de estilo en la aplicación de notas (la versión anterior a la instalación de Material UI). Primero, creemos dos definiciones de estilo para los componentes que usaremos:

\n
import styled from 'styled-components'\n\nconst Button = styled.button`\n  background: Bisque;\n  font-size: 1em;\n  margin: 1em;\n  padding: 0.25em 1em;\n  border: 2px solid Chocolate;\n  border-radius: 3px;\n`\n\nconst Input = styled.input`\n  margin: 0.25em;\n  width: 300px;  \n`
\n

El código crea versiones de los elementos HTML button y input con estilo y los asigna a las variables Button y Input.

\n

La sintaxis para definir estilos es bastante interesante, ya que las definiciones CSS se colocan entre comillas invertidas. Esta es la sintaxis de los literales de plantilla etiquetados de ES6.

\n

Los componentes definidos funcionan como elementos normales button y input, y se utilizan en la aplicación de la forma habitual:

\n
const NoteForm = ({ createNote }) => {\n  // ...\n\n  return (\n    <div>\n      <h2>Create a new note</h2>\n\n      <form onSubmit={addNote}>\n        <Input>          value={newNote}\n          onChange={event => setNewNote(event.target.value)}\n          placeholder=\"write note content here\"\n        />\n        <Button type=\"submit\">save</Button>      </form>\n    </div>\n  )\n}
\n

El formulario ahora se ve así:

\n\n

Definamos los siguientes componentes para agregar estilos, todos los cuales son versiones mejoradas de los elementos div:

\n
const Page = styled.div`\n  padding: 1em;\n  background: papayawhip;\n`\n\nconst Navigation = styled.div`\n  background: BurlyWood;\n  padding: 1em;\n`\n\nconst Footer = styled.div`\n  background: Chocolate;\n  padding: 1em;\n  margin-top: 1em;\n`
\n

Los nuevos componentes ahora se pueden utilizar en la aplicación:

\n
const App = () => {\n  // ...\n\n  return (\n    <Page>      <Navigation>        <Link style={padding} to=\"/\">home</Link>\n        <Link style={padding} to=\"/notes\">notes</Link>\n        <Link style={padding} to=\"/create\">new note</Link>\n      </Navigation>\n      <Routes>\n        <Route path=\"/notes/:id\" element={\n          <Note\n            note={note}\n            toggleImportanceOf={toggleImportanceOf}\n            deleteNote={deleteNote}\n          />\n        } />\n        <Route path=\"/notes\" element={\n          <NoteList notes={notes} />\n        } />\n        <Route path=\"/create\" element={\n          <NoteForm createNote={addNote}/>\n        } />\n        <Route path=\"/\" element={<Home />} />\n      </Routes>\n      <Footer>         Note app, Department of Computer Science, University of Helsinki 2026      </Footer>    </Page>  )\n}
\n

El resultado final es el siguiente:

\n\n

Styled-Components ha ido ganando popularidad últimamente y actualmente parece que mucha gente lo considera la mejor manera de definir estilos para aplicaciones React.

\n
\n
\n

Ejercicios 5.29–5.31

\n

A continuación, mejora los estilos de la aplicación de blogs utilizando Material UI o Styled Components.

\n

5.29: blogs con estilo, paso 1

\n

Añade estilos a los formularios de la aplicación.

\n

Su solución podría verse así. Formulario de inicio de sesión:

\n\n

Creando un nuevo blog:

\n\n

5.30: blogs con estilo, paso 2

\n

Ahora diseña la barra de navegación de la aplicación y el componente que muestra las notificaciones. El resultado podría verse así:

\n\n

5.31: blogs con estilo, paso 3

\n

Personaliza como prefieras la apariencia del componente que muestra un único blog. Este es un ejemplo:

\n\n

Este fue el último ejercicio de la sección; es hora de enviar el código a GitHub y marcar los ejercicios completados en el sistema de envío de ejercicios.

\n
","frontmatter":{"mainImage":{"publicURL":"/static/b92f84fe9702a35b12f10af4588ba4c2/part-5.svg"},"part":5,"letter":"e","lang":"es"}}},"pageContext":{"part":5,"letter":"e","lang":"es"}},"staticQueryHashes":["3128451518"]}