JavaScript o React: qué aprender primero

Introducción: React se apoya en JavaScript

React ayuda a construir interfaces mediante componentes, pero esos componentes se escriben con JavaScript. Si una transformación de datos o una promesa te resulta incomprensible, añadir JSX no elimina la dificultad. Empieza por fundamentos y pasa a React cuando puedas explicar pequeños programas, sin esperar a saber todo el lenguaje.

Qué aprender y requisitos previos

Necesitas manejar archivos HTML, CSS y la consola del navegador. Practica con una lista de tareas sencilla. El objetivo es distinguir problemas del lenguaje, del navegador y de React: un array mal filtrado sigue siendo un problema de JavaScript dentro de un componente.

Variables, funciones, arrays y objetos

Distingue valores, referencias y alcance. Usa funciones con entradas y salidas claras. Practica map para transformar y filter para seleccionar sin modificar el array original. Aprende a acceder a propiedades, usar destructuring y crear copias con spread; recuerda que esas copias son superficiales.

const tareas = [{ id: 1, titulo: "Revisar PR", lista: false }];
const pendientes = tareas.filter(({ lista }) => !lista);
const titulos = pendientes.map(({ titulo }) => titulo);
console.log(titulos);

Módulos y organización

Exporta funciones desde archivos con una responsabilidad y utiliza import donde las necesites. Poder separar una transformación de datos de la interfaz facilita probarla. Evita colocar toda la aplicación en un archivo solo porque el ejemplo inicial era pequeño.

Async/await, fetch y errores

Una petición tarda y puede fallar. Practica async/await y try/catch; comprende que fetch puede resolver incluso con un status HTTP de error. Verifica response.ok antes de interpretar el JSON. Explica qué mostrará la pantalla durante la espera y qué podrá hacer el usuario si falla.

DOM básico antes de los componentes

Crea un formulario con addEventListener, lee su valor y actualiza texto con textContent. Esto permite entender eventos y cambios visibles. Cuando pases a React, describe la interfaz con props y estado; evita modificar manualmente los mismos nodos que React controla.

Cuándo pasar a React

Estás en condiciones de empezar si puedes filtrar una lista, separar una función en otro módulo, responder a un evento y cargar datos explicando el camino de error. Recrea entonces tu lista con componentes, props y estado. Compara qué responsabilidad tenía el DOM manual y cuál asume ahora React.

Señales de que faltan fundamentos

Si copias map sin saber qué devuelve, confundes el resultado de una promesa con sus datos o no puedes localizar una variable fuera de alcance, practica ese concepto aislado. No intentes resolver cada duda añadiendo otra biblioteca. Alterna ejercicios pequeños con un proyecto que les dé contexto.

Qué practicar después

Construye la misma lista primero con JavaScript y después con React. Añade búsqueda y estado vacío; escribe qué lógica reutilizaste. Si todavía necesitas trabajar HTML, CSS y programación inicial, el programa Desde cero puede ser un punto de partida antes de Frontend.

Guías relacionadas

• Instalar Node.js
• Qué debe saber un Frontend Junior para trabajar en un equipo
• Cómo consumir una API REST con JavaScript y React

¿Quieres aprender esto dentro de un flujo profesional?