/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const STORAGE_KEY = "nodeJSLearningPath"; function NodeJSLearningRoadmap() { const [learningPath, setLearningPath] = useState(() => { const savedPath = localStorage.getItem(STORAGE_KEY); return savedPath ? JSON.parse(savedPath) : [ { level: "Fundamentos (Nivel 0-Principiante)", duration: "1-2 meses", topics: [ { text: "Introducción a JavaScript básico", completed: false }, { text: "Instalación de Node.js y npm", completed: false }, { text: "Conceptos de runtime de Node.js", completed: false }, { text: "Variables, tipos de datos, operadores", completed: false }, { text: "Estructuras de control (if, switch, bucles)", completed: false }, { text: "Funciones y scope", completed: false }, { text: "Manejo de errores básico", completed: false }, { text: "Programación síncrona y asíncrona", completed: false }, ], projects: [ { text: "Calculadora de línea de comandos", completed: false }, { text: "Sistema de gestión de tareas en consola", completed: false }, { text: "Aplicación de lista de contactos", completed: false }, ], }, { level: "Intermedio (Nivel 1-Desarrollo Backend)", duration: "2-3 meses", topics: [ { text: "Módulos CommonJS y ES6", completed: false }, { text: "Sistema de módulos de Node.js", completed: false }, { text: "Gestión de paquetes con npm", completed: false }, { text: "Programación asíncrona (Promises, async/await)", completed: false }, { text: "Manejo de archivos con fs", completed: false }, { text: "Streams y buffers", completed: false }, { text: "Eventos y Event Loop", completed: false }, { text: "Introducción a Express.js", completed: false }, { text: "Middleware y enrutamiento", completed: false }, { text: "Validación de datos", completed: false }, { text: "Autenticación básica", completed: false }, ], projects: [ { text: "API REST básica", completed: false }, { text: "Servidor de archivos", completed: false }, { text: "Sistema de autenticación simple", completed: false }, ], }, { level: "Avanzado (Nivel 2-Backend Profesional)", duration: "3-4 meses", topics: [ { text: "Arquitectura de microservicios", completed: false }, { text: "Patrones de diseño en Node.js", completed: false }, { text: "GraphQL", completed: false }, { text: "WebSockets", completed: false }, { text: "Autenticación con JWT", completed: false }, { text: "Testing (Jest, Mocha)", completed: false }, { text: "Integración continua", completed: false }, { text: "Dockerización de aplicaciones", completed: false }, { text: "Optimización de rendimiento", completed: false }, { text: "Seguridad en Node.js", completed: false }, { text: "Logging y monitoreo", completed: false }, ], projects: [ { text: "Plataforma de chat en tiempo real", completed: false }, { text: "Microservicios con Docker", completed: false }, { text: "Sistema de e-commerce completo", completed: false }, ], }, { level: "Especialización (Nivel 3-Experto)", duration: "4-6 meses", topics: [ { text: "Programación funcional", completed: false }, { text: "Serverless con AWS Lambda", completed: false }, { text: "Arquitecturas distribuidas", completed: false }, { text: "Escalabilidad", completed: false }, { text: "Seguridad avanzada", completed: false }, { text: "Rendimiento y profiling", completed: false }, { text: "Desarrollo de CLI tools", completed: false }, { text: "Integración de machine learning", completed: false }, { text: "Desarrollo de módulos nativos", completed: false }, { text: "Técnicas de caching", completed: false }, ], projects: [ { text: "Sistema de machine learning con Node.js", completed: false }, { text: "Plataforma de microservicios escalable", completed: false }, { text: "Herramienta CLI empresarial", completed: false }, ], }, ]; }); useEffect(() => { localStorage.setItem(STORAGE_KEY, JSON.stringify(learningPath)); }, [learningPath]); const toggleTopicCompletion = (levelIndex, topicIndex, isProject = false) => { const updatedPath = [...learningPath]; const targetArray = isProject ? updatedPath[levelIndex].projects : updatedPath[levelIndex].topics; targetArray[topicIndex].completed = !targetArray[topicIndex].completed; setLearningPath(updatedPath); }; const resetProgress = () => { const resetPath = learningPath.map(level => ({ ...level, topics: level.topics.map(topic => ({ ...topic, completed: false })), projects: level.projects.map(project => ({ ...project, completed: false })), })); setLearningPath(resetPath); localStorage.removeItem(STORAGE_KEY); }; return (

📘 Ruta de Aprendizaje Node.js

{learningPath.map((level, levelIndex) => (

{level.level} ({level.duration})

Temas

{level.topics.map((topic, topicIndex) => (

toggleTopicCompletion(levelIndex, topicIndex)} > {topic.completed ? "✅" : "⬜"} {topic.text}

))}

Proyectos

{level.projects.map((project, projectIndex) => (

toggleTopicCompletion(levelIndex, projectIndex, true)} > {project.completed ? "✅" : "⬜"} {project.text}

))}

))} Ver código fuente

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Ruta de Aprendizaje Node.js

`, { headers: { "content-type": "text/html" }, }, ); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .container { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { color: #333; text-align: center; border-bottom: 2px solid #007bff; padding-bottom: 10px; } .learning-level { margin-bottom: 20px; background-color: #f9f9f9; border-radius: 5px; padding: 15px; } .section { margin-bottom: 15px; } .topic, .project { cursor: pointer; padding: 8px; border-radius: 4px; transition: background-color 0.3s; } .topic:hover, .project:hover { background-color: #e9ecef; } .completed { color: #6c757d; text-decoration: line-through; } .reset-btn { display: block; width: 100%; padding: 10px; background-color: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px; } .source-link { display: block; text-align: center; margin-top: 20px; color: #007bff; text-decoration: none; } `;

qualityBrownTyrannosaurus

Version 2