React JS es la biblioteca de JavaScript con mayor demanda laboral en desarrollo front-end, y aprenderla te abre la puerta a construir aplicaciones interactivas, escalables y multiplataforma. Si ya dominas los fundamentos de programación, este recorrido te lleva paso a paso a crear tu primer proyecto desplegable: Todo Machine.

Por qué React JS lidera el desarrollo front-end

React JS se popularizó porque resuelve un problema concreto: construir interfaces que se sientan vivas frente a cada interacción del usuario. Bajo el capó, esto se traduce en tres características técnicas que vas a escuchar mucho.

• Multiplataforma: el mismo código sirve para web, mobile y otros entornos.
• Declarativo: describes qué quieres ver y React se encarga del cómo.
• Basado en componentes: divides la interfaz en piezas reutilizables.

¿Qué es React JS en pocas palabras? Es una biblioteca de JavaScript declarativa y basada en componentes que te permite construir interfaces interactivas y escalables para web y otras plataformas.

Qué necesitas saber antes de empezar con React

Este recorrido no enseña a programar desde cero, así que conviene llegar con ciertos cimientos resueltos. Si todavía no programas, primero pasa por los cursos básicos y vuelve.

Fundamentos de la web y JavaScript moderno

Debes manejar HTML, CSS y JavaScript a nivel funcional. Con JavaScript en particular, es buena idea que ya hayas tocado estos temas al menos una vez:

• EcmaScript y sus versiones.
• Programación orientada a objetos.
• Manipulación del DOM.
• Asincronismo.

No necesitas ser experta o experto. Con conocer cada concepto y haberlo implementado alguna vez tienes suficiente para arrancar.

Herramientas de control de versiones y dependencias

El proyecto es lo suficientemente grande para exigir versionado. Vas a usar GitHub para tener commits, volver a versiones anteriores y no empezar de cero cada vez que algo falle. También necesitas NPM para instalar y manejar dependencias. Si prefieres Yarn o pnpm, funciona igual.

Qué es Todo Machine y cómo se ve el proyecto final

El proyecto que vas a construir se llama Todo Machine y reacciona a cada acción del usuario. Eso es exactamente lo que React hace bien.

En el prototipo y en el deploy final puedes:

• Buscar y filtrar to-dos en tiempo real.
• Marcar como completado un to-do.
• Borrar to-dos existentes.
• Crear nuevos to-dos desde un modal con formulario.

La aplicación se siente viva: abres modales, los cierras, agregas tareas y todo responde al instante. Ese comportamiento será la prueba de que entendiste los fundamentos de React.

¿Para qué sirve React JS en un proyecto real? Sirve para crear interfaces que reaccionan a eventos del usuario sin recargar la página, organizando la UI en componentes reutilizables que escalan a medida que crece la aplicación.

Cómo clonar y levantar el proyecto base de Todo Machine

En la sección de recursos encuentras el repositorio oficial de Platzi con la estructura inicial. La idea es que arranques con un esqueleto funcional para concentrarte en aprender React, no en configurar.

Pasos para iniciar el servidor de desarrollo

Abre tu editor favorito (en mi caso, Visual Studio Code) y ejecuta esta secuencia en la terminal:

1. Clonar el repositorio con git clone usando la URL SSH del proyecto.
2. Entrar a la carpeta generada por la clonación.
3. Instalar dependencias con npm install.
4. Iniciar el servidor de desarrollo con npm start.

Cuando el servidor arranca, abres el navegador en localhost:3000 y deberías ver la primera versión: fondo azul Platzi, el logo girando y un mensaje que indica editar el archivo src/App.js para recargar. Esa es tu base.

Qué pasa si el servidor no levanta en localhost 3000

Si el puerto 3000 está ocupado, NPM te ofrecerá uno alterno automáticamente. Acepta y abre la nueva URL que te muestra la terminal. Si la instalación falla, revisa que tengas Node y NPM en una versión reciente antes de repetir npm install.

¿Qué hace el comando npm start en un proyecto React? Inicia un servidor de desarrollo local que compila tu código, lo sirve en localhost:3000 y recarga el navegador automáticamente cada vez que guardas un cambio.

Qué sigue después de tener el proyecto corriendo

Con el servidor activo, ya tienes lo mínimo para empezar a construir. El siguiente paso es entrar al concepto que sostiene todo en React: los componentes, la unidad básica para dividir la interfaz en piezas reutilizables que luego se combinan para formar la aplicación completa.

Al final del recorrido vas a tener Todo Machine desplegado, funcional y listo para sumarlo a tu portafolio profesional como front-end developer. ¿Ya clonaste el repositorio? Cuéntame en los comentarios en qué puerto te levantó el servidor.