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 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>;

Eventos soportados

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