TypeScript / React

Bienvenidos sean a este post, hoy hablaremos sobre otro framework.

Este framework fue desarrollado originalmente por Facebook, es ampliamente utilizado y es muy popular en la comunidad de Javascript. Esto es asi porque utiliza una sintaxis especifica en linea para combinar planillas HTML y codigo Javascript en el mismo archivo. Este es denominado como JSX o Javascript XML. Esta orientado a la representacion de componentes DOM, pero no provee caracteristicas adicionales fuera de este. Por esta razon, este framework es utilizado en conjunto con otros para poder usar estas caracteristicas faltantes, por ejemplo el ruteo, y otra caracteristica que lo destaca es la velocidad con la que renderiza al engine. Solo superado por unos pocos framework.

Ya mencionamos que JSX combina a HTML con Javascript, y sumado con que es muy simple de entender y utilizar le permitio ganar muchisima popularidad. Su principio primario es que la representacion de un area particular del DOM debe ser manejada por un unico componente de React. Para esto React utiliza un DOM virtual para calcular que actualizaciones deben hacerse al DOM, haciendo que solo se rendericen los que se modificaron. Es decir, si necesitamos volver a renderizar una coleccion de items a DOM, cada item se debe convertir en un componente de React, como la coleccion misma tambien debe ser un componente de React. Y esto permite que si un solo elemento de la coleccion es modificado, solo se actualizara ese elemento sin afectar al resto.

Ya tenemos una base de como trabaja y algunas particularidades, ahora pasaremos a configurarlo. Antes debemos mencionar que en los inicios utilizar React y typescript era algo de extrema complejidad. Pero afortunadamente la comunidad de typescript se puso manos a la obra y hoy en dia es mucho mas simple utilizar ambos. Por ejemplo podemos crear una aplicacion de React con unidades de testing con un simple comando:

$ npx create-react-app ejemplo01 --template typescript

En este caso primero pasamos la indicacion de que debe crear, la aplicacion react, seguido del nombre de la misma y por ultimo indicando que la plantilla sera de typescript. Nos pregunta si deseamos proceder, le dan que si y procedera a crearlo. Una vez finalizada la creacion tendremos un directorio con el nombre de la aplicacion. Para probarlo debemos ingresar al directorio y ejecutar el siguiente comando:

$ npm start

Este iniciara nuestra aplicacion, una vez finalizada las configuraciones nos informara que podemos conectarnos a la siguiente url:

http://localhost:3000

Si nos conectamos a esa pagina veremos la siguiente pagina basica:

Como dijjimos ya tenemos nuestra primera aplicacion funcionando, esta en entorno de desarrollo pero es completamente funcional y a medida que la modifiquemos, se actualizara. En los proximos posts iremos viendo mas temas.

En resumen, hoy hemos visto React, que es,, como se utiliza, y un ejemplo simple de como se crea una aplicacion de React con typescript. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.