Abstrayendo React Router, creando history y haciendo initialState más accesible

Clase 9 de 22 • Curso de Server Side Render con Express

Clase anteriorSiguiente clase

Elvis Saavedra

student•

Tocan muchas configuraciones pero no quedan claros los conceptos...

Brandon Ortiz Álvarez

student•

Sugerencia, hay cosas que se entienden mejor con cusos de dependencias como npm y webpack que son mas dirigidos a estas herramientas y como configurarlas y saber para que y como se hacen! saludos

Manuel Rivera

student•

Te recomiendo buscar el paquete que se esta utilizando en la página oficial de npm, allí en su mayoría se explica el por qué se creó el paquete y su respectiva configuración, así tendrás una mejor idea del por que lo usamos.

José Enrique Pérez Aquino

student•

Abstrayendo React Router, creando history y haciendo initialState mas accesible

Primero debes abstraer React Router. Para ello, instalamos las siguientes dependencias

npm install history react-router-config react-router

history permite mantener un historial mediante sesiones

react-router permite manejar rutas dentro de react

react-router-config permite añadir configuracion extra al enrutador, en esta caso React Router

Después de instalar nuestras dependencias, debemos proceder a agregar las siguientes líneas al archivo index.js de nuestro frontend (src/frontend/index.js)

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

Con esto, creamos una historia en nuestro frontend logrando que la SPA sea la misma al momento de ir moviéndonos entre rutas.

Luego debemos agregar las siguientes líneas y modificar el ReactDOM.render justo como se muestra

import { Router } from 'react-router'

ReactDOM.render(
  <Provider store={store}>
		<Router history={history}>
	    <App />
		</Router>
  </Provider>,
  document.getElementById('app')
);

Con esto, agregamos un router a toda nuestra app de React que cuenta con una history. Con esto podemos persistir datos a lo largo de las diferentes rutas

Ahora debemos crear el archivo de configuración de rutas que ocupará Express, este archivo lo creamos en la ruta src/frontend/routes y lo llamaremos serverRoutes.js

Dentro de este archivo, colocaremos lo siguiente:

import Home from '../containers/Home';
import Login from '../containers/Login';
import Register from '../containers/Register';
import NotFound from '../containers/NotFound';
import Player from '../containers/Player';

const routes = [
  {
    exact: true,
    path: '/',
    component: Home,
  },
  {
    exact: true,
    path: '/login',
    component: Login,
  },
  {
    exact: true,
    path: '/register',
    component: Register,
  },
  {
    exact: true,
    path: '/player:id',
    component: Player,
  },
  {
    name: 'NotFound',
    component: NotFound,
  },
];

export default routes;

Básicamente estamos reescribiendo el sistema de rutas pero en este caso, para que Express pueda interpretarlas correctamente.

Por último, pero no menos importante, vamos a colocar el initialState en un archivo individual pues mas adelante accederemos a el en varias partes de nuestro código.

Para esto simplemente movemos el initialState que se encuentra en src/frontend/index.js a un nuevo archivo en esta misma ruta, lo llamaremos initialState.js

Ya para finalizar, exportamos el archivo y lo importamos en el index.js ya que es requerido aquí:

import initialState from './initialState';

Karina Magaly Marroquín García

student•

muy util tu aporte, gracias

den velez

student•

estuviera bien un poco mas de contexto, entiendo que son todas las configuraciones. Al principio todo un video para explicar una diapositiva simple (csr vs ssr) y con los conceptos clave de configuración solo como es el código. En lo personal prefiero aprender que el porque de las cosas y no solo poner código porque asi esta en el video.

Julia Suárez

student•

Creo que se deberia explicar mas el por que del refactor para definir las rutas asi, imagino que tiene ventajas para SSR el poder definir las rutas declarativamente, sin embargo no es obvio asumir dichos beneficios :), noto como todos los demas intentan entender "que hizo" el profesor, pero ninguno tenemos claro el "el profesor hizo esto porque nos permite X cosa" lo mismo ocurrio en la clase anterior cuando se elimino el plugin de html de webpack sin explicar que ventajas trae esto para el SSR

Miguel Angel Muñoz Pozos

student•

npm install history react-router-config

Martin Munilla

student•

no es necesario instalar react router ya que ya esta instalado react router dom el cual usa el core de react router, ismplemente en vez de poner react-router pongan react-router-dom

Cristian Caraballo

student•

no me quedo claro.. ¿Por que un historial?

Nixon Fernando Ortiz Suarez

student•

Al ser una single page application, todo se carga en un ventana, cuando el usuario da click y va a otra ruta, lo que en realidad esta pasando es que no se refresca toda la página si no una parte. Por esto, para dar una sensación de que se esta navegando por la aplicación se hace uso de librerias que manejan el historial del navegador y saben que componentes pintar a partir de la ruta en que se encuentran.

Heber Yarod Chanca Melgar

student•

¿Es necesario instalar react-router para importar la clase Router? ¿No se puede trabajar con el Router de react-router-dom?

Gabriel De Andrade

student•

Hola! Sí, deberías poder usar el de react-router-dom sin problemas

Daniel Hernández

student•

No, quiza el profesor se equivoco en el video que descarga otra libreria para usar Router. Pero si lo importas desde react-router-dom te funcionara igual

Carlos Enrique Ramírez Flores

student•

react-router

react-router-config

history

npm i react-router-config history react-router

Hector Miguel Salazar Doroteo

student•

Se supone que en cursos anteriores todo el Código de las rutas ya estaba bien, funcionaba al 100% y ahora lo modifica y agrega mas cosas para solucionar nose que.

