JSX es una extensión de JavaScript creada por Facebook para el uso con su librería React. Su sintaxis es una especia de HTML y Javascript mezclado. La transformación de nuestro código JSX a código Javascript es llevada a cabo, habitualmente, por el transpilador babel.
En el código JSX no debería haber lógica. A lo sumo habrá llamadas a funciones que encapsularan la lógica en función de la cual se renderizarán los componentes.
1. Declaración básica de una constante:
const element = <h1>Hello World</h1>;
2. Cuando tenemos varios elementos que queremos almacenar en una sola variable o constante de JSX, estos elementos deben estar anidados en uno solo:
const url = <div>
<h1>a</h1>
<h2>b</h2>
</div>
3. Para definir clases, usaremos className:
const JSX =
<div className="nombre">
<h1>Amor</h1>
</div>;
4. El código HTML se escribe tal cual, y el código Javascript se pone entre llaves:
const element = <h1>{ 2 + 2 }</h1>
const url = "foto.jpg"
const foto = <img src={url} />
function multiplicar(a,b){return a*b}
const element = <h1>{ multiplicar(2,3)}</h1>
5. Comentarios:
const JSX =
<div>
<h1>Title</h1>
<p>Subtitle</p>
{/* comentarios*/}
</div>
6. Detección de eventos:
const btnPulsado = () =>{
alert("hola");
}
const App = () => <button onClick={btnPulsado}>Púlsame</button>;
7. Recorrer un Array
Cada elemento del array debe tener asociada una key única cuando lo recorremos. Si la key está repetida, el valor sólo se imprimirá una vez.
const App = _ => {
const numeros = [1,1,3,5,7]
return (
<div>
{numeros.map((n, key) => {
return <p key={key}>{n}</p>
})}
</div>
);
}