Nuestra primera página
Demos a nuestros usuarios algo más que la página de bienvenida de Redwood. Usaremos la herramienta de línea de comando redwood para crear nuestra página:
El comando anterior hace cuatro cosas:
- Crea
web/src/pages/HomePage/HomePage.js. Redwood usa el primer argumento como nombre del componente de la página, luego lo pasa a mayúsculas y añade el sufijo "Page". - Crea un archivo de pruebas, junto con el componente recién creado, en
web/src/pages/HomePage/HomePage.test.jscon un único test. Escribe tests para sus componentes, ¿verdad? - Crea un archivo Storybook para el componente en
web/src/pages/HomePage/HomePage.stories.js. Storybook es una herramienta maravillosa para desarrollar y organizar eficientemente los componentes de la interfaz de usuario (UI). Consulte este tema del Foro de Redwood para aprender más y empezar a usarlo en su proceso de desarrollo. - Añade una
<Route>enweb/src/Routes.jsque mapea la ruta raíz/a la nueva página HomePage.
Importación de rutas de páginas automática
Notará que en
Routes. jshacemos referencia a un componenteHomePageque no se importa en ningún lado. Redwood importa automáticamente todas las páginas en el archivo Routes porque precisaremos referenciarlas luego. Esto evita extensas declaraciones deimporten el archivo.
De hecho, esta página ya está disponible (su navegador se recargó automáticamente):
No es bonita, ¡pero es un comienzo! Pruebe en su editor cambiar algo del texto y guardarlo. Su navegador debería recargarse con el nuevo texto.
Ruteo#
Abra web/src/Routes.js y verifique que la ruta fue creada:
Cambie el path de la ruta a algo como:
Tan pronto añada su primera ruta no volverá a ver la pantalla inicial de Redwood. A partir de ahora Redwood servirá NotFoundPage cuando no encuentre una ruta que coincida con la URL solicitada. Cambie la URL a http://localhost:8910/hello donde verá la página de inicio "HomePage".
Antes de continuar ¡cambie de vuelta la ruta a /!