Entornos de trabajo
A continuación, encintara los enlaces de las configuraciones que debe hacer en VSCode para que pueda trabajar cómodamente con React.
- Entorno de trabajo para React: instala y configura un entorno con las herramientas básicas para poder usar React.
- Las herramientas de formateo y análisis de código son necesarias para trabajar con React en Configurar VSCode con ESLint y Prettier
React básico
¿Qué es React?
React es una biblioteca de JavaScript que permite crear componentes de interfaces de manera declarativa, componentizada y reactiva.
Instalar React
Para trabajar con react es necesario instalar NodeJs y tener un manejador de paquetes como npm.
Trabajamos con Vite en los siguientes, aprende Cómo instalar y usar NVM para gestionar versiones de Node.js en Ubuntu y Windows.
Crear proyecto react
npm create vite@latest
Ejecutar el servidor
npm run dev
Estructura de un proyecto React
Conocer los archivos principales, index.js, App.js, carpetas, etc.
Aprender a organizar los componentes y sus archivos.
JSX
Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
Componentes
Crear componentes funcionales, importar y usarlos.
- Añade estilos
- Muestra datos
- Aprende de la estructura de un componente
Props en componentes react
Los props son un mecanismo para pasar datos de un componente padre a un componente hijo.
Eventos en React
Manejar onClick, onChange, onSubmit, funciones de evento.
Renderizado condicional
if, ternarios, && Componentes que se muestran/ocultan
Listas y Keys
.map() en JSX Uso de key
Estado en React
Estados básicos del componente en React
Damos un repaso de los estados básicos como:
- useState
- useEffect
- useContext
Entre otros.
Comunicación entre componentes: Props drilling, Lifting state up
Hooks esenciales
useEffect: ciclo de vida: useRef,useMemo, useCallback (opcional, pero recomendado)
Arquitectura frontend
Estilos en React CSS tradicional, CSS Modules, Librerías de estilos: Tailwind, styled-components (opcional)
Formularios avanzados: Validaciones, Librerías como react-hook-form
Context API: Crear contextos, Proveedor y consumidor, Reemplazo del props drilling
Routing con React Router: Instalación y configuración, Rutas dinámicas, Navegación entre páginas, useParams, useNavigate