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.

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

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

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 />
);
src/components/saludador.jsimport React from 'react'

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

export default Saludo;

Ejercicios Componentes

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 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. Para ello, los aglutinaremos en un único objeto. Por tanto, la función getInputValue quedará así:

    Descargar recurso
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.