Componentes en React

En este capítulo vamos a ver cómo se pueden crear componentes en React. Los componentes son la base de React, y son la forma en la que se estructura una aplicación en React. Un componente es una pieza de código que se puede reutilizar en diferentes partes de la aplicación, y que se puede componer con otros componentes para crear interfaces de usuario más complejas.

Tip

Antes de iniciar es necesario llevar buenas prácticas de programación, sobretodo un orden en el código que vamos desarrollando, quizá al inicio sea útil solo crear nuestros componentes en el archivo src/App.jsx pero a medida que la aplicación crece es necesario separar los componentes en archivos separados. Es por ello que se hace indispensable la creación manual del directorio src/components y dentro de este directorio crear los archivos de los componentes que vamos a desarrollar.

Crear un componente

Para esta unidad vamos a crear un componente llamado Usuario que simplemente va a mostrar un mensaje en la pantalla. Para ello vamos a crear un archivo llamado Usuario.jsx dentro del directorio src/components.

export default function Usuario() {
    return <div>
        <h1>Nombre: Diego</h1>
        <p>Edad: 25</p>
        <p>Nacionalidad: Ecuatoriana</p>
        </div>
    }

En este código estamos creando un componente llamado Usuario que simplemente muestra un mensaje en la pantalla. Para poder utilizar este componente en nuestra aplicación, necesitamos importarlo en el archivo src/App.jsx.

import './App.css'
import { MiComponente } from './components/MiComponente'
function App() {

  return (
    <>
      <div>
      <MiComponente />
      </div>
    </>
  )
}

export default App

En este código estamos importando el componente Usuario en el archivo src/App.jsx y luego lo estamos utilizando dentro del componente App. Si ahora ejecutamos la aplicación, deberíamos ver el mensaje que muestra el componente Usuario en la pantalla.

Los componentes son piezas de código que se pueden reutilizar en diferentes partes de la aplicación, y que se pueden componer con otros componentes para crear interfaces de usuario más complejas. En React, los componentes se pueden crear de dos maneras: como funciones o como clases. En este capítulo vamos a ver cómo se pueden crear componentes como funciones.

Props en React.

Ahora vamos a ver cómo se pueden pasar propiedades a los componentes en React. Las propiedades son una forma de pasar información de un componente a otro, y se utilizan para personalizar el comportamiento y la apariencia de los componentes.

Tip

Se pueden pasar props a los componentes desde la aplicación principal, sin embargo los componentes no pueden pasar propos desde los componentes hijos a los padres. Es decir no podemo pasar props desde los coponentes a la aplicación principal.

Para pasar props a los componentes utilizamos una sintaxis similar a la de los atributos de HTML. Por ejemplo, si queremos pasar una prop llamada nombre al componente Usuario, podemos hacerlo de la siguiente manera:

export const MiComponente = (props) => {
    return <div>
        <h1>Nombre: {props.nombre}</h1>
        <p>Edad: {props.edad}</p>
        <p>Nacionalidad: {props.nacionalidad}</p>
        </div>
    }

En este código estamos pasando una prop llamada nombre al componente Usuario. Para poder utilizar esta prop en el componente, la recibimos como argumento en la función del componente y la utilizamos dentro del componente.

import './App.css'
import { MiComponente } from './components/MiComponente'
function App() {

  return (
    <>
      <div>
      <MiComponente nombre="Diego" edad={36} nacionalidad="Ecuatoriana" />
      </div>
    </>
  )
}

export default App

En este código estamos pasando la prop nombre, edad y nacionalidad al componente MiComponente con el valor Diego. Si ahora ejecutamos la aplicación, deberíamos ver el mensaje que muestra el componente MiComponente en la pantalla.

Si quiero pasar un valor entero a un componente, debo hacerlo de la siguiente manera:

<MiComponente edad={36}/>

Si quiero pasarle un valor booleano a un componente, debo hacerlo de la siguiente manera:

<MiComponente esMayorDeEdad={true}/>

