Crea presentaciones impactantes con ReactJS
Aprende a utilizar React e ImpressJS para crear presentaciones al puro estilo Prezi
Gracias al ecosistema gigantesco que tiene React podemos incluso hasta crear presentaciones con todas las características que nos ofrece impress.js.
Todo esto es debido a un genial complemento, me refiero a react-impressjs, que utilizaremos en esta ocasión para crear una pequeña presentación.
Puedes checar nuestros otros tutoriales en los siguientes enlaces:
Instalación
Lo primero que debemos tomar en cuenta es que esta será una aplicación que crearemos con create-react-app, haremos de cuenta que ya se tiene instalada esta gran herramienta.
$ create-react-app tutorial-react-impressjs
$ cd tutorial-react-impressjs
$ npm startUna vez creada la aplicación y seguidos los pasos de más arriba vamos a verificar que el servidor corra correctamente. Ya sabemos que viene integrado con hot-reloading, así es que para que las cosas sean más fluidas dejaremos ese servidor corriendo.
Instalamos el plugin de la siguiente forma:
# Con npm
$ npm install --save react-impressjs# Con yarn
$ yarn add react-impressjs
Ahora importamos el componente en nuestro archivo src/App.js quedando de la siguiente manera:
Como te darás cuenta hemos creado un slide con un formato sencillo, ahora vamos a crear una presentación un poco más compleja. Vamos a seguir la siguiente documentación:
La presentación
Ahora hemos preparado todo para crear una presentación, pero vamos a observar el código de arriba y veremos que tenemos dos componentes que importamos de react-impressjs, Impress y Step .
<Impress /> contiene el componente principal de las diapositivas, y <Step /> es el componente de impressjs donde la magia sucede, aquí irán nuestras diapositivas. Es importante leer la documentación de impressjs para hacer cosas increíbles.
Vamos a poner un ejemplo simple:
Primero cambiamos un poco los estilos para que se vean mejor nuestra presentación:
# src/App.css.slide {
display: flex;
justify-content: center;
align-items: center;
}.text-center {
text-align: center;
}
Y agregamos un slide nuevo en nuestra aplicación, el código quedará de la siguiente forma.
Si notamos cada uno tiene la clase slide y un atributo data, este tiene la propiiedad x, esta propiedad sirve para desplazar nuestras diapositivas, lo que permitirá que se mueva de forma horizontal.
Hemos almacenado un desplazamiento en la variable defaultDesplacement , esto nos permitirá hacer desplazamientos solamente multiplicando esta variable.
Nuestra aplicación se verá así.
Podemos checar la documentación y agregar más propiedades, pero el fin de este tutorial es enseñarles lo fácil que es crear una presentación con estas herramientas.
Puedes checar el repositorio del tutorial en el siguiente enlace:
Déjanos tus comentarios qué te pareció este tutorial, síguenos en nuestras redes sociales o suscríbete a nuestro newsletter para recibir más artículos como este.
