React sssssssssssssssssssssssssss

Guia de atajos ssssssssssssssss

Commandos Básicos Uso de componentes dentro de otros.

Crear un nuevo proyecto de cero. function MyComponent() {
return (
npm create vite <>
Seguir los pasos que se muestran. <h1>Hola Mundo</h1>
<p>Este es un párrafo</p>
</>
Componentes );
Estructura de un componentes. }

export function MyComponent() { function MyApp() {

return <h1>Hola Mundo</h1>; return (
} <>
<MyComponent />
<MyComponent />
Importante: <MyComponent />
Es obligatorio que cada componente regrese siempre un </>
único elemento, si se necesita retornar más de uno, se debe );
de envolver en un elemento padre para respetar la regla. }

export function MyComponent() {

return ( Propiedades de un componente (Props)
<div> Son valores o funciones que se envían al componente,
<h1>Hola Mundo</h1> deben de ser inmutables y permiten la personalización.
<p>Este es un párrafo</p> interface Props {
</div> firstName: string;
); };
} const Greeting = ({ firstName }: Props) => {
return <h1>Hola, {firstName}!</h1>;
};
Fragmentos
Es un elemento que no es renderizado en el DOM y // Usando el componente
sirve para agrupar sin afectar la estructura. <Greeting firstName="Fernando" />

Tip:
import { Fragment } from 'react'; El código anterior está en TypeScript, ya que las interfaces no existen
en JavaScript, pero nos ayudan a decir cómo luce el objeto Props.
export function MyComponent() {
return ( Tip 2:
<Fragment> Presta atención a la desestructuración de argumentos a la función y
<h1>Hola Mundo</h1> nombre de la prop al usar el componente.
<p>Este es un párrafo</p>
</Fragment> Children Prop
); Es una forma de mandar elementos hijos a un
} componente para renderizarlos en otro.
Pro Tip: type BoxProps = {
La forma abreviada del fragmento es esta, y no requiere children: React.ReactNode; // 👈 Este es el
importaciones. contenido que se coloca dentro del componente
};
export function MyComponent() {
return ( const Box = ({ children }: BoxProps) => {
<> return (
<div style={{ border: '2px solid blue'}}>
<h1>Hola Mundo</h1> {/* Renderiza lo que se pase dentro del componente */}
<p>Este es un párrafo</p> {children}
</> </div>
); );
};
}
export default Box;

1 de 6 Cursos y cupones en fernando-herrera.com

React sssssssssssssssssssssssssss
Guia de atajos ssssssssssssssss

