SOTELO-react

Tutorial de useRef en React: Guía Práctica para Principiantes (Perfecto para tu blog!) ¿Quieres manejar el DOM directamente en React sin provocar re-renders innecesarios?  useRef  es tu solución. En este tutorial, aprenderás qué es, cómo usarlo y casos prácticos comunes. 🔹 ¿Qué es useRef? useRef  es un hook de React que te permite: Acceder a elementos del DOM  directamente (como  document.getElementById  en vanilla JS). Almacenar valores mutables  que persisten entre renders  sin  causar re-renders (a diferencia de  useState ). 🛠️ Sintaxis Básica jsx import { useRef } from 'react' ; function Componente ( ) { const ref = useRef ( valorInicial ) ; // Valor inicial: null, 0, "", etc. // Acceder al valor actual con: console . log ( ref . current ) ; return < div ref = { ref } > ¡Hola! </ div > ; } 🚀 3 Casos de Uso Prácticos 1. Enfocar un Input Automáticamente jsx import { useRef , useEffect } fr...

    ¿Cómo manejar Rutas en React con React Router DOM? ¿Quieres navegar entre páginas en tu aplicación de React como un profesional? 🌐💡 En este tutorial, te muestro paso a paso cómo configurar rutas usando  React Router DOM  (la herramienta esencial para enrutamiento en React). ¡Así de simple! ⬇️ 🔹  Pasos clave: 1️⃣  Instala React Router DOM : bash npm install react-router-dom 2️⃣  Estructura tus carpetas : src/routes/  → Archivo principal de rutas ( Routes.jsx ). src/pages/  → Páginas completas (ej:  Página1.jsx ,  Página2.jsx ). 3️⃣  Configura las rutas : jsx import { BrowserRouter , Routes , Route } from "react-router-dom" ; import P ágina1 from "../pages/Página1" ; import P ágina2 from "../pages/Página2" ; function MyRoutes ( ) { return ( < BrowserRouter > < Routes > < Route path = " / " element = { < P ágina1 / > } /> { /* Ruta principal */ } ...

Entendiendo useEffect en React 🔹  Miniatura de la clase 🎥 [0:00 / 9:32] 🔄 Practicando con el State y los Likes Antes de avanzar, vamos a repasar cómo manejar el estado ( state ) en React con un ejemplo práctico de un contador de  likes : jsx const [ likes , setLikes ] = useState ( 0 ) ; const darLike = ( ) => { setLikes ( likes + 1 ) ; // Incrementamos el contador } ; return ( < div > < h1 > Likes: { likes } </ h1 > < button onClick = { darLike } > Dar Like </ button > </ div > ) ; ✅  ¿Qué ocurre? Solo el componente que contiene el estado se actualiza (no toda la página). React optimiza los renders gracias al  Virtual DOM . 🛠️ React Developer Tools Para una mejor experiencia de desarrollo, instala la extensión oficial: 🔗  React Developer Tools (Chrome) 🔍  ¿Qué nos permite? Ver componentes en tiempo real. Inspeccionar estados ( states ) y props. Depurar eficientemente. https:/...