Componentes en React

Contactar con el profesor

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.

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

Un componente debe devolver código JSX o null.

const MyComponent = () => <div>hola</div>;

export default () =>  <MyComponent />;

Creación de un componente en un fichero externo

src/App.js
import Saludo from './components/saludador'

export default () => <Saludo />;
src/components/saludador.js
export default () => <div>hola</div>;

Ejercicios Componentes

1. Euros a dólares

Vamos a hacer 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á el correspondiente valor en dólares.

Definir un componente App que contendrá un único componente llamado Form. Este componente recogerá los euros introducidos, procesará la respuesta y la mostrará por pantalla.

2. Grados centígrados

Definir un componente App que contendrá un único componente llamado Form. Este componente recogerá los grados centígrados introducidos, procesará la respuesta y la mostrará por pantalla.

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

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.

Definir un componente App que contendrá un único componente llamado Form. Este componente recogerá los el alto y el ancho, procesará la respuesta y la mostrará por pantalla.

← useState
Props →

Aviso Legal | Política de privacidad