Índice del curso de ReactJS

  1. Instalación y configuración inicial
  2. Estructura básica de un proyecto con ReactJS
  3. JSX
  4. Recogida de datos
  5. State
  6. Componentes
  7. Props
  8. Renderizado condicional
  9. Arrays
  10. Style
  11. Valor por defecto de una combo
  12. React router
  13. Fetch API
  14. Context API
  15. Login
  16. Redux
  17. React Developer Tool
  18. Sockets
  19. Build
  20. TypeScript
  21. React Native
  22. Expo
  23. React native
  24. Navigation
  25. Compilar con Expo en la nube
  26. Create React App
  27. Compartir código entre React Web y React Native. Dos aproximaciones:
    1. Empaquetar con NPM
    2. Importar código desde fuera del proyecto pero en el propio ordenador
    3. Importar código con prototype

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.