JSX

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>Add a class to this div</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>This is a block of JSX</h1>
    <p>Here's a subtitle</p>
  </div>
  {/* comentarios*/}
);

6. Detección de eventos:

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

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

Eventos soportados

Array I

const App = _ => {
const numeros = [1,1,3,5,7]
return (
  <div>
    {numeros.map(n => {
      return <p>{n}</p>
    })}
  </div>
);
}

Array II

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 => {
        return <p key={n}>{n}</p>
      })}
    </div>
  );
}

Array III

Cada uno de los elementos sobre los que estamos iterando debe tener un atributo key diferente. Por tanto, sería mala idea usar n como key, ya que puede repetirse. Sería más recomendable usar index como key (que es lo que uso en el ejemplo), ya que es un valor que se va incrementando.

const App = _ {
  const numeros = [1,1,3,5,7]
  return (
    <div>
      {numeros.map((n, index) => {
        return <p key={index}>{n}</p>
      })}
    </div>
  );
}