const element = () => <h1>¡Hola Fictizia!</h1>El código mostrado arriba, a simple vista, puede parecer raro. No es ni HTML, ni es un string es JSX. Básicamente es una extensión de la sintáxis de JavaScript y es la manera más como de desarrollar en React. No es obligatorio pero podríamos decir que todo el mundo que hace React utiliza JSX.
Esta idea de meter el HTML dentro de JavaScript es muy criticada pero se basa en el concepto de que la lógica de la interfaz de usuario esta intrínsecamente unida a la lógica de renderizado. De esta forma tenemos un componente que contiene en un solo fichero JavaScript el maquetado y la lógica.
Charla explicando el por qué de JSX en profundidad
Hay algunos atributos de las etiquetas HTML que cambian:
- class: en React hay que escribir className
- onclick: en React hay que escribir onClick
- A los atributos se les puede pasar funciones, objetos, texto, expresiones...
En el siguiente ejemplo tenemos una variable llamada name la cual la usamos dentro de JSX envolviéndola entre llaves:
const name = 'Fictizia'
const element = () => <h1>¡Hola {name}!</h1>No solo se pueden renderizar variables sino todo tipo de expresiones dentro de las llaves:
- Funciones:
const getName = (user) => user.name
const element = () => <h1>¡Hola {getName()}!</h1>- Ternarias:
const age = 18
const element = () => <h1>¡Hola {age > 18 ? 'adulto' : 'joven'}!</h1>Realmente JSX representa objetos de JavaSript pero Babel compila el JSX a una función de React llamada createElement().
const element = () => <h1>¡Hola Fictizia!</h1>Sería igual a esto:
const element = React.createElement(
'h1',
null,
'¡Hola Fictizia!'
);Puedes comprobarlo visitando este link
- Entrar en BabelJS y probar a escribir un componente que tenga una clase llamada
title. Revisar qué salida nos da BabelJS después del compilado.