Código JSX en nuestro proyecto de React

JSX es una extensión de JavaScript creada por Facebook para el uso con su librería React. Su sintaxis es una especie 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>

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. 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>
  );
}

7. Detección de eventos:

const btnPulsado = () =>{
  alert("hola");
}

const App = () => <button onClick={btnPulsado}>Púlsame</button>;

Eventos soportados

Si llamamos a una función que no recibe parámetros de entrada o cuyo parámetro de entrada es el propio evento, podremos escribir el código así:

<button onClick={callFunction} />

En caso contrario, tendremos que usar una unción anónima:

<button onClick={ () => setState(true)} />

<input onChange={ e => setState(e.target.value)} />