Si quiero pasar un array a un componente, debo hacerlo de la siguiente manera:

<MiComponente colores={['rojo', 'verde', 'azul']}/>

Si quiero pasar un objeto a un componente, debo hacerlo de la siguiente manera:

<MiComponente persona={{nombre: 'Diego', edad: 36}}/>

Reutilizacion de los componentes

En React, los componentes se pueden reutilizar en diferentes partes de la aplicación, y se pueden componer con otros componentes para crear interfaces de usuario más complejas. En este capítulo vamos a ver cómo se pueden reutilizar los componentes en React.

Reutilizar un componente

Para reutilizar un componente en React, simplemente tenemos que importarlo en el archivo donde queremos utilizarlo y luego utilizarlo en el archivo. Por ejemplo, si queremos reutilizar el componente Usuario en el archivo src/App.jsx, simplemente tenemos que importarlo y luego utilizarlo en el archivo.

import './App.css'
import { MiComponente } from './components/MiComponente'

function App() {

  return (
    <>
      <div>
      <MiComponente nombre="Diego" edad={36} nacionalidad="Ecuatoriana" />
      <MiComponente nombre="Maria" edad={25} nacionalidad="Colombiana" />
      <MiComponente nombre="Pedro" edad={30} nacionalidad="Mexicana" />
      </div>
    </>
  )
}

export default App

En este código estamos reutilizando el componente Usuario en el archivo src/App.jsx y lo estamos utilizando tres veces con diferentes propiedades. Si ahora ejecutamos la aplicación, deberíamos ver el mensaje que muestra el componente Usuario en la pantalla.

PropTypes

En React, los PropTypes son una forma de validar las propiedades que se pasan a los componentes. Los PropTypes son una forma de documentar los componentes y de asegurarse de que se están pasando las propiedades correctas a los componentes.

Adecuando el componente MiComponente con PropTypes, el código quedaría de la siguiente manera:

import PropTypes from 'prop-types';

export const MiComponente = (props) => {
    return <div>
        <h1>Nombre: {props.nombre}</h1>
        <p>Edad: {props.edad}</p>
        <p>Nacionalidad: {props.nacionalidad}</p>
        </div>
    }

MiComponente.propTypes = {
    nombre: PropTypes.string.isRequired,
    edad: PropTypes.number.isRequired,
    nacionalidad: PropTypes.string.isRequired
};

En este código estamos utilizando los PropTypes para validar las propiedades que se pasan al componente Usuario. En este caso, estamos validando que las propiedades nombre y nacionalidad sean de tipo string y edad sea de tipo number, y que todas las propiedades sean requeridas.

Si ahora ejecutamos la aplicación, deberíamos ver un mensaje de error en la consola que nos indica que falta una propiedad requerida.

De esta forma aseguramos que los componentes se están utilizando de la forma correcta y que se están pasando las propiedades correctas a los componentes. En el caso de que alguna propiedad no sea requerida, simplemente no se le pone el .isRequired.

Desestructuración de props

En React, la desestructuración de props es una forma de extraer propiedades de un objeto y asignarlas a variables independientes. La desestructuración de props es una forma de simplificar el código y de hacerlo más legible.

Por ejemplo, si queremos extraer las propiedades nombre, edad y nacionalidad del objeto props y asignarlas a variables independientes, podemos hacerlo de la siguiente manera:

import PropTypes from 'prop-types';

export const MiComponente = (props) => {
    const { nombre, edad, nacionalidad } = props;

    return <div>
        <h1>Nombre: {nombre}</h1>
        <p>Edad: {edad}</p>
        <p>Nacionalidad: {nacionalidad}</p>
        </div>
    }

MiComponente.propTypes = {
    nombre: PropTypes.string.isRequired,
    edad: PropTypes.number.isRequired,
    nacionalidad: PropTypes.string.isRequired
};