Lo mismo me paso con lo del webpack, se supone que ya estaba bien y después lo modificó :/

Ginnio Sarabia

student•

I don't understand why

Julia Suárez

student•

Para que instalar react router si ya esta instalado react router dom? https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other

Camilo Morales Sanchez

student•

no he podido solucionar este warning

<webpack building...
[nodemon] restarting due to changes...
[nodemon] starting `node src/server/index.js`
Development Config
Server listen on port http://localhost:3000
ℹ ｢wdm｣: wait until bundle finished: /__webpack_hmr
webpack built 1282ad497ac354caeaa0 in 2011ms
⚠ ｢wdm｣: Hash: 1282ad497ac354caeaa0
Version: webpack 4.44.1
Time: 2011ms
Built at: 08/10/2020 5:28:06 PM
                                      Asset      Size  Chunks             Chunk Names
assets/2350f838c49a0870ffa4ba40c596fc61.png  3.02 KiB          [emitted]
assets/435b1bef96c79093c441f263d42d8c23.png  30.5 KiB          [emitted]
assets/5098340d72749e7128672e8254567de2.png  1.45 KiB          [emitted]
assets/51bc5f1098eea99c0e1ebacf59f30499.png  2.52 KiB          [emitted]
assets/6267a3128371b34505e8445f89af9cbd.png  1.56 KiB          [emitted]
assets/928696d759a2cd3b2a6533fcfbb0f4d5.png  4.07 KiB          [emitted]
                             assets/app.css  15.9 KiB    main  [emitted]  main
                              assets/app.js   1.5 MiB    main  [emitted]  main
assets/cd9d3d9444872d3e59a14f27ba862b5a.png  3.28 KiB          [emitted]
Entrypoint main = assets/app.css assets/app.js
[0] multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true 40 bytes {main} [built]
[./node_modules/history/index.js] 7.07 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react-redux/es/index.js] 776 bytes {main} [built]
[./node_modules/react-router/esm/react-router.js] 24.9 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/redux/es/redux.js] 23.6 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&timeout=2000&reload=true] (webpack)-hot-middleware/client.js?path=/__webpack_hmr&timeout=2000&reload=true 7.68 KiB {main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/frontend/index.js] 7.13 KiB {main} [built]
    + 113 hidden modules

WARNING in ./node_modules/react-router/esm/react-router.js 294:19-33
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 309:27-41
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 577:45-59
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 596:40-54
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 311:13-30
"export 'locationsAreEqual' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/App.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/App.scss] 1.46 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Carousel.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Carousel.scss] 722 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/CarouselItem.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/CarouselItem.scss] 2.05 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Categories.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Categories.scss] 439 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Footer.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Footer.scss] 620 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Header.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Header.scss] 1.58 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Login.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Login.scss] 3.25 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/NotFound.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/NotFound.scss] 5.15 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Player.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Player.scss] 730 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Register.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Register.scss] 2.21 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales Sánchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Search.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Search.scss] 1.16 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
ℹ ｢wdm｣: Compiled with warnings.>

he seguid todos los paso busaco en la red y sigue saliendo ese warning desde este punto del curso....

Camilo Morales Sanchez

student•

me puse a reinstalar de nuevo las dependencias de esta clase y funciono

<npm i react-router-config history react-router>

Salvador Galliano

student•

Alguien sabe de donde el profesor saca la referencia para hacer todos estos cambios? Creo que eso deberia ser agregado a este curso y no estar copiando y pegando solo codigo.

Gaspar Dolcemascolo

student•

Yo no entiendo como llega al servidor. Se trabaja todo en el front. Llegan atrevés del bundle de webpack o como llegan las rutas al server? No explica los conceptos esta todo muy por arriba. Para que instalamos react-router-config, se uso?

Jose Daniel Molina

student•

¿Para qué un historial?

Massimo Di Berardino

student•

Hola Jose Daniel. Podrías compartirnos un poco más de detalle sobre tu consulta para ayudarte de mejor manera

Jose Daniel Molina

student•

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

ReactDOM.hydrate(
  <Provider store={store}>
    <Router history={history}>
      <App/>
    </Router>
  </Provider>,
  document.getElementById('app')
);

Hola, me refiero a estas líneas, para qué se menciona en la clase lo del history con createBrowserHistory, es realmente necesario, no entiendo para qué se usa aquí, agradezco mucho su ayuda.

Omar Dario Melendrez

student•

Lo que no me quedó claro es que al final estamos exportando el array con configuración de rutas para el ssr, pero nunca lo importa en ningún archivo, por lo cual en esta clase eso aún no está funcionando, estoy en lo correcto?

Nelson Cadenas

student•

¿Alguien sabrá en que parte del código se utilizan las routes creadas para funcionar desde el servidor?, por que el instructor crea un array con las routes con las mismas características que las rutas del lado del cliente, incluso también las llega exportar, pero no se llegan a utilizar el ningún lado del código. Creo que esas rutas quedan en el aire.

Enrique Devars

teacher•

¡Hola nca1478! :D

Esto se hace en el módulo del curso llamado 4. Aplicar Server Side Rendering, en esa parte se ve cómo aplicar la parte de rutas con SSR.

¡Nunca pares de aprender! 💚

Nelson Cadenas

student•

Ah ok, muchas gracias por la acotación!!!!

Cristofher Jumbo Jimenez

student•

En esta clase hemos establecido las rutas tanto para el cliente(frontend) y server (backend). Las segundas no se han implementado todavia :rocket:

Maria Elizabeth Minero Alvarenga

student•

¡Gracias!

Abstrayendo React Router, creando history y haciendo initialState más accesible

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas