/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function NodeJSLearningTodoList() { const initialTasks = [ { id: 1, title: "Fundamentos de JavaScript", description: "Domina los conceptos fundamentales de JavaScript que son esenciales para Node.js. Aprenderás tipos de datos, funciones, programación asíncrona y características modernas del lenguaje.", completed: false, subtopics: [ { text: "Variables y tipos de datos", description: "Comprende cómo declarar variables, tipos primitivos, objetos y arrays en JavaScript.", completed: false }, { text: "Funciones", description: "Aprende sobre funciones regulares, arrow functions, parámetros, scope y cierres (closures).", completed: false }, { text: "Programación asíncrona", description: "Domina Promises, async/await, manejo de operaciones asíncronas y callbacks.", completed: false }, { text: "ES6+ Features", description: "Explora destructuring, spread/rest operators, módulos, template literals y otras características modernas de JavaScript.", completed: false } ] }, { id: 2, title: "Introducción a Node.js", description: "Aprende los fundamentos de Node.js, su ecosistema, módulos internos y cómo funciona el runtime de JavaScript en el servidor.", completed: false, subtopics: [ { text: "Instalación de Node.js", description: "Configura tu entorno de desarrollo, instala Node.js y npm, y comprende las versiones y gestores de versiones.", completed: false }, { text: "Módulos y npm", description: "Aprende sobre el sistema de módulos de Node.js, CommonJS, cómo usar npm para gestionar dependencias.", completed: false }, { text: "Eventos y Event Loop", description: "Entiende el modelo de eventos de Node.js, el event loop y cómo Node.js maneja operaciones asíncronas.", completed: false }, { text: "Módulo de sistema de archivos (fs)", description: "Aprende a trabajar con archivos y directorios usando el módulo filesystem de Node.js.", completed: false } ] }, { id: 3, title: "Desarrollo de Servidores Web", description: "Desarrolla habilidades para crear servidores web robustos usando Node.js y Express.js, implementando routing y middleware.", completed: false, subtopics: [ { text: "Crear servidores HTTP básicos", description: "Aprende a crear servidores HTTP desde cero usando el módulo nativo http de Node.js.", completed: false }, { text: "Express.js", description: "Domina Express.js para crear aplicaciones web y APIs de manera rápida y eficiente.", completed: false }, { text: "Middleware", description: "Comprende y crea middleware para procesar solicitudes, manejar errores y añadir funcionalidades.", completed: false }, { text: "Routing", description: "Aprende técnicas avanzadas de routing, manejo de parámetros y organización de rutas en Express.", completed: false } ] }, { id: 4, title: "Bases de Datos", description: "Aprende a integrar y trabajar con bases de datos en Node.js, cubriendo tanto bases de datos NoSQL como relacionales.", completed: false, subtopics: [ { text: "MongoDB con Mongoose", description: "Aprende a usar MongoDB como base de datos NoSQL y Mongoose para modelar y interactuar con datos.", completed: false }, { text: "SQL con Sequelize", description: "Domina bases de datos relacionales usando Sequelize como ORM para PostgreSQL, MySQL y SQLite.", completed: false }, { text: "Operaciones CRUD", description: "Implementa operaciones de Crear, Leer, Actualizar y Eliminar (CRUD) en diferentes tipos de bases de datos.", completed: false }, { text: "Conexiones y modelos", description: "Aprende a gestionar conexiones de bases de datos, crear modelos y realizar consultas complejas.", completed: false } ] }, { id: 5, title: "APIs y Autenticación", description: "Desarrolla APIs RESTful seguras, implementa autenticación y autorización usando las mejores prácticas de Node.js.", completed: false, subtopics: [ { text: "Diseño de APIs RESTful", description: "Aprende principios de diseño de APIs RESTful, buenas prácticas y patrones de arquitectura.", completed: false }, { text: "JWT", description: "Implementa autenticación basada en JSON Web Tokens (JWT) para proteger tus endpoints.", completed: false }, { text: "Passport.js", description: "Usa Passport.js para implementar estrategias de autenticación como OAuth, local, y JWT.", completed: false }, { text: "Seguridad en APIs", description: "Aprende técnicas de seguridad como validación de entrada, prevención de inyección, y manejo de CORS.", completed: false } ] } ]; const [tasks, setTasks] = useState(() => { const savedTasks = localStorage.getItem('nodeJSLearningPath'); return savedTasks ? JSON.parse(savedTasks) : initialTasks; }); const [newTask, setNewTask] = useState(''); const [expandedTask, setExpandedTask] = useState(null); useEffect(() => { localStorage.setItem('nodeJSLearningPath', JSON.stringify(tasks)); }, [tasks]); const addTask = () => { if (newTask.trim()) { const newTaskObj = { id: Date.now(), title: newTask, description: "", completed: false, subtopics: [] }; setTasks([...tasks, newTaskObj]); setNewTask(''); } }; const toggleComplete = (id) => { const updatedTasks = tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task ); setTasks(updatedTasks); }; const toggleSubtopicComplete = (taskId, subtopicIndex) => { const updatedTasks = tasks.map(task => { if (task.id === taskId) { const updatedSubtopics = [...task.subtopics]; updatedSubtopics[subtopicIndex] = { ...updatedSubtopics[subtopicIndex], completed: !updatedSubtopics[subtopicIndex].completed }; return { ...task, subtopics: updatedSubtopics }; } return task; }); setTasks(updatedTasks); }; const addSubtopic = (taskId, subtopic) => { const updatedTasks = tasks.map(task => { if (task.id === taskId) { return { ...task, subtopics: [...task.subtopics, { text: subtopic, description: "", completed: false }] }; } return task; }); setTasks(updatedTasks); }; const resetProgress = () => { const resetTasks = tasks.map(task => ({ ...task, completed: false, subtopics: task.subtopics.map(subtopic => ({ ...subtopic, completed: false })) })); setTasks(resetTasks); }; const fullReset = () => { // Mostrar confirmación antes de resetear completamente const confirmReset = window.confirm("¿Estás seguro de que quieres reiniciar completamente? Se perderán todos tus temas personalizados."); if (confirmReset) { // Resetear a los temas originales setTasks(initialTasks); localStorage.removeItem('nodeJSLearningPath'); } }; const toggleTaskExpand = (taskId) => { setExpandedTask(expandedTask === taskId ? null : taskId); }; return (

📚 Ruta de Aprendizaje Node.js

setNewTask(e.target.value)} placeholder="Añadir nuevo tema de estudio" />

{tasks.map(task => (

toggleTaskExpand(task.id)}> { e.stopPropagation(); toggleComplete(task.id); }} /> {task.title} {expandedTask === task.id ? '▼' : '►'}

{expandedTask === task.id && (

{task.description}

{task.subtopics.map((subtopic, index) => (

toggleSubtopicComplete(task.id, index)} >

{subtopic.text}

{subtopic.description}

))}

{ if (e.key === 'Enter' && e.target.value.trim()) { addSubtopic(task.id, e.target.value); e.target.value = ''; } }} />

)}

))}

); } function App() { return ; } 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: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .header-buttons { display: flex; gap: 10px; } h1 { text-align: center; color: #333; margin: 0; } .reset-button, .full-reset-button { color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 0.9em; } .reset-button { background-color: #f44336; } .full-reset-button { background-color: #ff9800; } .reset-button:hover { background-color: #d32f2f; } .full-reset-button:hover { background-color: #f57c00; } .input-container { display: flex; margin-bottom: 20px; } .input-container input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .input-container button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; margin-left: 10px; } .task { background-color: #f9f9f9; border: 1px solid #e0e0e0; margin-bottom: 10px; border-radius: 4px; } .task.completed { opacity: 0.6; } .task-header { display: flex; align-items: center; gap: 10px; padding: 10px; cursor: pointer; } .task-header span:first-child { flex-grow: 1; } .expand-icon { font-size: 0.8em; color: #666; } .task.completed .task-header span { text-decoration: line-through; } .task-details { padding: 10px; background-color: #f0f0f0; } .task-description { color: #666; margin-bottom: 15px; font-style: italic; } .subtopics { margin-top: 10px; } .subtopic { display: flex; margin-bottom: 10px; cursor: pointer; padding: 5px; border-radius: 4px; } .subtopic:hover { background-color: #e0e0e0; } .subtopic-content { flex-grow: 1; } .subtopic-title { font-weight: bold; display: block; } .subtopic-description { color: #666; font-size: 0.9em; margin-top: 5px; } .subtopic.completed .subtopic-title, .subtopic.completed .subtopic-description { text-decoration: line-through; color: #888; } .add-subtopic input { width: 100%; padding: 5px; margin-top: 10px; } `;

genuineBrownErmine