Í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. Build
  19. TypeScript
  20. React Native
  21. Expo
  22. Create React App
  23. 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

Recogida de datos

import React, {useRef} from 'react';

const App = _ => {
  const nombreRef = useRef(null);

  const procesar = _ => {
    console.log(nombreRef.current.value);
  }
  return (
    <div className="App">
      <input type="text" ref={nombreRef}/>
      <button onClick={procesar}>Enviar</button>
    </div>
  )
}

export default App;

Ejercicios - recogida de datos

De momento, en estos ejercicios no pintaremos la solución en la página HTML, sino que la mostraremos como una traza en la consola.

  1. Grados centígrados

    Definir una clase App que recogerá los grados centígrados introducidos y se los pasará a la clase App principal para que se encargue de calcular los grados Fahrenheit.

    Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.

  2. Euros a dólares

    Vamos a hacer un ejercicio similar al anterior. Se trata de un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje de alerta con el correspondiente valor en dólares.

    Para hacer este ejercicio, parte del código del ejemplo anterior, pero modificándolo para que en lugar de hablar de grados Centígrados y grados Fahrenheit, en el código fuente se haga referencia a euros y dólares.

  3. Calcular la superficie de un rectángulo

    Tendremos un formulario que recogerá el ancho y el alto de un rectángulo y calculará su superficie.

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.