Conceptos Básicos en React

 Conceptos básicos en React:

1. Elementos Fundamentales

• Componente: Bloque de construcción de la UI (una función de JavaScript) que retorna HTML/JSX. Puede ser reutilizable.

• JSX: Sintaxis que permite escribir HTML directamente dentro de JavaScript. Luego se compila a código JS nativo.

• Props (Propiedades): Datos que se le pasan a un componente desde su padre (como los argumentos de una función). Son de solo lectura (inmutables).

2. Estado y Reactividad

• Estado (State): La memoria interna de un componente. Datos que pueden cambiar con el tiempo y que, al actualizarse, hacen que el componente se vuelva a renderizar.

• Hooks: Funciones especiales (empiezan con use) que te permiten "enganchar" el estado y el ciclo de vida de React en componentes funcionales.

3. Hooks Principales (Los que debes saber sí o sí)

• useState: El hook para crear y actualizar el estado interno de un componente. Retorna el valor actual y una función para modificarlo.

• useEffect: El hook para manejar "efectos secundarios" (peticiones a APIs, suscripciones, modificar el DOM manualmente). Se ejecuta después del renderizado.

• Array de Dependencias (en useEffect): El segundo argumento del useEffect. Si está vacío [], el efecto se ejecuta solo una vez (al montar el componente). Si tiene variables [data], se ejecuta cada vez que esas variables cambien.

4. Manejo de Listas y Renderizado

• Virtual DOM: Una copia ligera del DOM real en memoria. React la usa para calcular los cambios mínimos necesarios antes de actualizar la pantalla real, mejorando el rendimiento.

• Keys (Llaves): Un atributo único obligatorio al renderizar listas (map). Ayuda a React a identificar qué elementos han cambiado, se han agregado o se han eliminado.

Diferencia entre Props y State:

"Las Props vienen de afuera y no se pueden modificar, el State se maneja por dentro y sí cambia para actualizar la pantalla"

Guía Definitiva de Supervivencia: Vue 3, Quasar y Gestores de Estado

Consolidar los conceptos técnicos con analogías del mundo real es la mejor forma de recordarlos para siempre. Para este repaso general, vamos a imaginar que estamos construyendo y administrando un gran hotel de cinco estrellas.

Parte 1: Bases Sólidas de Vue 3 (El Motor del Hotel)

Si tu aplicación fuera un hotel, Vue 3 es la infraestructura, las paredes inteligentes y el sistema de automatización que hace que todo cambie en tiempo real sin que el usuario tenga que parpadear.

• La Reactividad (ref y reactive — El Termostato Inteligente): Olvídate de cambiar el DOM a mano de forma manual. Piensa en ref() como un termostato digital: si cambias el número de la temperatura en la pantalla (el estado), el ambiente (la interfaz) se ajusta automáticamente.

• Composition API (Cajas de Herramientas Temáticas): En lugar de tener la lógica dispersa por "tipos" (datos en un lado, métodos en otro), la Composition API te permite agrupar todo lo relacionado con una sola función (por ejemplo, "Gestión de Habitaciones") en un solo lugar. Es como tener una caja de herramientas específica para el plomero y otra para el electricista.

• Props y Events (El Teléfono de Recepción):

  • Props (De padres a hijos): La gerencia (Componente Padre) le envía instrucciones detalladas a los botones de los pisos (Componentes Hijos). Las props siempre bajan.

  • Events / Emit (De hijos a padres): Un huésped presiona el botón de "limpieza" en su habitación (Hijo), lo que dispara un emit hacia la recepción (Padre) para que actúe. Los eventos siempre suben.

Parte 2: Bases Sólidas de Quasar Framework (El Diseñador de Interiores)

Ya tienes la estructura del hotel, pero no vas a fabricar los sofás, las lámparas y las puertas desde cero. Quasar es tu proveedor de muebles de lujo prefabricados y tu sistema de transporte global.

• Componentes Material Design (Muebles Listos para Usar): ¿Necesitas una tabla de datos interactiva, un menú lateral o un botón animado? Usas q-table, q-drawer o q-btn. No pierdes tiempo escribiendo CSS complejo; arrastras el componente de Quasar, le pasas unas cuantas props de estilo y luce impecable.

• El Sistema de Grid (Flexbox sobre Esteroides): Quasar utiliza un sistema de filas (row) y columnas (col) extremadamente intuitivo. Es el plano arquitectónico que decide cómo se redistribuyen los muebles si la habitación se encoge (un móvil) o se agranda (una pantalla de escritorio).

• Escribe una vez, despliega donde sea (Multiplataforma): Con el mismo código base, Quasar compila tu aplicación para la Web (SPA/PWA), para el escritorio (Electron) o para tiendas móviles (Capacitor/Cordova). Es como si el mismo plano de tu hotel funcionara para construir un edificio físico, un barco flotante o una maqueta virtual.

Parte 3: Los Gestores de Estado (La Central de Suministros del Hotel)

Cuando tu hotel crece y tiene cientos de habitaciones, pasar información de la recepción al piso más alto mediante props y emits se vuelve una pesadilla (el famoso Prop Drilling). Para evitarlo, usamos un Gestor de Estados, que actúa como la central de suministros del hotel.

Dependiendo de la arquitectura de tu hotel, puedes elegir entre tres administradores diferentes:

Opción A: Pinia (El Almacén Moderno y Ágil)

Es el estándar oficial recomendado para Vue 3.

• La analogía: Es un almacén automatizado y modular. Cada departamento del hotel (Restaurante, Habitaciones, Spa) tiene su propia sección independiente (stores separados). Es ligero, directo y se sostiene sobre tres pilares fáciles de recordar:

  1. State (El Inventario): La base de datos reactiva en memoria. Ejemplo: habitacionesOcupadas: 42.

  2. Getters (Los Filtros / Contadores): No modifican nada, solo calculan al vuelo (como las propiedades computadas). Ejemplo: calcular las habitacionesDisponibles.

  3. Actions (Los Empleados): Funciones que modifican el State o hacen peticiones al exterior (APIs). Las actions hacen el trabajo sucio.

Opción B: Vuex (El Almacén Clásico y Burocrático)

Fue el rey indiscutible en Vue 2 y sigue muy presente en proyectos grandes o heredados.

• La analogía: Es el sistema de la "vieja escuela". Un solo almacén gigantesco para todo el hotel donde, para cambiar una sola bombilla, hay que llenar un formulario estricto. Pasas por una Action (logística), que obligatoriamente llama a una Mutation (el único empleado autorizado con llave para tocar el inventario físico), para recién alterar el State. Es ultra seguro, pero requiere mucho más código repetitivo (boilerplate).

Opción C: Estado Global con reactive() o Composables (La Bodega Informal)

La opción nativa de Vue 3 sin instalar librerías externas.

• La analogía: Es como poner una pizarra con notas en el pasillo de empleados. Cualquier persona que pase puede leer el estado de un vistazo o borrar algo con un marcador. Es súper rápido de implementar para proyectos pequeños, pero si el hotel crece mucho, es fácil que alguien altere una nota importante por accidente al no haber un control estricto de flujo.

💡 Resumen de Bolsillo

• Vue 3: El motor del hotel. Controlas la lógica con termostatos (ref), cajas ordenadas (Composition API) y comunicación vertical (Props/Emits).

• Quasar: El diseño y transporte. Muebles listos (q-components) y la capacidad de exportar a Web, Android, iOS o Escritorio con un solo comando.

• Gestores de Estado: El almacén central. Pinia es el joven eficiente y directo; Vuex es el abuelo estricto y burocrático; Reactive Global es la pizarra práctica hecha en casa.

Tema clave en Vuejs

🚀 Parte 1: Temas Clave Vue 3

• Composition API: La forma moderna de escribir Vue usando <script setup>. Todo el código de una misma función va junto.

• Lifecycle Hooks: Funciones que se ejecutan en momentos clave. El más usado: onMounted (cuando el componente aparece en pantalla, ideal para cargar datos).

• Pinia: El almacén central. Guarda los datos que toda la aplicación necesita ver (ej. el usuario logueado).

• Props: Datos que el padre le manda al hijo (hacia abajo).

• Emit: Eventos que el hijo le manda al padre para avisarle algo (hacia arriba).

• v-if: Oculta un elemento borrándolo del mapa.

• v-show: Oculta un elemento pero solo con CSS (display: none).

• v-for: Para hacer listas (como un forEach). Siempre lleva :key.

• v-model: Conecta un input con una variable. Si uno cambia, el otro también.

❓ Parte 2: Preguntas de Entrevista (Respuestas Cortas)

1. ¿Diferencia entre ref y reactive?

• ref() sirve para cualquier dato (usa .value).

• reactive() solo para objetos y arrays (no usa .value).

• Respuesta rápida: Usa siempre ref por seguridad.

2. ¿Cuándo usar computed y watch?

• computed: Para calcular un dato nuevo basado en otro (tiene memoria/caché).

• watch: Para ejecutar una acción (como llamar a una API) cuando un dato cambia.

3. ¿Ventaja de Composition API?

• Permite ordenar el código por funciones y reutilizarlo mucho más fácil que antes.

4. ¿Cómo funciona v-model por detrás?

• Es la unión automática de una prop (el valor) y un evento (cuando cambia).

5. ¿Cómo compartir datos entre componentes?

• Cerca: Props (hacia abajo) y Emits (hacia arriba).

• Lejos / Toda la app: Pinia.

6. ¿Qué es Pinia?

• Una caja central para guardar datos globales de la app y evitar pasar props de componente en componente.

🚀 Parte 3: Nuevos Temas Clave

