Del spot a la obra
La publicidad tradicional ha funcionado, en gran medida, como una disciplina de impacto: captar…
Para finalizar, y como siempre lo comentamos, en la documentación oficial de React tienes mucha más información sobre JSX, pero la idea general es que se trata de una herramienta que está pensada para simplificar…
Una de las características más especiales de React es, sin duda , en mi opinión, la integración de JSX. Además, en un esfuerzo por simplificar la vida de los desarrolladores, es una parte imprescindible de la herramienta.
Por eso es es imposible hablar de los conceptos básicos de React y no hablar sobre lo importante que es entender JSX, sus beneficios y, naturalmente, sus trampas.
Si te estás iniciando en React y has leído los artículos sobre componentes, estados y propiedades, seguro que ya has visto JSX en los códigos de ejemplo. Por otro lado, si ya llevas muchos años programando en Javascript, el código de JSX puede parecerte muy raro. Pero creo que es una cuestión de adaptación.
Por ejemplo:
¿Qué es JSX?
JSX es una extensión de sintaxis de Javascript, que como puedes observar se parece a HTML.
Oficialmente, es una extensión que permite hacer llamadas a funciones y a construcción de objetos. No es ni una cadena de caracteres, ni HTML.
La idea es evitar llamar de forma repetida a objetos de Javascript que se pueden transformar muy rápidamente en monstruos, como por ejemplo el React.createElement() de React, pero sin perder la esencia de Javascript. Aunque posteriormente sea necesario compilar, o transpilar.
¿Por qué usar JSX? ¿Qué beneficios hay?
Muchos benefícios. :)
Uno de ellos es mejorar la legibilidad de tu código - si te gusta leer sintaxis y estructura tipo XML, obviamente -, mejorar tu experiencia de desarrollador, y reducir la cantidad de errores de sintaxis, ya que no tienes que repetir tantas veces el mismo código. Otro beneficio es el de poder integrar a otros miembros de tu equipo que no sean programadores en el desarrollo. Es “fácil” de leer el código si ellos están acostumbrado a leer HTML.
¿El JSX es obligatorio en React?
Cómo hemos comentado anteriormente, JSX es una extensión de Javascript, no de React. Esto significa que no estás obligado a utilizarlo, pero es lo que se recomienda en el sitio web oficial de React. En el momento que pongas las manos en JSX con React, entenderás rápidamente por qué lo recomiendan. Sino, compara los dos trozos de código siguientes:
Es equivalente a:
React.CreateElement(
“div”,
null,
React.createElement(HolaMundo, null),
React.createElement(
“a”,
{ href: “http://holamundo.com” },
“Hola Mundo”
)
)
¿Cuál de las dos formas prefieres?
Resumiendo...
JSX es un pequeño lenguaje con una sintaxis del estilo XML con el objetivo de ayudar a escribir mejor componentes UI e UI interactivas, en que el Javascript y el HTML se unen en cada funcionalidad, envés de tener el marcado y la la lógica en ficheros separados.
El código es más fácil de leer y de escribir. No necesitas estar repitiendo constantemente React.createElement, ya que solo tienes que llamar el elemento por su nombre. .
¿Pero, cómo se ve el JSX por pantalla?
También como ya hemos dicho anteriormente, JSX se transpila a Javascript. Tienes disponible varias herramientas que usan Babel - Babel, Node.js, Grunt, Gulp, Webpack, etc… - que te permiten “transformar” JSX en ECMAscript y de esta forma renderizar tus documentos.
¿En qué se diferencia JSX del HTML?
Una de las diferencias entre un componente de React y un elemento HTML es que el nombre de la clase del componente debe empezar por una letra mayúscula. Como has visto en . Pero hay otros detalles que debes tener en cuenta.
¿Cómo printar variables o propiedades?
Como en muchos otros frameworks o herramientas modernas, de diferentes lenguajes de programación, puedes utilizar llaves {} para printar variables dinámicamente, por ejemplo: { horaActual } o { this.props.horaActual}.
Las propiedades de los elementos se definen utilizando sintaxis de atributos. O sea, utilizarás en el mismo elemento, o etiqueta, atributos de HTML y propiedades (props) de componentes de React.
Además, recuerda que las propiedades están disponibles cuando se crea el componente, en este caso el componente padre.
¿Un ejemplo?
url=’https://google.com’ />
¿Qué pasa si tienes que pasar “demasiadas” propiedades?
La buena práctica es, envés de pasar las propiedades individualmente, utilizar “puntos suspensivos”. Por ejemplo: {... this.props }
¿...y si quiero funciones personalizadas?
En JSX puedes crear tus propios métodos además del render(). De esta forma puedes tener tu propia lógica reutilizable dentro del componente, e incluso dentro del render() utilizando las llaves. Por ejemplo: {this.miFunction()}
¿...puedo utilizar lógica en JSX?
Para que tus aplicaciones sean dinámicas, claro que sí. Puedes usar ifs y elses y programar la lógica como siempre lo has hecho.
Me gusta el enfoque de Azat Mardan, en que define las variables antes del return() y printadas con {}, la función que retorna un valor definida antes del return() e invocada en en {}. Además de utilizar el operador ternario. Para comentar el código, lo puedes hacer como lo has hecho siempre en Javascript: /**/.
¿Un último ejemplo?
Class MiComponente extends React.Component{
render(){
//Aqui aun no tienes JSX, por lo tanto utilizas una variable y/o ternario
return(
//Aqui ya tienes JSX. Printas el resultado del ternario con { }
)
}
}
Conclusión
Para finalizar, y como siempre lo comentamos, en la documentación oficial de React tienes mucha más información sobre JSX, pero la idea general es que se trata de una herramienta que está pensada para simplificar tu vida de desarrollador. Además, aunque se parezca mucho a HTML, debes respetar algunas reglas para que todo funcione correctamente.
¿Cómo ha sido tu experiencia con JSX?
Fuentes:
Hazte miembro
Recibe las últimas novedades directamente en tu correo. Sin spam.
- Mardan, Azat., (2017), React Quickly, Shelter Island, NY 11964, USA: Manning.
- State and Lifecycle
- React State From the Ground Up
- props vs state
- Introducing JSX
Comentarios