React Fundamentals

Bienvenido a React React es una librería de JavaScript para construir interfaces de usuario. Fue creada por Facebook (hoy Meta) y publicada como código abierto en 2013. Desde entonces se ha convertido en una de las herramientas más usadas para el desarrollo frontend, tanto en startups como en grandes empresas. La idea central es sencilla pero poderosa: en lugar de manipular el DOM a mano, tú describes cómo debe verse la interfaz según los datos, y React se encarga de actualizar la pantalla cuand

Creando tu primer proyecto React Antes de escribir componentes necesitas un proyecto configurado: un servidor de desarrollo, un empaquetador y la estructura de archivos. Hoy la forma recomendada es usar Vite, una herramienta moderna y muy rápida. NotaNecesitas tener instalado Node.js (versión 18 o superior). Comprueba tu versión con node -v en la terminal. Opción recomendada: Vite Vite crea el proyecto, instala lo mínimo necesario y arranca un servidor con recarga instantánea: # 1. Crear el proy

Entendiendo JSX JSX es una extensión de la sintaxis de JavaScript que te permite escribir un marcado parecido a HTML directamente dentro de tu código. No es obligatorio para usar React, pero es la forma estándar de escribirlo porque resulta mucho más legible. Aunque parezca HTML, en realidad es JavaScript: cada etiqueta se transforma en una llamada a una función que crea un elemento de React. // Esto que parece HTML... const elemento = <h1>Hola Mundo</h1>; // ...se transforma interna

Tipo de lección: QuizQuiz de Introduccion a ReactPon a prueba tus conocimientos con este quiz. Necesitas 70% para aprobar.

Componentes: los bloques de construcción Un componente es una función de JavaScript que devuelve JSX. Es la unidad básica de React: con componentes pequeños y bien definidos construyes interfaces grandes, igual que con bloques de Lego. Idea claveLos nombres de los componentes deben empezar con mayúscula. Así React distingue entre un componente tuyo (Saludo) y una etiqueta HTML normal (div). Un componente funcional // Función tradicional function Saludo() { return <h1>¡Hola Mundo!</h1&gt

Props: Comunicacion entre componentes Las props (propiedades) permiten pasar datos de un componente padre a un componente hijo. Sintaxis basica // Componente que recibe props function Saludo(props) { return <h1>Hola {props.nombre}!</h1>; } // Usando el componente function App() { return ( <div> <Saludo nombre="Maria" /> <Saludo nombre="Juan" /> </div> ); } // Renderiza: // Hola Maria! // Hola Juan! Destructuring de props // Forma comun (destructuring en parame

La prop children children es una prop especial que contiene lo que pones entre las etiquetas de un componente. Sintaxis basica function Card({ children }) { return ( <div className="card"> {children} </div> ); } // Uso <Card> <h2>Titulo</h2> <p>Este contenido es children</p> </Card> Componentes contenedores function Container({ children }) { return ( <div className="container mx-auto px-4"> {children} </div> ); } function Page() { retur

Estado: Datos que cambian El estado (state) son datos que pueden cambiar durante la vida de un componente. Cuando el estado cambia, React re-renderiza el componente. useState: El hook basico import { useState } from 'react'; function Contador() { // useState retorna [valor, funcionParaCambiar] const [count, setCount] = useState(0); return ( <div> <p>Contador: {count}</p> <button onClick={() => setCount(count + 1)}> Incrementar </button> </div> ); } Anatomia de

Patrones de actualizacion de estado Actualizacion basada en valor anterior function Contador() { const [count, setCount] = useState(0); // MAL - puede fallar con multiples clicks rapidos const incrementarMal = () => { setCount(count + 1); }; // BIEN - usa el valor anterior const incrementarBien = () => { setCount(prev => prev + 1); }; // Incrementar 3 veces const incrementar3 = () => { setCount(prev => prev + 1); setCount(prev => prev + 1); setCount(prev => prev + 1); }; return ( <button onCl

Organizando el estado Multiples useState function Formulario() { const [nombre, setNombre] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); // Cada estado es independiente // Util cuando no estan relacionados } Estado agrupado function Formulario() { // Agrupa estados relacionados const [form, setForm] = useState({ nombre: '', email: '', password

useEffect: Efectos secundarios useEffect te permite ejecutar codigo despues de que React actualiza el DOM. Se usa para efectos secundarios como: Llamadas a APIs Suscripciones Manipulacion manual del DOM Timers Sintaxis basica import { useEffect, useState } from 'react'; function Componente() { const [data, setData] = useState(null); useEffect(() => { // Este codigo se ejecuta despues del render console.log('Componente renderizado!'); }); return <div>{data}</div>; } Array de dependenc

Funcion de limpieza (cleanup) Algunos efectos necesitan limpieza para evitar memory leaks. Retorna una funcion de useEffect para limpiar. Ejemplo: Timer function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(s => s + 1); }, 1000); // Cleanup: se ejecuta al desmontar // o antes del proximo efecto return () => { clearInterval(interval); }; }, []); return <p>Segundos: {seconds}</p>; } Ejemplo: Event listener functi

Patrones practicos Fetch con async/await function Users() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // No puedes hacer useEffect async directamente // Crea una funcion async dentro const fetchUsers = async () => { try { setLoading(true); const res = await fetch('/api/users'); if (!res.ok) throw new Error('Error al cargar'); const data = await res.json(); setUsers(data); } catch (err) { setEr