• Vuex: El antecesor de Pinia. Es el sistema antiguo de manejo de estado global para Vue 2. Si te toca mantener un proyecto viejo, usarás Vuex; si el proyecto es moderno, usarás Pinia.

• Interfaces Modernas (UI): Se refiere a crear componentes visuales que sean limpios, minimalistas, interactivos y adaptables a móviles (responsive), priorizando siempre la experiencia de usuario (UX).

• Optimizar Rendimiento: Hacer que la app cargue y funcione más rápido. En Vue se logra con Lazy Loading (cargar componentes o rutas solo cuando se necesitan) y usando bien v-if / v-show.

• Quasar Framework: Es un framework basado en Vue que te permite escribir el código una sola vez y exportarlo como web (SPA/SSR), app móvil (Android/iOS) o app de escritorio, usando un catálogo gigante de componentes visuales ya listos.

❓ Parte 4: Nuevas Preguntas de Entrevista

1. ¿Qué diferencia hay entre Vuex y Pinia?

• Vuex es más complejo, usa mutaciones y requiere más código (boilerplate).

• Pinia es más simple, no usa mutaciones (cambias el estado directamente) y tiene soporte nativo para TypeScript.

2. ¿Cómo optimizas el rendimiento de una app en Vue?

• Cargando las rutas con Lazy Loading (importación dinámica).

• Usando :key obligatoriamente en todos los v-for.

• Usando v-show en lugar de v-if si el componente aparece y desaparece constantemente.

3. ¿Qué ventajas tiene usar Quasar?

• Multiplataforma: Creas web, móvil y escritorio desde el mismo código.

• Velocidad: Viene con componentes UI modernos listos para usar, lo que ahorra meses de desarrollo.

4. ¿A qué te refieres con crear una Interfaz Moderna en Vue?

• A diseñar componentes modulares, con carga visual ligera, animaciones fluidas y un diseño adaptable (responsive) que responda al instante a las acciones del usuario.

js para cambiar una imagen por otra

         //js para cambiar una imagen por otra

        document.getElementById("file").addEventListener('change', cambiarImagen);

        function cambiarImagen(event) {

            var file = event.target.files[0];

            var reader = new FileReader();

            reader.onload = (event) => {

                document.getElementById("picture").setAttribute('src', event.target.result);

            };

            reader.readAsDataURL(file);

        }

Información importante usando el Framework Svelte

Instalar Svelte   usando rollup

Mkdir  nomcarpeta

npx degit sveltejs/template svelte

cd nomcarpeta

npm install

npm run dev, alli copiamos la url para  testear la app

Instalar Svelte   usando webpack

Mkdir  nomcarpeta

npm install svelte --save

npm install @babel/core @babel/preset-env @babel/polyfill babel-loader --save-dev   

npm install webpack webpack-cli html-webpack-plugin --save-dev

npm install webpack-dev-server --save-dev

npm install svelte-loader --save-dev

npm run build

npm run start

Crear un proyecto usando Svelte

Mkdir  nombrecarpeta

cd nombrecarpeta

git init

npm init

Code .

Creamos carpeta src  donde va el código de nuestro programa, aquí dentro creamos index.js

Creamos carpeta public

Cómo convertir automaticamente en mayúscula las letras en Javascript

Hay casos en los que queremos que en javascript solo la persona pueda escribir letras en un campo de formulario, con el siguiente código se convierte automáticamente las letras minúsculas en mayúsculas:

   obj.value = obj.value.replace(/[^A-Z-a-z]/g,'').toUpperCase();

Cómo dar sonido a un Botón en html con javascript

Es común ver que las páginas usan sonidos al hacer click en botones y esto hace que mejore la experiencia de usuario y para esto podemos usar el siguiente código:

<button  class="sonido">Nombre_Boton</button>

  <audio src=""></audio>

<script>

    let boton = document.querySelector(".sonido")

    let audioEtiqueta = document.querySelector("audio")

    boton.addEventListener("click", () => {

      audioEtiqueta.setAttribute("src", "nombre_del_audio")

      audioEtiqueta.play()

      console.log(`Reproduciendo: ${audioEtiqueta.src}`)

    })

</script>

Como Crear un checkbox dinámico que al hacer click despliegue un campo para escribir un texto

Hay ocasiones en las que usamos checkbox para que nuestros formularios sean dinámicos y permitan escoger varias o una opción, En este caso quiero mostrarles una ayuda para que al hacer click en un checkbox, automáticamente se despliegue un input para que las personas escriban un texto

<script>

function miFuncion() {

  var checkBox = document.getElementById("miFuncion");

  var text = document.getElementById("texto");

  if (checkBox.checked == true){

    text.style.display = "block";

  } else {

     text.style.display = "none";

  }

}

</script>

Escribe otra opción: <input type="checkbox" name="check1"  value="1"  id="miFuncion"  onclick="myFunction()"/>  

         

            <input type="text" id="texto" name="ocupac" placeholder="Cual" style="display:none"  />   

Código basado en W3schools.