{titulo}
{/* Prop: no cambia */}Por: {autor}
{/* Prop: no cambia */}
Volver al blogBack to blog
React ha revolucionado la forma en que construimos interfaces de usuario. Con más de 200,000 estrellas en GitHub y usado por empresas como Meta, Netflix, Airbnb y Uber, es una de las tecnologías más demandadas en el mercado laboral.
React has revolutionized the way we build user interfaces. With over 200,000 stars on GitHub and used by companies like Meta, Netflix, Airbnb, and Uber, it is one of the most in-demand technologies in the job market.
En este artículo vamos a desmitificar los conceptos fundamentales de React: componentes, props y state. Si vienes de HTML/CSS/JavaScript vanilla, verás que la curva de aprendizaje no es tan empinada como parece.
In this article we will demystify the fundamental concepts of React: components, props, and state. If you come from HTML/CSS/vanilla JavaScript, you'll see that the learning curve is not as steep as it seems.
🧩 ¿Qué es un Componente?🧩 What is a Component?
En React, todo es un componente. Piensa en ellos como piezas de LEGO: pequeños bloques reutilizables que juntos forman interfaces complejas. Un botón, un menú, una tarjeta de producto... cada uno puede ser un componente independiente.
In React, everything is a component. Think of them as LEGO pieces: small reusable blocks that together form complex interfaces. A button, a menu, a product card... each one can be an independent component.
La magia está en que escribes el componente una vez y lo reutilizas en toda tu aplicación (o incluso en otros proyectos):
The magic is that you write the component once and reuse it throughout your application (or even in other projects):
// Componente de clase (forma tradicional)
import React, { Component } from 'react';
class Saludo extends Component {
render() {
return (
¡Hola Mundo!
Bienvenido a React
);
}
}
export default Saludo;💡 El método render()💡 The render() Method
El render() es obligatorio en componentes de clase. Se ejecuta cada vez que el estado cambia, actualizando la UI automáticamente. React se encarga de optimizar qué partes del DOM realmente necesitan actualizarse.
The render() method is mandatory in class components. It runs every time the state changes, updating the UI automatically. React takes care of optimizing which parts of the DOM actually need to be updated.
⚡ Componentes Funcionales (El estándar moderno)⚡ Functional Components (The Modern Standard)
Desde React 16.8, los componentes funcionales con Hooks se han convertido en la forma recomendada de escribir React. Son más concisos, fáciles de testear y permiten reutilizar lógica entre componentes:
Since React 16.8, functional components with Hooks have become the recommended way to write React. They are more concise, easier to test, and allow reusing logic between components:
// Componente funcional moderno
const Calculadora = ({ num1, num2 }) => {
const resultado = num1 + num2;
return (
{num1} + {num2} = {resultado}
);
};
// Uso del componente
Los componentes siempre deben iniciar con mayúsculas. Es buena práctica y es lo que nos dice la documentación oficial de React.
Components must always start with uppercase letters. It's a best practice and it's what the official React documentation tells us.
📨 Props: Comunicación entre componentes📨 Props: Communication Between Components
¿Qué son los Props?What are Props?
Los props (propiedades) son el mecanismo de React para pasar datos de padres a hijos. Son inmutables: el componente hijo los recibe pero no puede modificarlos.
Props (properties) are React's mechanism for passing data from parent to child components. They are immutable: the child component receives them but cannot modify them.
// Componente que recibe y muestra props
const TarjetaUsuario = ({ nombre, rol, avatar }) => {
return (
{nombre}
{rol}
);
};
// Uso: el padre pasa los datos
🔄 State: Datos que cambian🔄 State: Data That Changes
¿Qué es el State?What is State?
El state es el estado interno de un componente. A diferencia de los props, el state sí puede cambiar. Cuando cambia, React re-renderiza automáticamente el componente.
The state is the internal state of a component. Unlike props, the state can change. When it changes, React automatically re-renders the component.
import React, { useState } from 'react';
const Contador = () => {
// useState retorna: [valor actual, función para actualizarlo]
const [count, setCount] = useState(0);
return (
Contador: {count}
);
};🆚 Props vs State: La diferencia clave🆚 Props vs State: The Key Difference
// Props: datos que VIENEN del padre (read-only)
// State: datos que PERTENECEN al componente (read-write)
const ArticuloCard = ({ titulo, autor }) => { // Props ↓
const [likes, setLikes] = useState(0); // State ↓
const [saved, setSaved] = useState(false); // State ↓
return (
);
};🔗 useEffect: El ciclo de vida moderno🔗 useEffect: The Modern Lifecycle
El hook useEffect nos permite ejecutar efectos secundarios: llamadas a APIs, suscripciones, manipulación del DOM, etc.
The useEffect hook allows us to run side effects: API calls, subscriptions, DOM manipulation, etc.
import React, { useState, useEffect } from 'react';
const UserProfile = ({ userId }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Se ejecuta cuando userId cambia
const fetchUser = async () => {
try {
setLoading(true);
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
setUser(data);
} catch (err) {
setError('Error cargando usuario');
} finally {
setLoading(false);
}
};
fetchUser();
}, [userId]); // Dependencia: se re-ejecuta si userId cambia
if (loading) return Cargando...;
if (error) return {error};
return (
{user.name}
{user.email}
);
};🎯 Conclusión🎯 Conclusion
Estos tres conceptos —componentes, props y state— son los pilares de React. Una vez que los domines, estarás listo para explorar patrones más avanzados como Context, useReducer, custom hooks y más.
These three concepts —components, props, and state— are the pillars of React. Once you master them, you'll be ready to explore more advanced patterns like Context, useReducer, custom hooks, and more.
React potencia aplicaciones como Instagram, WhatsApp Web, Netflix y Airbnb. Aprenderlo es una inversión que vale la pena. ¡Ahora es tu turno de experimentar!
React powers applications like Instagram, WhatsApp Web, Netflix, and Airbnb. Learning it is an investment worth making. Now it's your turn to experiment!