1

Lo que tienes que saber sobre React 15

24223Puntos

hace 4 años

React.js ha lanzado este 7 de abril de 2016 su primera versión “ready for production” oficial. Con esto, dejamos atrás versiones inferiores a 1.0.0 dando un salto olímpico hasta las versiones 15.0.0 y 15.0.1 (la versión anterior era la 0.14.8). Por si no lo sabes, React.js es una librería creada por Facebook para construir interfaces con JavaScript. A pesar de ser muy reciente, ya cuenta con una comunidad muy activa, de la cual hace parte Platzi. De hecho, hace ya más de un año que hemos adoptado las buenas ideas que traía la librería para integrarla al stack de nuestros proyectos. La adopción rápida de React.js por muchos desarrolladores desde su lanzamiento hizo que el equipo core del proyecto decidiera pasarla de un estado alfa a un “ready for production”. Además, ya que la gente no se refería a la misma como “React cero punto catorce” sino como “React catorce”, lo natural al hacerlo fue lanzar React 15 y no React 1. Sea lo que sea, se trata en otros aspectos de un cambio no tan radical, centrado en hacer optimizaciones de performance. Te contamos las principales actualizaciones que tienes que conocer sobre este último release:

Una mejor forma de crear el atributo “data-reactid”

Antes de su versión 15, React generaba un id compuesto de un “key” si lo asignabamos más un número y según ello se anidaban tags haciéndonos pasar de 1 a 1.1, de 1.1 a 1.2, etc. React 0.14.x Screen Shot 2016-04-08 at 14.29.14   Todo esto queda mucho más sencillo en React 15.0.x: Captura de pantalla 2016-04-08 a la(s) 3.30.51 p.m. Esto hace que el DOM generado sea mucho menos pesado.

No más <span>(s) innecesarios

Al momento de agregar datos en medio de strings, React creaba un span para envolver dicho dato. Esto era un comportamiento no deseado y ahora ya no pasará más: tendremos un par de comentarios en su reemplazo. React 0.14.x Captura de pantalla 2016-04-08 a la(s) 3.45.35 p.m. React 15.0.x Captura de pantalla 2016-04-08 a la(s) 3.44.28 p.m. Nos ahorramos estos tags que podían darte problemas si agregabas estilos de etiqueta a los span.

No más tags 'noscript'

Una práctica muy común en React es retornar null cuando no queremos hacer render de un componente. Al momento de hacerlo en versiones pasadas se agregaba un inofensivo tag 'noscript'. Ahora habrá un comentario como en el caso anterior. React 0.14.x no script React 15.0.x empty comment react

Los functional components ahora pueden retornar null

Como lo acabo de mencionar, es una práctica común en React retornar null en componentes que no quieres mostrar por x o y razón, por ejemplo para un modal que no siempre estará visible. Los componentes funcionales son otra forma poco popular de momento para crear componentes. Estos sin embargo tienen significativos beneficios de rendimiento al no tener un ciclo de vida. Imagina un componente funcional como un componente que solo tiene la función render. React 0.14.x functional component ¡Eso funciona! Pero si ahora retornemos null, con React 0.14.x pasa lo siguiente: Captura de pantalla 2016-04-08 a la(s) 4.17.00 p.m.error react :( En React 15.0.x ya no hay un error que destruya todo nuestro código; el componente simplemente no se muestra.

Soporte a SVG

Nosotros en JSX estamos acostumbrados a escribir “HTML” con ligeros cambios como className en vez de class. La verdad detrás de eso es que React debe ser capaz de interpretar esta sintaxis amigable para traducir todo a JavaScript usando la función React.createElement(‘tag’). Fue porque esto anterior era muy aburrido y pesado que inventaron esta sintaxis de JavaScript que es JSX. Entonces SVG y todos sus atributos ahora son soportados por JSX.

React solo se encargará de crear componentes

Desde versiones pasadas se anunciaba que tanto los add-ons como CSSTransitionGroup o la función de render que invocabamos como React.render() iban a ser independientes de la librería. Esto se ha confirmado, haciendo que React sea más ligero y de alguna forma más puro e independiente. Esta característica en especial puede romper proyectos así que si en las versiones 0.14.x no cambiaste tus “imports” por las librerías independientes como “react-dom” o “react-addons-css-transition-group" tienes trabajo urgente que hacer antes de migrar. En fin, algo que me gusta de React es actualizar mis aplicaciones al mismo tiempo que el lo hace ya que cuando vayan a hacer cambios duros React empieza a lanzar warnings por consola avisando que no las uses más y obviamente proporcionarte una alternativa. Todo esto en pro de mejorar el performance. Mientras mis proyectos sean más rápidos mis usuarios serán más felices. Quieres aprender más sobre React.js, desde la sintaxis JSX hasta Virtual DOM? No te pierdas nuestro curso profesional en Platzi:

[maxbutton id="3"]

Leonidas
Leonidas
@LeonidasEsteban

24223Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2