Para usar el componente “Box” creado anteriormente: if (status === 'success') {

return (
const App = () => { <div>
return ( <h2>Datos cargados correctamente ✅ </h2>
<div> <p>Aquí está tu contenido increíble!</p>
{/* Pasamos elementos como children dentro </div>
del componente Box */} );
<Box> }
<h2>Hola Mundo</h2>
// Este return es obligatorio por TypeScript,
<p>Este es un párrafo</p> aunque nunca se debería alcanzar
</Box> return <p>Status no reconocido</p>;
</div> };
);
};
Listas de componentes
Importante: Podemos barrer listados en formato de arreglo
Los comentarios dentro del JSX, son expresiones de JavaScript con
su comentario interno, aquí no funciona el <!— —>, porque no es utilizando el método .map() de los arreglos y retornar
HTML. un JSX en la función callback.
const UserList = () => {
Renderización condicional // Lista de usuarios
const users = [
En React, no hay directivas para renderizar { id: 1, name: 'Fernando' },
condicionalmente o realizar ciclos, dependen { id: 2, name: 'Melissa' },
enteramente de expresiones de JavaScript. { id: 3, name: 'Natalia' },
const isLoggedIn = true;
];

const LoginMessage = () => { return (

return ( <div>
<div> <h2>Usuarios</h2>
{/* Renderizado condicional con ternario */}
{isLoggedIn ? ( <ul>
<h2>Bienvenido de nuevo! 🎉 </h2> {users.map((user) => (
) : ( <li key={user.id}>
<h2>Por favor, inicie sesión. 🔒 </h2> {/* Siempre se recomienda usar una key
)} única, como el ID */}
</div> 👤 {user.name}
);
};
</li>
))}
</ul>
</div>
Tip: );
Hay alternativas para condicionales simples. };
// Mostrar solo si isLoggedIn es true
Importante:
{isLoggedIn && <p>Bienvenido de nuevo! 🎉 </p>} Cuando se usa el .map(), siempre debes de colocar el atributo key.

// Mostrar si no está logueado

{!isLoggedIn && <p>Por favor, inicie sesión.</p>} Hooks
Son simples funciones que se de nen al inicio del
Es posible tener retornos prematuros para mantener el functional component y permiten acceso a objetos o
código limpio. funciones dentro del contexto o almacenar estado en
el componente.
type Status = 'loading' | 'error' | 'success';
import { useState } from 'react';
const MultiReturnConditional = () => {
const status: Status = 'loading'; export const MyCounter = () => {
const [count, setCount] = useState(0);
// 🔁 Render según el estado
if (status === 'loading') { return (
return <p>Cargando... ⏳ </p>; <div>
} <p>Count: {count}</p>
</div>
if (status === 'error') { );
return <p>Ups! Algo salió mal ❌ </p>; };
}

2 de 6 Cursos y cupones en fernando-herrera.com

fi
 React sssssssssssssssssssssssssss
Guia de atajos ssssssssssssssss

Listado de los hooks Últimos Hooks

Un listado de los hooks propios de React
Comando Descripción

Básicos useFormStatus Lee el estado de un <form>, el

Hooks que encontrarás en toda aplicación de React. último posteo.

Comando Descripción useActionState Actualiza el estado basado en

el resultado de un posteo de
formulario.
useState Maneja un estado local en el
componente.
useOptimistic Muestra valores optimistas
antes de que una acción sea
useE ect Ejecuta efectos secundarios y
limpieza al desmontar el resuelta.
componente. Importante:
Existen otros hooks para casos especí cos, pueden encontrar el
useContext Accede al valor alojado en el listado en React Docs.
contexto. (árbol de componentes)
Reglas de los Hooks
Adicionales Estas reglas están dadas por React y se deben de
Hooks que ofrecen comportamientos adicionales. respetar si quieres que tu aplicación funciones como
esperas.
Comando Descripción
Regla Explicación

useReducer Alternativa al useState para

lógica compleja. Siempre llama a los No pongas hooks dentro de
hooks en el mismo condiciones (if), bucles (for,
useRef Referencias mutables que no orden. while) o funciones internas.
causan re-render.
Solo usa hooks en No puedes usar hooks dentro
useMemo Memoriza valores para evitar componentes de funciones normales, clases,
volverlos a calcular entre re- funcionales o custom condicionales globales.
renders. hooks.

useCallback Memoriza funciones para evitar Los hooks deben Si creas un custom hook,
recreaciones innecesarias. comenzar con use. asegúrate de llamarlo useAlgo,
por ejemplo: useFetch,
useLayoutE ect Similar al useE ect, pero useAuth, etc.
sincronizado justo después del
render. Evita efectos No pongas funciones que
secundarios innecesarios modi quen estado sin incluirlas
useImperativeHandle Expone métodos desde un en useE ect. en las dependencias, o se
componente con forwardRef puede crear un bucle in nito.

No modi ques el estado Siempre usa setState (como

Relacionados al DOM directamente. setCount(newValue)) en lugar
Hooks orientados a información del DOM de modi car el estado actual
directamente.
Comando Descripción
Separa lógica en hooks Si tienes lógica repetida (por
personalizados si se ejemplo, un useE ect que hace
useDeferredValue Di ere valores para mejorar el
rendimiento entre re-renders. repite. fetch), considera extraerla en
un custom hook para
useTransition Permite renderizar partes del UI reutilizarla.
en el background, pueden ser
vistas como actualizaciones no Efectos del useE ect No crees un efecto gigante,
urgentes. deben de ser atómicos. sepáralo en efectos pequeños
con responsabilidades bien
useInsertionE ect Se ejecuta antes del render de nidas.
para estilos dinámicos.

3 de 6 Cursos y cupones en fernando-herrera.com

fi
fi
fi
ff
fi
ff
fi
ff
ff
ff
ff
ff
fi
fi
React sssssssssssssssssssssssssss
Guia de atajos ssssssssssssssss

Custom Hooks - Hooks personalizados Componente <Suspense>

Es posible separar lógica en hooks personalizados Permite desplegar un contenido hasta que sus hijos
para reutilizarla o bien crear componentes más limpios. terminen de cargar.
// Nombre del archivo: useMessage.ts <Suspense fallback={<Loading />}>
import { useState } from 'react';
<Albums />
// Hook que maneja un mensaje y permite </Suspense>
actualizarlo
const useMessage = () => { Importante:
Si hay un único suspense, el contenido se mostrará hasta que
const [message, setMessage] = todos los hijos resuelvan.
useState<string>(‘Hola Mundo!’);

// Método para cambiar el mensaje Si se desea una aproximación más granular, donde los
const updateMessage = (newMessage: string) => {
setMessage(newMessage);
hijos se muestran tan pronto terminan, se deben de
}; colocar múltiples suspense.
<Suspense fallback={<BigSpinner />}>
return {
message, <Biography />
updateMessage, <Suspense fallback={<AlbumsGlimmer />}>
}; <Panel>
}; <Albums />
</Panel>
export default useMessage; </Suspense>
</Suspense>
Consumo del hook personalizado useMessage
const MessageComponent = () => {
const { message, updateMessage } = useMessage();
React compiler
return ( El compilador de React permite optimizaciones de
<div> código sin necesidad de memorización manual por
<h2>{message}</h2>
<button onClick={() => parte del desarrollador.
updateMessage(‘Saludos a todos! 🚀 ’)}>
Change message
</button>
Manejo de eventos
</div> Los eventos de los elementos son los mismos que ya
); estamos acostumbrados a usar en el DOM tradicional,
};
pero los nombres son con camelCase.
import { ChangeEvent, FC, MouseEvent, useState } from
'react';

React API - use export const EventExample: FC = () => {

const [nombre, setNombre] = useState<string>('');
“use” no es un hook
const handleInputChange = (event:
Permite leer un valor de un recurso como una promesa ChangeEvent<HTMLInputElement>): void => {
o contexto, suspendiendo la creación hasta tener una setNombre(event.target.value);
};
resolución. Va de la mano del componente Suspense.
const MyComponent = () => { const handleClick = (event:
MouseEvent<HTMLButtonElement>): void => {
console.log(event);
const message = use(wait(2000)); // Suspende el alert(`Hola, ${nombre.trim() !== '' ? nombre :
componente 2s, luego retorna el mensaje 'invitado'}!`);
};
return <h2>{message}</h2>;
}; return (
<>
<h2>👋 Bienvenido</h2>

<input
Se debe de colocar el <Suspense> component type="text"
placeholder="Escribe tu nombre"
import { Suspense } from 'react'; value={nombre}
import MyComponent from './MyComponent'; onChange={handleInputChange}
/>
export default function App() {
return ( <button onClick={handleClick}>Saludar</button>
</>
<Suspense fallback={<p>Loading...</p>}> );
<MyComponent /> };
</Suspense>
);

4 de 6 Cursos y cupones en fernando-herrera.com

React
Guia de atajos

Formularios Paquetes de React recomendados

React no cuenta con componentes propios o • React Hook Form
especiales para el manejo de formularios. • Formik
• React Hot Toast
import { ChangeEvent, FC, FormEvent, useState } from
'react'; • TanStack Query
export const ContactForm: FC = () => {
• Shadcn/ui
// Estados tipados • React Bits
const [nombre, setNombre] = useState<string>('');
const [email, setEmail] = useState<string>(''); • Zustand
const [mensaje, setMensaje] = useState<string>(''); • React Router
// Manejadores de cambio por input • TanStack Router
const handleNombreChange = (e: • Axios
ChangeEvent<HTMLInputElement>): void => {
setNombre(e.target.value);
};

const handleEmailChange = (e:

Estilos y CSS
ChangeEvent<HTMLInputElement>): void => {
setEmail(e.target.value); Inline Styles
};
import { CSSProperties } from 'react';
const handleMensajeChange = (e:
ChangeEvent<HTMLTextAreaElement>): void => { export const InlineBox = () => {
setMensaje(e.target.value);
};
const boxStyle: CSSProperties = {
backgroundColor: 'tomato',
// Manejador del envío del formulario borderRadius: '8px',
const handleSubmit = (e: FormEvent<HTMLFormElement>): };
void => {
e.preventDefault();
return <div style={boxStyle}>Caja con
console.log('📬 Enviando formulario:', { estilo en línea</div>;
nombre, };
email,
mensaje,
}); CSS Tradicional
alert(`Gracias por tu mensaje, ${nombre}!`); Usar la palabra “className” en lugar de class para
// Resetear el formulario
setNombre('');
referirse a clases de CSS
setEmail('');
setMensaje('');
import './Box.css';
};
export const CssBox: React.FC = () => {
return ( return <div className="box">Caja con clase
<form onSubmit={handleSubmit}>
CSS</div>;
<h2>📨 Contáctanos</h2>
};
<input
type="text"
placeholder="Tu nombre"
CSS Modules
value={nombre}
onChange={handleNombreChange}
import styles from './Box.module.css';
/>
export const CssModuleBox: React.FC = () =>
<input {
type="email"
placeholder="Tu correo" return <div className={styles.box}>Caja
value={email} con CSS Module</div>;
onChange={handleEmailChange} };
/>

<textarea
placeholder="Escribe tu mensaje" Estilos condicionales
value={mensaje} El estilo condicional se puede aplicar en diferentes
onChange={handleMensajeChange}
/> niveles de componente.
interface Props {
<button type="submit">Enviar</button>
tipo: 'warning' | 'info';
</form>
}
);
};
export const DynamicStyle = ({ tipo }: Props) => {
const estilo: React.CSSProperties = {
Importante: color: tipo === 'warning' ? 'orange' : 'blue',
padding: '0.5rem',
Hay muchas formas de trabajar estos cambios, React };
tiene cientos de paquetes para el manejo de
return <p style={estilo}>Este es un mensaje de tipo
formularios con diferentes aproximaciones. {tipo}</p>;
};

5 de 6 Cursos y cupones en fernando-herrera.com

 React
Guia de atajos

Event Handler
Buenas prácticas Función que se ejecuta al ocurrir un evento (como
• Componentes pequeños y reutilizables. onClick, onMouseOver).
• Nombrado en PascalCase.
• Separar lógica del render. Controlled Component
• Extraer handlers (handleClick, handleChange). Elemento de formulario cuyo valor es manejado por el
• No usar Hooks dentro de condiciones o loops. estado de React.
• Crear hooks personalizados.
Uncontrolled Component
Glosario Elemento de formulario que maneja su propio valor
internamente, accesado con ref.
Los siguientes son términos importantes que se deben
de manejar por todo desarrollador de React. Keys
Identi cadores únicos usados en listas para ayudar a
React React a detectar cambios.
Es una biblioteca de JavaScript para crear interfaces
de usuario. Fragment
Permite agrupar múltiples elementos sin añadir un
JSX nodo extra (<> ... </>).
Es un lenguaje de marcado que permite escribir una
sintaxis similar a HTML en JavaScript. Children
Prop especial que representa los elementos anidados
Componentes dentro de un componente.
Son piezas de código que se pueden reutilizar y que se
encargan de una parte de la interfaz de usuario. Custom Hook
Función que encapsula lógica con hooks y puede
Props reutilizarse entre componentes.
Son datos que se pasan a un componente para que
pueda usarlos. Context API
Tradicionalmente el nombre que se da al gestor de
Estado estado propio en React.
Es un objeto que contiene datos que pueden cambiar
con el tiempo. Server Component
Componente que se ejecuta en el servidor (React 18+).
Hooks
Son funciones que permiten a los componentes usar el Suspense
estado y otras características de React. Componente que permite renderizar un fallback
mientras se carga algo (como lazy).
Context
Es un objeto que contiene datos que pueden ser Lazy loading
compartidos entre componentes. Técnica para cargar componentes o recursos solo
cuando se necesitan.
Renderizado (Render)
Es el proceso de convertir el código en HTML y
mostrarlo en el navegador. Memorización
Optimización para evitar renders innecesarios
Re-render (React.memo, useMemo).
Cuando React vuelve a dibujar un componente porque
cambió su estado o props. Prop Drilling
Signi ca pasar props de un componente a otro, a
Inmutabilidad través de muchos niveles intermedios.
Es el principio de que los datos no se pueden cambiar,
sino que se deben crear nuevos datos. Gestor de estado - State Manager
Es una herramienta o patrón que te ayuda a controlar y
Virtual DOM organizar los datos de la aplicación, particularmente
Representación en memoria del DOM real para hacer útil para evitar el Prop drilling.
actualizaciones e cientes.

6 de 6 Cursos y cupones en fernando-herrera.com

JkcClwlrdlrfdpgphcgpsfbnb
fi
fi
fi