De las diversas formas en las que fue construido Platzi store, una de ellas fue usando Hooks, una gran característica que es elemental para el desarrollo de apps con react.js hoy en día, si quieres aprender a usar los Hooks mira este curso.
Introducción
Migración y Configuración Avanzada de Webpack 5 con TypeScript
Configuración y Optimización de Proyectos con Webpack y TypeScript
Webpack en el Backend
Configuración Básica de Express y Webpack para Proyectos Node.js
Configuración de Webpack para Proyectos con Express
Migración de Aplicaciones Node.js a TypeScript paso a paso
Configuración de API Rest con TypeScript y JSON para Platzi Store
Webpack en el Frontend
Migración y Optimización de Proyectos con Webpack 5
Configuración de Webpack para Desarrollo y Producción en React
Creación de Hooks para Consumo de APIs en React con Axios
"Implementación de Context en React para Gestión de Estado"
Configuración de Alias en Webpack para Proyectos JavaScript
Optimización de Imágenes y Uso de CDN en Proyectos Web
Optimización de Imágenes PNG con Image Minimiser Webpack Plugin
Configuración de TypeScript en React con Webpack
Configuración de Hot Reload en Webpack con React
División de Código con Lazy Loading en React
División de Código con Webpack y Micro Frontend en React
Configuración Avanzada de Webpack para Separar Código y Dependencias
Despliegue
Despliegue de Aplicaciones Web con Netlify y GitHub
Despliegue de API en Heroku con Express y TypeScript
Conexión de un Dominio Personalizado a Netlify y Cloudflare
Migración de Wetpack y Optimización para Producción
Configuración y Optimización de Proyectos con Webpack y TypeScript
2/22Recursos
Transcripción
¿Qué es PlatziStorm y cómo optimizarlo?
PlatziStorm es un proyecto creado con React que servirá como base para explorar configuraciones avanzadas con Webpack. El objetivo es optimizar imágenes, mejorar la eficiencia del proyecto, y preparar tanto su versión de desarrollo como su versión de producción. Además, se integrarán otras herramientas y configuraciones esenciales para un proyecto de vanguardia.
¿Cómo optimizar con Webpack?
-
Optimización de Imágenes: Webpack proporciona plugins como
image-webpack-loaderque permite optimizar el peso de las imágenes, aumentando así el rendimiento del proyecto. -
Preparación para Producción: Configurar Webpack para generar un bundle más pequeño y eficiente optimizando el código JavaScript y CSS.
-
Uso de un CDN: La integración con un Content Delivery Network (CDN) mejora la velocidad y la entrega del contenido a los usuarios.
¿Cómo integrar express y TypeScript con Webpack?
Para manejar las peticiones y respuestas del back-end, se creará una API con Express que será optimizada con Webpack. Además, se implementará TypeScript para mejorar el manejo de tipos y la mantenibilidad del código.
-
Instalación básica de Express: Permite crear servidores y rutas para manejar las API del proyecto.
-
Integración de TypeScript: Aumenta la robustez del código y facilita la detección de errores de tipo en desarrollo.
-
Desplegar en Heroku: Tras optimizar con Webpack, el proyecto se preparará para despliegue en plataformas en la nube como Heroku.
¿Cómo sacar provecho de Webpack 5?
Este proyecto está basado en una versión previa de Webpack, por lo que se actualizarán varias características para aprovechar las mejoras de Webpack 5:
-
Module Federation: Facilita la carga dinámica de módulos y componentes de otras aplicaciones, potenciando arquitecturas de microfrontends.
-
Caching Mejorado: Reduce el tiempo de recompilación y aumenta la velocidad de ejecución del proyecto.
-
Tree Shaking Avanzado: Elimina el código muerto, manteniendo solo lo necesario para la producción.
¿Cómo transformar la aplicación con recursos modernos de React?
A medida que optimizamos con Webpack, también se aplicarán las últimas prácticas en React:
-
Componentes Funcionales y Hooks: Facilitan un código más limpio y gestionan el estado de manera efectiva.
-
Lazy Loading y Suspense: Ayudan a cargar componentes de manera asíncrona mejorando la eficiencia.
En resumen, este proyecto servirá para poner en práctica técnicas avanzadas de optimización, integrando herramientas modernas y mejorando tanto el backend como el frontend de la aplicación. ¡Aprovecha cada módulo para fortalecer tus conocimientos y habilidades en desarrollo web moderno!
Aportes 1
Preguntas 1
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?