React — Iniciación

Este curso está dirigido a desarrolladores con conocimientos básicos de HTML, CSS y JavaScript que se aproximan por primera vez al ecosistema React y desean entender cómo esta biblioteca transforma la manera de construir interfaces de usuario en el Frontend. A lo largo de las 8 horas, el participante descubrirá qué es React y por qué se diferencia del desarrollo vanilla, aprenderá a poner en marcha un proyecto real desde la terminal, comprenderá la anatomía de los componentes funcionales escritos en JSX y comenzará a trabajar con los mecanismos fundamentales de la biblioteca: props, estado con useState, renderizado condicional y listas dinámicas. Al finalizar, el participante será capaz de construir de forma guiada una pequeña aplicación React funcional con componentes interactivos que respondan a eventos de usuario, sentando así una base sólida para continuar hacia niveles intermedios de la competencia.

1. Describir el papel de React dentro del ecosistema Frontend moderno y explicar, con un ejemplo propio, en qué se diferencia del desarrollo con HTML, CSS y JavaScript estándar.
2. Crear un proyecto React funcional usando Vite o Create React App desde la terminal y verificar que la aplicación arranca correctamente en el navegador.
3. Identificar los elementos que componen un componente funcional escrito en JSX —función, retorno, etiquetas y expresiones dinámicas— señalando sus diferencias sintácticas respecto a HTML estándar.
4. Aplicar el paso de props entre componentes padre e hijo para renderizar datos dinámicos en la interfaz.
5. Utilizar el hook useState para gestionar el estado local de un componente y actualizar la interfaz en respuesta a eventos de usuario.
6. Implementar renderizado condicional con operadores ternarios o && y renderizado de listas con .map() incluyendo la prop key única.
7. Reconocer y corregir errores comunes de React reportados en la consola del navegador y en el compilador, describiendo su causa y la solución aplicada.

Bloque 1 — React en contexto y puesta en marcha del entorno El curso abre situando React dentro del ecosistema Frontend actual: se examina qué problema resuelve, cómo se relaciona con el navegador y en qué se distingue del desarrollo con HTML, CSS y JavaScript puro. A partir de ese marco conceptual, el participante configura su primer proyecto real mediante Vite o Create React App, ejecuta los comandos necesarios desde la terminal y comprueba que la aplicación arranca en el navegador sin errores, familiarizándose de paso con la estructura de carpetas generada.

Bloque 2 — Componentes funcionales y JSX Con el entorno operativo, se profundiza en la unidad básica de React: el componente funcional. Se analiza su anatomía —declaración de la función, instrucción de retorno, etiquetas JSX y expresiones dinámicas entre llaves— y se identifican al menos tres diferencias sintácticas relevantes respecto a HTML estándar. El participante practica la escritura y composición de componentes sencillos, consolidando el modelo mental que sustenta toda la biblioteca.

Bloque 3 — Props, estado e interactividad Este bloque aborda los dos mecanismos que hacen que una interfaz React sea dinámica. En primer lugar se trabaja el flujo de datos descendente mediante props: el participante pasa atributos —nombre, imagen, precio u otros— de un componente padre a uno hijo y observa cómo se reflejan en pantalla. A continuación se introduce el hook useState para gestionar estado local, aplicándolo a un contador o formulario simple que reacciona a eventos onClick o onChange. El bloque cierra con el renderizado condicional mediante operadores ternarios y &&, mostrando u ocultando contenido en función del valor del estado.

Bloque 4 — Listas dinámicas y diagnóstico de errores El curso concluye con dos capacidades de uso cotidiano. Por un lado, el renderizado de listas de objetos mediante .map(), prestando atención a la prop key única y a las implicaciones de su ausencia para el rendimiento y la estabilidad del árbol de componentes. Por otro, el reconocimiento y la corrección de los errores más frecuentes que reporta React en la consola del navegador y en el compilador —key ausente, componente declarado en minúscula, retorno de múltiples raíces— de modo que el participante adquiera autonomía básica para depurar su propio código desde el primer día.

• Sistema operativo: Windows 10/11, macOS 12 o superior, o cualquier distribución Linux moderna.
• Node.js: versión 18 LTS o superior (incluye npm). Se puede gestionar con nvm o fnm.
• Gestor de paquetes: npm (incluido con Node.js) o yarn instalado globalmente.
• Editor de código: Visual Studio Code con la extensión ES7+ React/Redux/React-Native snippets y Prettier para formateo automático.
• Navegador: Google Chrome o Firefox en su versión más reciente, con las DevTools de React (extensión React Developer Tools) instaladas.
• Terminal: cualquier terminal integrada o externa con acceso a node, npm/yarn y git.
• Conectividad: conexión a Internet para la descarga de dependencias mediante npm/yarn durante la creación del proyecto.

Para aprovechar este curso es necesario manejar con soltura los fundamentos de HTML (estructura de documentos y etiquetas principales), CSS (selectores, modelo de caja y estilos básicos) y JavaScript (variables, funciones, arrays, objetos y manejo de eventos en el DOM). Se recomienda también tener instalados Node.js y un gestor de paquetes (npm o yarn) y haber trabajado previamente con la terminal de comandos, ya que el entorno de desarrollo se levanta desde línea de comandos desde la primera sesión.