JSX

Se usa para declarar componentes utilizando una sintaxis que recuerda a código html. La transformación de nuestro código JSX a un código Javascript que usa la librería de React es llevada a cabo, habitualmente, por el transpilador babel.

  • Declaración básica de una constante:
    const element = <h1>Hello World</h1>; // Ver nativo
    "use strict";
    
    var element = React.createElement(
    "h1",
    null,
    "Hello, world"
    )
  • Comentarios:
    const JSX = (
      <div>
        <h1>This is a block of JSX</h1>
        <p>Here's a subtitle</p>
      </div>
      /* comentarios*/
    );
  • 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> // Ver nativo
    "use strict";
    
    var url = React.createElement(
      "div",
      null,
      React.createElement(
        "h1",
        null,
        "a"
      ),
      React.createElement(
        "h2",
        null,
        "b"
      )
    );
  • Para definir clases, usaremos className:
    const JSX = (
      <div className="nombre">
        <h1>Add a class to this div</h1>
      </div>);
  • El código HTML se escribe tal cual, y el código Javascript se pone entre llaves:
    const element = <h1>{ 2 + 2 }</h1> // Ver nativo
    "use strict";
    
    var element = React.createElement(
      "h1",
      null,
      2 + 2
    );
    const url = "foto.jpg"
    const foto = <img src={url} /> // Ver nativo
    "use strict";
    
    var url = "foto.jpg";
    var foto = React.createElement("img", { src: url });
    function multiplicar(a,b){return a*b}
    const element = <h1>{ multiplicar(2,3)}</h1> // Ver nativo
    "use strict";
    
    function multiplicar(a, b) {
      return a * b;
    }
    var element = React.createElement(
      "h1",
      null,
      multiplicar(2, 3)
    );
  • 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

    Si en lugar de asociar la key al valor, la asociamos al índice, evitaremos que se impriman los duplicados

    const App = _ {
      const numeros = [1,1,3,5,7]
      return (
        <div>
          {numeros.map((n, index) => > {
            return <p key={key}>{n}</p>
          })}
        </div>
      );
    }
  • icono de mandar un mail¡Contacta conmigo!
    Pablo Monteserín
    contacta conmigoPablo Monteserín

    Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.