¿Sabías que puedes crear un PDF con react?

React no es solo para web y móviles, se puede adaptar a muchas más tecnologías.

hace 2 meses   •   3 min de lectura

Por Andrés Tuñón

Así como lo leíste, no me refiero a visualizarlo.. A CREARLO!

Dentro de la filosofía de React existe el principio "Learn Once, Write Anywhere" que traducido seria algo como "Apréndelo una vez y escríbelo donde sea" y cualquiera pensaría que se refiere a React Native, pero realmente no se limita a móviles, va más allá.

Toda la magia ocurre en los Renderers

React Renderers

Un renderer (como su nombre indica) es el encargado de "renderizar" los componentes, es lo que comunica React con la tecnología objetivo.

Al trabajar con React, actualizamos estados, creamos componentes y seguimos un modelo mental y lógica que nos hace sentir como en casa.

Para poder mantener este orden y diseño React tiene los reconcilers y provee unas funciones a implementar para solucionar los diversos cabos sueltos.

Y como utilizando React puedo crear un PDF

Pues solo debes seguir la documentación de la librería, es bastante similar a armar un sitio web. Por ejemplo mira el siguiente código:

CV ejemplo
CV ejemplo

Este es una página del PDF y es un conjunto de componentes y wrappers que logran separar la lógica. Dentro de <Education /> se encuentra lo siguiente:

¿Notan lo similar que es? ¡Es impresionante! Parece React Native, es similar al clásico React pero sin serlo. Dejo este y el resto de ejemplos a continuación:

react-pdf/packages/examples at master · diegomura/react-pdf
📄 Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.

Y no solo se queda ahí

Como este hay muchos mas renderer creados por la comunidad:

GitHub - chentsulin/awesome-react-renderer: Awesome list of React Renderer
Awesome list of React Renderer. Contribute to chentsulin/awesome-react-renderer development by creating an account on GitHub.
Listado de React Renderers

¡Hay desde el manejo de un CLI, hasta manejar hardware como un Arduino! ¡Y no se trata de proyectos olvidados, se utilizan actualmente!

Si desean crear su propio renderer o ver el código más de cerca, recomiendo este artículo que me encontré:

How to Create a Custom React Renderer - This Dot Labs
Creating a Custom React Renderer At the very top of the React documentation, the team defines React’s main qualities: Declarative Component-Based Learn Once…
¿Cómo crear un React Renderer?

Corre la voz