Creación de una Librería Reactiva MiniSolid desde Cero

Contenido del curso

No sé dónde empezar

Introducción a SolidJS

Reactividad a profundidad

Renderizado en Solid

Reactividad en Listas

Componentes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:46

Creación de una Librería Reactiva MiniSolid desde Cero

Curso de SolidJS

Clase 7 de 27

Clase 7 / 27

Recursos

¿Cómo crear una librería reactiva desde cero?

Introducir la inteligencia artificial en nuestras vidas también implica dominar las herramientas desde el núcleo de cómo funcionan. Enseñar a crear una librería reactiva, en este caso MiniSolid, no solo te brindará habilidades prácticas, sino que también será una gran adición para destacar en entrevistas laborales. Sigue a lo largo de esta guía para construir el scaffolding del proyecto.

¿Cuál es la estructura inicial del proyecto?

Comenzarás configurando el entorno de trabajo y creando la estructura básica para que la librería funcione sin problemas.

Crea una carpeta de proyecto: Nombrada "PlatziSolid", que será la sede de tu librería reactiva.
Preparar el editor de código: Abre la carpeta en Visual Studio Code.
Crea los archivos esenciales:
- index.html: Aquí se armará la estructura principal de la librería.
- index.js: Actuará como el punto de entrada para el usuario de la librería.
- solid.js: Contendrá primitivas reactivas que se usarán.

¿Cómo establecer la base del HTML?

El archivo index.html será el esqueleto de tu aplicación MiniSolid.

Estructura básica HTML5: Añade una <div> que englobará toda la aplicación.
Etiquetas funcionales:
- Span para "count": Controlable mediante identificador.
- Span para "double count": Similar al anterior.
- Header "is divisible by 3": Incluye un identificador para manejar valores.
- Botón de interacción: Que permitirá modificar el valor inicial del "count".

¿Cómo ejecutar un servidor local sencillo?

Utiliza herramientas modernas para visualizar y probar la aplicación.

Servidor Local: Mediante MPX y HTTPSer, levanta un servidor local en la consola para observar la aplicación ejecutándose en un navegador.

npx httpser

¿Cómo conectar tu script de JavaScript al HTML?

Incluir y gestionar los scripts es crucial para que la funcionalidad de la librería sea visible en el navegador.

Insertar un <script> en el index.html, indicando como source la ubicación del index.js.
Type módulo: Especifica que estás trabajando con ECMAScript módulos, la opción más a la vanguardia en JavaScript.

¿Cómo implementar las primitivas en JavaScript?

En el archivo solid.js, empezarás a definir la lógica de las primitivas que harán que el HTML sea reactivo y funcional.

Exportaciones: Ej. export default solid; con un console.log para verificar el funcionamiento.
En index.js, importa y usa la funcionalidad de solid.js para manipular el DOM.

import solid from './solid.js';
console.log(solid); // Verifica la ejecución y exportación

¿Qué son los import maps y cómo se usan?

Los import maps son una herramienta avanzada en JavaScript moderno para simplificar la gestión de librerías y módulos.

Definición: Usar un script de tipo importmap facilita una referencia limpia y comprensible a tus módulos.
Ejemplo de sintaxis: Asigna alias a archivos locales o remotos para simplificar importaciones en todo el proyecto.

<script type="importmap">
{
  "imports": {
    "solid": "./solid.js"
  }
}
</script>

Activa estos consejos y ejemplos prácticos siguiendo las mejores prácticas y explora las maravillas que puedes crear con tus proyectos de librerías reactivas. ¡Continúa perfeccionando tus habilidades y dale vida a tus ideas!

Introducción a SolidJS

SolidJS vs React: reactividad granular explicada

Python para Principiantes: Fundamentos y Aplicaciones Básicas

Signals en SolidJS: crea datos reactivos

createEffect y side effects en SolidJS

Signals derivados vs createMemo en Solid

Reactividad a profundidad

Qué es la reactividad en Solid

Creación de una Librería Reactiva MiniSolid desde Cero

Implementación de Signals en Librería Reactiva Solid

Cómo createEffect conecta signals y efectos

Señales derivadas sin nuevas primitivas

createMemo para evitar renderizados innecesarios

Cómo Solid convierte JSX al DOM real

Renderizado en Solid

Configurando SolidJS con Tailwind para Todo App

Dark mode en SolidJS con signals

Renderizado Condicional en Solid: Técnicas y Optimización

Renderizado de listas reactivas con For en Solid

Manejo de Eventos en Elementos HTML con SolidJS

Reactividad en Listas

Optimización de Renderizado y Reactividad en Listas con SolidJS

Cómo funcionan los stores en Solid JS

Stores de SolidJS para datos complejos

Función produce para mutar stores en Solid

Componentes

Qué son los componentes en Solid

Comunicación padre-hijo con props en SolidJS

Eventos personalizados entre componentes React

Persistencia con localStorage y useEffect

Deploy de app Solid en Netlify

Solid y el futuro del desarrollo web

Creación de una Librería Reactiva MiniSolid desde Cero