Í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

Renderizado condicional

No es posible poner un if en JSX. En su lugar, tenemos las siguientes opciones:

Con estados. Si el estado o la propiedad existe, lo muestro, si no no hago nada

return (
  <div>
    {truco.reps && (
        <div>{truco.reps}</div>
    )}
  </div>
);

Con estados II. Si el estado o la propiedad existe, lo muestro, si no, hago otra cosa

return (
  <div>
    {truco.reps
      ? <div>{truco.reps}</div>
      : <div>No reps specified</div>
    }
  </div>
);

Ejercicios renderizado condicional

  1. Haremos una aplicación para calcular el coste de un viaje. Para ello desarrollaremos dos componentes que recibirán como props el número de noches y un número que determinará si el componente va a calcular el coste del hotel o el coste del viaje:
    <ComponenteMultiple opcion="1" noches={nochesState}/>
    <ComponenteMultiple opcion="2" noches={nochesState}/>
    • Opción 1 ( Coste Hotel): múltiplica el número de noches por los 40 euros que cuesta cada noche.
    • Opción 2 ( Coste Alquiler):
      • Cada día de alquiler cuesta 40 €.
      • Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
      • Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).
  2. Vamos a juntar los siguientes tres proyectos en uno solo:

    • Calcular grados Fahrenheit
    • Convertir euros en dólares
    • Calcular la superficie de un rectángulo.

    Pintaremos tres veces un único componente en pantalla que mostrará en función de una prop el resultado correcto.

    const calcula = _ => {
      setDatos({
        dato1: dato1Ref.current.value,
        dato2: dato2Ref.current.value
      });
    }
    
    return (
      <div className="App">
        <input type="text" ref={dato1Ref} placeholder="dato1" onChange={() => { calcula() }} />
        <input type="text" ref={dato2Ref} placeholder="dato2" onChange={() => { calcula() }} />
    
        <ComponenteMultiple opcion="1" datos={datosState} />
        <ComponenteMultiple opcion="2" datos={datosState} />
        <ComponenteMultiple opcion="3" datos={datosState} />
      </div>
    );

Renderizado condicional de clases css

Vamos a mostrar un class u otro en función de si se cumple cierta condición.

import React from 'react';

const mergeClasses = (...classes) => classes.filter(className => !!className).join(" ");

const App =_ => {
  const isOption1 = true;
  const isOption2 = false;
  
    return (
      <div className={mergeClasses("clase1 clase2", isOption1 && "clase3", isOption2 && "clase4")}>
      </div>
    )
}

export default App;
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.