Objetivos Generales:

Que los alumnos comprendan los fundamentos del desarrollo web y aprendan a construir aplicaciones interactivas con ReactJS (nivel inicial)

Contenidos

Clase 1: Introducción al Desarrollo Web (HTML y CSS)

Objetivo: Conocer la estructura de una página web y los fundamentos de HTML y CSS.

• ¿Qué es el desarrollo web? Diferencia entre frontend y backend.

• HTML: etiquetas esenciales

• CSS: selectores, propiedades básicas (colores, fuentes, márgenes, flexbox).

• Introducción a CSS Grid y Flexbox.

• Ejercicio: Crear una página web sencilla con estructura HTML y estilos CSS.

Clase 2: Fundamentos de JavaScript para React

Objetivo: Entender la base de JavaScript antes de trabajar con React.

• Variables (let, const y var).

• Tipos de datos (números, strings, arrays, objetos).

• Funciones y arrow functions.

• Manipulación del DOM (document.querySelector, addEventListener).

• Introducción a map() y filter().

• Ejercicio: Crear una lista de elementos dinámicos con JavaScript.

Clase 3: Introducción a React y JSX

Objetivo: Instalar React y comprender la sintaxis JSX.

• ¿Qué es React y por qué usarlo?

• Instalación de Node.js y configuración del entorno con Vite o Create React App.

• JSX: diferencias con HTML y cómo funciona internamente.

• Creación de un primer componente React y su renderizado en el DOM.

• Ejercicio: Crear un componente Card con contenido dinámico.

Clase 4: Componentes y Props

Objetivo: Crear componentes reutilizables y pasar datos con props.

• Creación de componentes funcionales.

• Uso de props para personalizar componentes.

• Desestructuración de props y valores por defecto.

• Comunicación entre componentes (padre a hijo).

• Ejercicio: Crear un componente ProductCard para mostrar información de un producto.

Clase 5: Estado y Eventos en React

Objetivo: Manejar el estado con useState y eventos en React.

• Introducción a useState para manejar datos dinámicos.

• Eventos en React (onClick, onChange, onSubmit).

• Manejo de formularios en React.

• Ejercicio: Crear un formulario con validaciones básicas y actualización del estado

Clase 6: Renderizado Condicional y Listas en React

Objetivo: Controlar el flujo de la UI y manejar listas de datos.

• Renderizado condicional con operadores ternarios y &&.

• Renderizado de listas con .map().

• Uso de key en listas de React.

• Ejercicio: Crear una lista de tareas (to-do list) con eliminación de elementos.

Clase 7: React Router y Consumo de APIs con Fetch

Objetivo: Implementar navegación y obtener datos de una API.

• Instalación y configuración de React Router.

• Creación de rutas dinámicas.

• Navegación entre páginas con Link y useNavigate.

• Introducción a useEffect y consumo de APIs con fetch.

• Ejercicio: Crear una app con dos páginas y datos obtenidos de una API.

Destinatarios

Personas interesadas en el tema. Al ser un curso introductorio, no es necesario tener conocimientos previos, pero serán de utilidad para los asistentes los conocimientos sobre HTML, CSS o JavaScript.