Componentes en React

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 />;

Habitualmente pondremos los nombres de las carpetas en minúsculas y guiones y de los componentes en mayúsculas y con CamelCase

Si usasemos styled-components (veremos más adelante en que consiste), podríamos tener un fichero en la ruta src/components/saludador/Saludador.styled.js

src/components/saludador/index.js
// Importamos y exportamos en una sola línea las funciones necesarias del componente APP

export { default } from './Saludador';
src/components/saludador/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
Usar Props en React →

Aviso Legal | Política de privacidad