Entradas

Mostrando entradas de marzo, 2024

useEffect

¿Qué es un gancho? Los ganchos nos permiten "conectarnos" a funciones de React, como los métodos de estado y ciclo de vida.   El hook useEffect en React se utiliza para realizar efectos secundarios en componentes funcionales. Estos efectos pueden ocurrir después de que el componente ha sido renderizado en el DOM, y pueden ser utilizados para realizar tareas como la suscripción a eventos, realizar solicitudes de red, modificar el DOM directamente, entre otros. Cuando se utiliza useEffect , puedes especificar una función que se ejecutará después de que React haya terminado de renderizar el componente. Aquí hay un ejemplo de cómo se puede usar useEffect para controlar efectos secundarios después de que el estado de un componente cambie y se vuelva a renderizar: import React, { useState, useEffect } from 'react'; function MyComponent() {   const [count, setCount ] = useState(0);   useEffect( () => {     // Este efecto se ejecutará cada vez ...

useState

  useStateHook de reacción El React useStateHook nos permite rastrear el estado en un componente de función. El estado generalmente se refiere a datos o propiedades que deben rastrearse en una aplicación. useStateacepta un estado inicial y devuelve dos valores: El estado actual. Una función que actualiza el estado. El nuevo estado import { useState } from "react"; function FavoriteColor() {   const [color, setColor] = useState("Iniializaestado"); } Inicializamos el estado con Iniializaestado El primer valor, color es nuestro estado actual. El segundo valor, setColores la función que se utiliza para actualizar nuestro estado. Por último, establecemos el estado inicial en una cadena vacía:useState("") Utilice la variable de estado en el componente renderizado. import { useState } from "react"; import ReactDOM from "react-dom/client"; function FavoriteColor() {   const [color, setColor] = useState("red");   return <h1>My fa...

Exportar un modulo node

solicitudes-v1

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.26.10/dist/sweetalert2.all.min.js"></script> <script>     $(document).ready(function() {         $('#solicitudtabla').DataTable({             "order": [                 [4, "desc"]             ],             pageLength: 4,             lengthMenu: [                 [4, 10, 20, -1],                 [4, 10, 20, 'Todos']             ],             columnDefs: [{                 orderable: false,                 targets: -1             }],             ...

crud-javascript

  <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> CRUD JavaScript </title>     <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > </head> <body>     <div class = "container mt-5" >         <h2> CRUD JavaScript </h2>         <form id = "formulario" >             <div class = "form-group" >                 <label for = "nombre" > Nombre: </label>                 <input type = "text" class = "form-control" id = "nombre" required >             </div>   ...

tabla js 2

<!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Tabla y Modales </title>         <!-- Bootstrap CSS -->     <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel = "stylesheet" > </head> <body>     <div class = "container" >         <input type = "hidden" name = "carpeta" id = "inputCarpeta" value = "C-01/2015" >     <table id = "solicitudtabla" class = "table" >         <thead class = "thead-dark" >             <tr>                 <th> Id </th>                 <th> Carpeta ...

Tabla con js

  <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Tabla y Modales </title>         <!-- Bootstrap CSS -->     <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel = "stylesheet" > </head> <body>     <table id = "solicitudtabla" class = "table" >         <thead class = "thead-dark" >             <tr>                 <th> Id </th>                 <th> Carpeta </th>                 <th> Registro </th>                 <t...

agregar datos a una bd

  <!DOCTYPE html > <html lang = "es" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Formulario y arreglo de datos </title>     <!-- Bootstrap CSS -->     <link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet" > </head> <body> <div class = "container mt-5" >     <form id = "miFormulario" >         <div class = "form-row" >             <div class = "form-group col-md-4" >                 <label for = "inputID" > ID: </label>                 <input type = "text" class = "form-control" id = "inputID" name = "id" >         ...