Clase 26 de 27 • Curso de SolidJS
Contenido del curso
Desarrollo Web Avanzado con Solid.js: Reactividad Eficiente
Python para Principiantes: Fundamentos y Aplicaciones Básicas
Uso de Signals en Solid.js para Datos Reactivos
Uso de Create Effects en Solid.js
Memos y Signals Derivados en Solid para Optimizar Actualizaciones
Introducción a SolidJS
Reactividad: Conceptos Prácticos y Aplicaciones en Solid
Creación de una Librería Reactiva MiniSolid desde Cero
Implementación de Signals en Librería Reactiva Solid
Creación de Efectos Reactivos en Librerías Web
Signals Derivados: Mejora y Optimización en Aplicaciones Reactivas
Implementación de `createMemo` en Sistemas Reactivos
Renderizado Reactivo en Solid: Uso de DOM Expressions
Reactividad a profundidad
Implementación de TodoApp con Solid.js y Tailwind CSS
Implementación de Dark Mode con SolidJS y TailwindCSS
Renderizado Condicional en Solid: Técnicas y Optimización
Renderizado de listas y optimización con SolidJS
Manejo de Eventos en Elementos HTML con SolidJS
Renderizado en Solid
Creación y Uso de Componentes en Solid para Mejora de Aplicaciones
Uso de Props para Comunicación entre Componentes en React
Manejo de Eventos y Corrección de Errores en Aplicaciones React
Uso de Local Storage para Guardar Estado de Aplicación Web
Despliegue de Aplicaciones Web con Netlify y SolidJS
Solid: Sistema Reactivo y Desafíos en Desarrollo Web
Componentes
Hacer deploy de una aplicación web puede parecer un reto complicado, pero con herramientas como Netlify, este proceso se simplifica enormemente. Netlify es conocido por su versatilidad y facilidad de uso, especialmente cuando trabajamos con frameworks como Solid. Aquí te explicamos paso a paso cómo puedes implementar tu aplicación en este popular platform.
Para comenzar, asegurémonos de que nuestra aplicación esté lista para producción. Solid ya nos proporciona comandos útiles en el archivo README de nuestro proyecto. El que nos interesa ahora es npm run build. Este comando compila nuestra aplicación, generando todos los archivos necesarios para la producción en una carpeta llamada dist.
npm run build
Ejecuta este comando en tu consola, después de detener cualquier servidor local que esté en funcionamiento. Una vez completado, la carpeta dist contendrá todo lo necesario para subir tu aplicación a la nube–ya sea Netlify u otro proveedor de hosting.
Aunque existen múltiples métodos para hacer deploy, usar Netlify Drop es quizás el más directo. Al visitar netlify.com/drop, puedes subir tu sitio simplemente arrastrando y soltando tu carpeta dist en la página.
netlify.com/drop.dist desde tu explorador de archivos al área especificada en la página.Este método es ideal para quienes buscan una implementación rápida sin complicarse con configuraciones adicionales.
Una vez que tu aplicación está en la nube, es crucial verificar que todo funcione según lo esperado. Puedes hacer esto accediendo al enlace que Netlify genera para tu sitio.
Prueba funcionalidades clave: Asegúrate de que todas las funciones, como el modo "dark" y cambios de estado, se manejen adecuadamente. Los cambios en el estado de los ítems, la adición de nuevos elementos y la persistencia en localStorage deben funcionar sin problemas.
Verifica el almacenamiento local: Prueba refrescando la página para comprobar que las configuraciones se mantienen almacenadas.
Un ejemplo de este proceso podría ser el siguiente:
localStorage.Finalmente, animamos a los desarrolladores a compartir sus logros. No dudes en compartir el enlace de tu aplicación con otros para mostrar tus avances y recibir retroalimentación valiosa. Este tipo de interacción no solo refuerza tus habilidades, sino que te integra a una comunidad activa y en constante crecimiento. ¡Sigue explorando, aprendiendo y mejorando tus despliegues con Solid y Netlify!