React
Tutorial React: Componentes funcionales
Aprende a crear y usar componentes funcionales en React 18.3.1. Domina la sintaxis, props, children y ejemplos prácticos. Mejora tu código en React.
Aprende React y certifícateSintaxis de componentes funcionales
En React, los componentes funcionales son una forma de definir componentes que utilizan funciones en lugar de clases. Esta sintaxis es más concisa y aprovecha las ventajas de los hooks para gestionar el estado y los efectos secundarios.
Un componente funcional es una función de JavaScript que recibe un objeto de propiedades (props
) como argumento y devuelve un elemento de React. La sintaxis básica de un componente funcional es la siguiente:
export default function MiComponente(props) {
return <div>{props.texto}</div>;
}
En este ejemplo, MiComponente
es una función que recibe props
y devuelve un elemento div
que contiene el valor de props.texto
.
Desestructuración de props
Para mejorar la legibilidad del código, es común desestructurar las propiedades directamente en la firma de la función del componente:
export default function MiComponente({ texto }) {
return (
<div>
<h1>Hola, {texto}</h1>
<p>Este es un componente básico en React.</p>
</div>
);
}
Este enfoque hace que el código sea más limpio y fácil de entender, especialmente cuando se manejan múltiples propiedades.
Componentes funcionales con children
Los componentes funcionales también pueden recibir children
, que son los elementos anidados dentro del componente:
// Contenedor.jsx
export default function Contenedor({ children }) {
return <div className="contenedor">{children}</div>;
}
import Contenedor from './components/Contenedor/Contenedor';
// App.jsx
const App = () => (
<Contenedor>
<h1>h1 en el contenedor</h1>
<p>Pero puede ser cualquier cosa</p>
</Contenedor>
)
export default App
En este ejemplo, Contenedor
renderiza cualquier elemento pasado como children
dentro de un div
con la clase contenedor
.
Ejemplo de componente de texto estático
En React, crear un componente de texto estático es una tarea sencilla y directa. Un componente de texto estático es aquel que no depende de props ni de estado, simplemente muestra un texto fijo. Este tipo de componentes es útil para mostrar elementos de interfaz de usuario que no cambian, como títulos, mensajes informativos o etiquetas.
Para crear un componente de texto estático, solo necesitamos definir una función que devuelva el elemento de React que queremos renderizar. A continuación, se muestra un ejemplo básico:
// TextoEstatico.jsx
export default function TextoEstatico() {
return (
<div>
<p>Este es un componente de texto estático.</p>
</div>
);
}
En este ejemplo, la función TextoEstatico
devuelve un elemento div
que contiene un elemento p
con el texto "Este es un componente de texto estático". Este componente no recibe ninguna propiedad ni tiene estado.
Para utilizar este componente en una aplicación de React, simplemente se importa y se utiliza como cualquier otro componente:
import TextoEstatico from './components/TextoEstatico/TextoEstatico';
// App.jsx
const App = () => (
<div>
<h1>Aplicación de ejemplo</h1>
<TextoEstatico />
</div>
)
export default App
En este ejemplo, el componente TextoEstatico
se utiliza dentro del componente App
, mostrando el texto estático en la interfaz de usuario.
Aunque este componente no utiliza props ni estado, es importante seguir algunas buenas prácticas:
- Nombrado de componentes: Utiliza nombres de componentes que sean descriptivos y claros. En este caso,
TextoEstatico
describe adecuadamente la función del componente. - Estructura del componente: Incluso para componentes simples, es útil envolver el contenido en un
div
u otro contenedor adecuado para facilitar el estilo y la organización del DOM.
Ejemplo de componente que muestra la fecha actual
En React, podemos crear un componente funcional que muestra la fecha actual utilizando una simple variable que captura la fecha en el momento de la renderización. Este componente se renderiza con la fecha y hora actuales cada vez que es llamado.
Primero, definimos el componente funcional FechaActual
. Este componente toma la fecha y hora actuales utilizando new Date()
y las muestra en pantalla.
// FechaActual.jsx
export default function FechaActual() {
const fecha = new Date().toLocaleString();
return (
<div>
<p>La fecha y hora actual es {fecha}</p>
</div>
);
}
En este ejemplo, FechaActual
es una función que:
- Define una variable
fecha
que almacena la fecha y hora actuales en el momento en que el componente es renderizado. Esto se hace utilizando el métodonew Date().toLocaleString()
, que formatea la fecha y hora en una cadena de texto legible. - Devuelve un elemento
div
que contiene un párrafo (p
). Este párrafo muestra la fecha y hora actuales que se almacenaron en la variablefecha
.
Para utilizar este componente en una aplicación de React, se puede importar y utilizar de la siguiente manera:
import FechaActual from './components/FechaActual/FechaActual';
// App.jsx
const App = () => (
<div>
<h1>Aplicación de ejemplo</h1>
<FechaActual />
</div>
)
export default App;
En este ejemplo, FechaActual se utiliza dentro del componente App, mostrando la fecha y hora actuales en la interfaz de usuario.
Ejemplo de componente que usa una variable
En React, es común crear componentes funcionales que utilizan variables para manejar datos y lógica interna. Estas variables pueden ser simples variables locales dentro del cuerpo de la función del componente o estados locales gestionados con useState
.
A continuación, se muestra un ejemplo de un componente funcional que utiliza una variable local para construir un mensaje:
export default function ComponenteConVariable() {
const mensaje = `El resultado de la suma es ${1 + 1}`;
return (
<div>
<p>{mensaje}</p>
</div>
);
}
En este ejemplo, ComponenteConVariable
realiza las siguientes acciones:
- Se define una variable local
mensaje
que almacena una cadena de texto. Esta cadena de texto se construye utilizando una expresión simple que suma1 + 1
y muestra el resultado dentro del mensaje. - El componente retorna un elemento
div
que contiene un párrafo (p
). Este párrafo muestra el valor de la variablemensaje
.
Ejemplo de componente con una estructura HTML completa
En React, es posible crear componentes funcionales que contengan una estructura HTML completa, incluyendo múltiples elementos y anidaciones. Esto es útil para construir interfaces de usuario complejas y bien estructuradas. A continuación, se muestra un ejemplo de un componente que representa una tarjeta de perfil con varios elementos HTML.
Primero, definimos el componente funcional TarjetaPerfil
:
import './TarjetaPerfil.css';
// TarjetaPerfil.jsx
export default function TarjetaPerfil({ nombre, titulo, descripcion, imagen }) {
return (
<article className='tarjeta-perfil'>
<img src={imagen} alt={`${nombre}'s profile`} className="tarjeta-perfil-imagen" />
<div className="tarjeta-perfil-detalles">
<h2 className="tarjeta-perfil-detalles-nombre">{nombre}</h2>
<h3 className="tarjeta-perfil-detalles-titulo">{titulo}</h3>
<p className="tarjeta-perfil-detalles-descripcion">{descripcion}</p>
</div>
</article>
);
}
En este componente TarjetaPerfil
:
- Se reciben las propiedades
nombre
,titulo
,descripcion
eimagen
. - Se devuelve un
div
con la clasetarjeta-perfil
que contiene una estructura de tarjeta con una imagen y detalles del perfil. - Dentro del
div
principal, se incluye un elementoimg
para la imagen del perfil con la clasetarjeta-perfil-imagen
. - Se anida otro
div
con la clasetarjeta-perfil-detalles-detalles
que contiene:
- Un elemento
h2
para mostrar el nombre con la clasetarjeta-perfil-detalles-nombre
. - Un elemento
h3
para mostrar el título con la clasetarjeta-perfil-detalles-titulo
. - Un elemento
p
para la descripción con la clasetarjeta-perfil-detalles-descripcion
.
Para utilizar este componente en una aplicación de React, se puede importar y utilizar de la siguiente manera:
import TarjetaPerfil from './components/TarjetaPerfil/TarjetaPerfil';
// App.jsx
const App = () => (
<section>
<h1>Aplicación de Ejemplo</h1>
<TarjetaPerfil
imagen={"https://i.pravatar.cc/128"}
nombre={"John Doe"}
titulo={"Software Developer"}
descripcion={"Lorem ipsum dolor sit amet"}
/>
</section>
)
export default App
En este ejemplo, TarjetaPerfil
se utiliza dentro del componente App
, pasando las propiedades nombre
, titulo
, descripcion
e imagen
para representar un perfil de usuario.
Este enfoque permite crear componentes reutilizables y bien estructurados que pueden ser fácilmente personalizados mediante el uso de propiedades. Además, al utilizar clases CSS, se puede aplicar estilos de manera modular y consistente. Aquí se muestra un ejemplo de cómo podrían definirse los estilos CSS para este componente:
/* TarjetaPerfil.css */
.tarjeta-perfil {
--card-color: #1b8bee;
display: grid;
grid-template-columns: 74px 1fr;
align-items: center;
gap: 16px;
width: 428px;
background-color: color-mix(in srgb, var(--card-color), transparent 88%);
border-radius: 0.375rem;
padding: .75rem;
.tarjeta-perfil-imagen {
aspect-ratio: 1;
width: 100%;
border-radius: 50%;
}
.tarjeta-perfil-detalles {
text-align: start;
>* {
margin: 0;
}
.tarjeta-perfil-detalles-nombre {
font-size: 1.25rem;
font-weight: 700;
color: #1f2937;
}
.tarjeta-perfil-detalles-titulo {
font-size: 1rem;
font-weight: 500;
color: #4b5563;
}
.tarjeta-perfil-detalles-descripcion {
font-size: 0.875rem;
font-weight: 400;
color: #6b7280;
}
}
}
Este archivo CSS define estilos para las clases utilizadas en el componente TarjetaPerfil
, asegurando que la tarjeta tenga un diseño moderno y consistente. Estos estilos incluyen un esquema de colores adaptable, disposición en cuadrícula, y espaciado uniforme. Además, se aplican estilos específicos para la imagen de perfil, que se muestra en forma circular, y para los detalles de texto dentro de la tarjeta, como el nombre, el título y la descripción, con tamaños y pesos de fuente que garantizan una jerarquía visual clara y una lectura agradable.
Ejercicios de esta lección Componentes funcionales
Evalúa tus conocimientos de esta lección Componentes funcionales con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado local con useState y useReducer
Estado global con Redux Toolkit
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
Componentes funcionales
Estado global con Context API
Hooks: optimización y concurrencia
Introducción a React y su ecosistema
Introducción a Componentes
Introducción a los Hooks
Navegación programática y redirección
Renderizado iterativo con bucles
Rutas anidadas y rutas dinámicas
Hooks: estado y efectos secundarios
Todas las lecciones de React
Accede a todas las lecciones de React y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A React Y Su Ecosistema
Introducción Y Entorno
Instalar React Y Crear Nuevo Proyecto
Introducción Y Entorno
Introducción A Jsx
Componentes
Introducción A Componentes
Componentes
Componentes Funcionales
Componentes
Eventos En React
Componentes
Props Y Manejo De Datos Entre Componentes
Componentes
Renderizado Condicional
Componentes
Renderizado Iterativo Con Bucles
Componentes
Manejo De Clases Y Estilos
Componentes
Introducción A Los Hooks
Hooks
Estado Y Ciclo De Vida De Los Componentes
Hooks
Hooks Estado Y Efectos Secundarios
Hooks
Hooks Para Gestión De Estado Complejo Y Contexto
Hooks
Hooks Optimización Y Concurrencia
Hooks
Introducción A React Router
Navegación Y Enrutamiento
Definición Y Manejo De Rutas
Navegación Y Enrutamiento
Rutas Anidadas Y Rutas Dinámicas
Navegación Y Enrutamiento
Navegación Programática Redirección
Navegación Y Enrutamiento
Nuevos Métodos Create De React Router
Navegación Y Enrutamiento
Solicitudes Http Con Fetch Api
Interacción Http Con Backend
Solicitudes Http Con Axios
Interacción Http Con Backend
Estado Local Con Usestate Y Usereducer
Servicios Y Gestión De Estado
Estado Global Con Context Api
Servicios Y Gestión De Estado
Estado Global Con Redux Toolkit
Servicios Y Gestión De Estado
Custom Hooks Para Servicios Compartidos
Servicios Y Gestión De Estado
Evaluación Test React
Evaluación
Certificados de superación de React
Supera todos los ejercicios de programación del curso de React y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Entender la sintaxis y estructura básica de un componente funcional en React.
- Aprender a desestructurar props para mejorar la legibilidad del código.
- Manejar elementos children en componentes funcionales.
- Crear componentes funcionales para distintos casos de uso, como mostrar texto estático, la fecha actual o utilizar variables.
- Aplicar buenas prácticas en el nombrado y organización de componentes.
- Integrar componentes funcionales en una aplicación existente de React.