En este código estamos utilizando la desestructuración de props para extraer las propiedades nombre, edad y nacionalidad del objeto props y asignarlas a variables independientes. De esta forma, podemos utilizar las variables nombre, edad y nacionalidad en lugar de props.nombre, props.edad y props.nacionalidad.

CSS en React

Ahora vamos a crear otro componente para entender como utilizar css en React, para ello vamos a crear una carpeta para MiComponente en src/components y dentro de esta carpeta vamos a mover el archivo MiComponente.jsx y vamos a crear otra carpeta llamada Card y dentro de esta carpeta vamos a crear un archivo llamado Card.jsx.

Crear un componente Card

Para esta unidad vamos a crear un componente llamado Card que simplemente va a mostrar un mensaje en la pantalla. Para ello vamos a crear un archivo llamado Card.jsx dentro del directorio src/components.

export default function Card() {
    return <div className="card">
        <h1>Card Title</h1>
        <p>Card Description</p>
        </div>
    }

En este código estamos creando un componente llamado Card que simplemente muestra un mensaje en la pantalla. Para poder utilizar este componente en nuestra aplicación, necesitamos importarlo en el archivo src/App.jsx.

import Card from './components/Card/Card'
import { MiComponente } from './components/MiCoponente/MiComponente'

function App() {

  return (
    <>
      <div>
      <MiComponente nombre="Diego" edad={36} nacionalidad="Ecuatoriana" />
      <MiComponente nombre="Maria" edad={25} nacionalidad="Colombiana" />
      <MiComponente nombre="Pedro" edad={30} nacionalidad="Mexicana" />
      <Card />
      </div>
    </>
  )
}

export default App

En este código estamos importando el componente Card en el archivo src/App.jsx y luego lo estamos utilizando dentro del componente App. Si ahora ejecutamos la aplicación, deberíamos ver el mensaje que muestra el componente Card en la pantalla.

Ahora vamos a crear un archivo de estilos para el componente Card. Para ello vamos a crear un archivo llamado Card.css dentro del directorio src/components/Card y vamos a agregar los siguientes estilos al archivo.

.card {
    background-color: #000000;
    color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin: 20px;
}

En este código estamos creando un archivo de estilos para el componente Card que define los estilos del componente. Para poder utilizar estos estilos en el componente Card, necesitamos importar el archivo de estilos en el archivo Card.jsx.

import "./Card.css";

export default function Card() {
    return <div className="card">
        <h1>Card Title</h1>
        <p>Card Description</p>
        </div>
    }

En este código estamos importando el archivo de estilos en el archivo Card.jsx y luego estamos utilizando la clase card en el componente Card para aplicar los estilos al componente. Si ahora ejecutamos la aplicación, deberíamos ver los estilos aplicados al componente Card en la pantalla.

Reto

  1. Crear un componente llamado Header que muestre un título y una descripción.
  2. Crear un componente llamado Footer que muestre un mensaje de derechos de autor.
  3. Crear un componente llamado Button que muestre un botón con un texto.
  4. Crear un componente llamado Input que muestre un campo de texto.
  5. Crear un componente llamado Card que muestre un título y una descripción.
Solución 
// Header.jsx

export default function Header() {
    return <div>
        <h1>Header</h1>
        <p>Header Description</p>
        </div>
    }
// Footer.jsx

export default function Footer() {
    return <div>
        <p>© 2025 Todos los derechos reservados.</p>
        </div>
    }
// Button.jsx

export default function Button() {
    return <button>Click me</button>
}
// Input.jsx

export default function Input() {
    return <input type="text" placeholder="Enter your name" />
}
// Card.jsx

import "./Card.css";

export default function Card() {
    return <div className="card">
        <h1>Card Title</h1>
        <p>Card Description</p>
        </div>
    }
// App.jsx

import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'
import Button from './components/Button/Button'
import Input from './components/Input/Input'
import Card from './components/Card/Card'

function App() {

  return (
    <>
      <div>
      <Header />
      <Button />
      <Input />
      <Card />
      <Footer />
      </div>
    </>
  )
}

export default App