Hace un par de años, en mi primer trabajo como desarrollador, me pidieron que hiciera un botón con React. Yo no sabía ni qué era un componente. Pasé tres días leyendo documentación oficial y sintiéndome estúpido. Luego entendí algo: la mayoría de tutoriales asumen que ya sabes JavaScript moderno, y si vienes de HTML/CSS puro, te pierdes. Esta guía es lo que me hubiera gustado tener ese primer día.
React desde cero: lo que nadie te cuenta al empezar
Respuesta Rápida
React es una biblioteca de JavaScript para construir interfaces de usuario. Esta guía te explica los conceptos básicos (componentes, estado, props) con ejemplos prácticos para que empieces a programar desde ya.
desarrollador frontend autodidacta
"Mi primer proyecto con React fue un contador de clics. Sonaba sencillo, pero me pasé dos horas sin entender por qué el número no se actualizaba en pantalla. Resulta que estaba modificando una variable local en vez de usar el estado. Cuando por fin vi el número cambiar, grité. Literalmente."
🔍 Por qué sucede esto
El problema principal al aprender React es que mezcla conceptos nuevos (componentes, JSX, estado) con fundamentos de JavaScript que muchos principiantes no dominan. La documentación oficial está bien, pero asume que sabes `map`, `filter`, `arrow functions` y `destructuring`. Si no, te chocas contra un muro. Además, los tutoriales suelen saltar directo a proyectos complejos (todo-list, apps del clima) sin explicar por qué se escribe de cierta forma.
🔧 5 Soluciones
1
Domina JavaScript moderno antes de React
Asegúrate de entender las funciones flecha, map, filter, destructuring y template literals.
-
1
Aprende funciones flecha y template literals — Practica escribiendo `const suma = (a,b) => a + b` y usando `${variable}` en strings. Haz 10 ejemplos.
-
2
Domina map y filter con arrays — Crea un array de números y usa `array.map()` para duplicarlos, y `filter()` para quedarte con los pares. Hazlo 5 veces hasta que salga sin pensar.
-
3
Entiende destructuring de objetos y arrays — Toma un objeto `{nombre: 'Ana', edad: 30}` y extrae sus propiedades con `const {nombre, edad} = obj`. Haz lo mismo con arrays.
Usa la consola del navegador para probar cada concepto. No pases a React hasta que puedas hacer estos ejercicios sin mirar internet.
Producto Recomendado
JavaScript: The Good Parts (Douglas Crockford)
Por qué ayuda: Un libro clásico que explica los fundamentos de JavaScript de forma clara y concisa.
Podemos recibir una pequeña comisión — sin costo adicional para ti.
2
Crea tu primer componente con Create React App
Configura un proyecto React desde cero y crea un componente simple.
-
1
Instala Node.js y Create React App — Descarga Node.js desde nodejs.org (versión LTS). Luego abre la terminal y escribe: `npx create-react-app mi-primera-app`.
-
2
Inicia el servidor de desarrollo — Dentro de la carpeta `mi-primera-app`, ejecuta `npm start`. Se abrirá el navegador con la página predeterminada de React.
-
3
Modifica App.js para mostrar un mensaje — Abre `src/App.js`, borra todo y escribe: `function App() { return <h1>Hola, mundo</h1>; } export default App;`. Verás el cambio en el navegador.
No te asustes si ves muchos archivos. Concéntrate solo en `src/App.js` y `src/index.js` por ahora.
Producto Recomendado
Node.js LTS Installer
Por qué ayuda: Necesitas Node.js para ejecutar Create React App y gestionar paquetes.
Podemos recibir una pequeña comisión — sin costo adicional para ti.
3
Entiende JSX mezclando HTML con JavaScript
Aprende la sintaxis de JSX y cómo insertar variables y expresiones.
-
1
Muestra una variable dentro de JSX — En App.js, declara `const nombre = 'María';` y luego usa `{nombre}` dentro del JSX: `<h1>Hola, {nombre}</h1>`.
-
2
Usa expresiones y condicionales — Prueba `{2 + 2}` y `{edad >= 18 ? 'Mayor' : 'Menor'}` directamente en el JSX.
-
3
Aplica estilos inline — Agrega un estilo con `style={{ color: 'blue', fontSize: '20px' }}` a un elemento. Nota que las propiedades van en camelCase.
JSX parece HTML, pero recuerda: en lugar de `class` usa `className`, y en lugar de `for` usa `htmlFor`. Es JavaScript disfrazado.
4
Maneja el estado con el hook useState
Aprende a usar useState para que tus componentes recuerden información y se actualicen.
-
1
Importa useState desde React — Al inicio de App.js, agrega: `import React, { useState } from 'react';`.
-
2
Declara una variable de estado — Dentro del componente, escribe: `const [contador, setContador] = useState(0);`. Esto crea una variable `contador` con valor inicial 0.
-
3
Muestra y actualiza el estado con un botón — Agrega un botón que al hacer clic ejecute `setContador(contador + 1)`. Muestra el valor de `contador` en el JSX. Prueba hacer clic varias veces.
Nunca modifiques el estado directamente (ej: `contador++`). Siempre usa la función setter (setContador) para que React sepa que debe re-renderizar.
Producto Recomendado
Logitech M185 Mouse
Por qué ayuda: Un ratón cómodo para largas sesiones de programación mientras aprendes React.
Podemos recibir una pequeña comisión — sin costo adicional para ti.
5
Pasa datos entre componentes con props
Aprende a comunicar componentes padre e hijo mediante props.
-
1
Crea un componente Saludo — En un nuevo archivo `Saludo.js`, escribe: `function Saludo(props) { return <p>Hola, {props.nombre}</p>; } export default Saludo;`.
-
2
Usa el componente en App.js — Importa Saludo y úsalo: `<Saludo nombre='Carlos' />`. Verás el mensaje personalizado.
-
3
Pasa múltiples props — Agrega más atributos como `edad` y `ciudad`, y muéstralos en el componente Saludo. Por ejemplo: `<Saludo nombre='Ana' edad={25} />`.
Las props son de solo lectura. No intentes modificarlas dentro del componente hijo. Si necesitas cambiar datos, el estado debe vivir en el padre.
⚠️ Cuándo buscar ayuda profesional
Si después de dos semanas sigues sin entender cómo funciona el flujo de datos (estado y props) o no logras hacer que un botón actualice la pantalla, busca un mentor o un curso estructurado. A veces una explicación en vivo despeja dudas que un tutorial no resuelve. También considera unirte a comunidades como r/reactjs o el Discord de freeCodeCamp.
Aprender React no es un camino recto. Vas a tropezar con conceptos como el estado asíncrono, los efectos secundarios y el enrutamiento. Pero si empiezas con lo básico —componentes, JSX, useState y props— ya tienes el 80% de lo que necesitas para construir cosas útiles. No intentes abarcar todo de golpe. Haz un contador, luego un formulario, luego una lista de tareas. Cada proyecto te enseñará algo nuevo. Y cuando te sientas perdido, recuerda que hasta los desarrolladores con años de experiencia buscan en Google cómo hacer un fetch de datos. Es parte del oficio.
❓ Preguntas Frecuentes
¿Necesito saber JavaScript para aprender React?
Sí, necesitas al menos lo básico: variables, funciones, arrays, objetos y métodos como map y filter. Si no los dominas, te costará mucho más. Dedica un par de semanas a JavaScript moderno antes de React.
¿Qué es JSX y por qué se usa en React?
JSX es una extensión de sintaxis que te permite escribir HTML dentro de JavaScript. React la usa porque es más legible que crear elementos con JavaScript puro. Por ejemplo, `<h1>Hola</h1>` en JSX se traduce a `React.createElement('h1', null, 'Hola')`.
¿Cuál es la diferencia entre estado y props?
El estado (state) es interno al componente y puede cambiar con useState. Las props son datos que el componente recibe de su padre y no pueden modificarse. Piensa en props como argumentos de función y estado como variables locales.
¿Cómo empiezo un proyecto React desde cero?
La forma más fácil es con Create React App: abre la terminal y escribe `npx create-react-app mi-app`. Luego entra a la carpeta con `cd mi-app` y ejecuta `npm start`. En minutos tendrás un proyecto funcionando.
¿React es un framework o una biblioteca?
React es una biblioteca (library) para construir interfaces de usuario. A diferencia de frameworks como Angular, React no impone una estructura completa; te da libertad para elegir otras herramientas (enrutador, manejo de estado, etc.).
💬 Comparte tu Experiencia
¡Comparte tu experiencia — ayuda a otros con el mismo reto!