Í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

Componentes

Son partes de la interfaz visual.

Su nombre debe, obligatoriamente, comenzar por mayúscula. Si no comienza por mayúscula, tendremos un error que es difícil de interpretar.

Un componente debe devolver código JSX o null.

import React from 'react';

const MyComponent = _ => <div>hola</div>;

const App = _ => {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}

export default App;

Cada vez que el componente se renderiza, sus funciones se vuelven a crear, por lo que cuantas más funciones podamos definr fuera del mismo, mejor

Creación de un componente en un fichero externo

src/App.jsimport Saludo from './components/saludador'

const App = _ => (
  <Saludo />
);

export default App;
src/components/saludador.jsimport React from 'react'

const Saludo = _ => (
  <div>hola</div>
);

export default Saludo;

Ejercicios Componentes

  1. Grados centígrados

    Definir una clase App que tendrá un único componente llamado Form. Este componente 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.

    Seguimos en la línea de los ejemplos anteriores, pero ahora vamos a recuperar dos valores en lugar de uno.

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.