Introducción a React

El taller «Introducción a React» está diseñado para principiantes y aspirantes a desarrolladores de front-end que desean iniciar su viaje al mundo de React.js. React se ha convertido en la piedra angular del desarrollo web moderno, ya que ofrece una forma potente y eficiente de crear interfaces de usuario dinámicas y con capacidad de respuesta. En este taller, los participantes emprenderán una exploración guiada de los conceptos básicos, la arquitectura de componentes y las herramientas esenciales de React. A través de una combinación de conferencias, ejercicios prácticos y aprendizaje basado en proyectos, los asistentes obtendrán una base sólida en el desarrollo de React y comenzarán a crear sus propias aplicaciones web interactivas.

Orden del día

Comprender los fundamentos de React

• Introducción a React y su papel en el desarrollo web moderno
• Conceptos clave: DOM virtual, JSX, componentes y administración de estados
• Descripción general del ecosistema y las herramientas de React (por ejemplo, Create React App, React Developer Tools)

Configuración de un entorno de desarrollo de React

• Instalación de Node.js y npm/yarn
• Crear un nuevo proyecto de React con la aplicación Create React
• Exploración de la estructura del proyecto y los archivos esenciales

Construyendo tu primer componente de React

• Anatomía de un componente de React: componentes de función frente a componentes de clase
• Escribir JSX para definir la estructura de los componentes y la interfaz de usuario
• Representación de componentes dentro del DOM mediante ReactDOM

Comprender el estado de React y los accesorios

• Introducción al estado de los componentes y los accesorios
• Administración del estado de los componentes con useState hook
• Pasar datos a los componentes mediante accesorios

Manejo de eventos en React

• El sistema de gestión de eventos de React
• Controladores de eventos vinculantes y argumentos de paso
• Actualización del estado de los componentes en función de las interacciones de los usuarios

Trabajando con listas y representación condicional

• Representación de listas de datos con el método map ()
• Representación condicional en React usando sentencias if y operadores ternarios
• Uso de la función key prop para una representación eficiente de las listas

Diseño de componentes de React

• Estilo en línea frente a CSS externo
• Uso de módulos CSS para estilos con alcance
• Explorando bibliotecas populares de CSS-in-JS para React

Introducción a React Router

• Configuración del enrutamiento del lado del cliente con React Router
• Creación de rutas, rutas anidadas y parámetros de ruta
• Navegar entre diferentes vistas en una aplicación React

Creación de una aplicación dinámica de React

• Integración de bibliotecas de administración estatal como Redux o useContext/UseReducer
• Obtención de datos de API externas mediante el gancho useEffect
• Creación de componentes de interfaz de usuario interactivos con React Hooks

Diseño responsivo con React

• Implementación de diseños adaptables mediante consultas de medios CSS
• Creación de interfaces de usuario aptas para dispositivos móviles con React
• Exploración de bibliotecas y marcos de diseño responsivos

Despliegue de su aplicación React

• Optimización de la aplicación React para la producción
• Creación de una compilación de producción con npm/yarn
• Implementación de aplicaciones React en plataformas de alojamiento populares (por ejemplo, Netlify, Vercel)

Al final del taller «Introducción a React», los participantes habrán adquirido una sólida comprensión de los fundamentos de React y las habilidades necesarias para crear aplicaciones web dinámicas y adaptables. Dispondrán de los conocimientos y la confianza necesarios para continuar su camino en el desarrollo de React y explorar temas y técnicas más avanzados para crear interfaces web modernas.