Referencia Rápida

Cheat Sheets

Guías de referencia rápida para HTML5, CSS3, JavaScript y React

📄

HTML5 Cheat Sheet

Estructura básica

<!DOCTYPE html>

Encabezado principal

<h1>Título</h1>

Párrafo

<p>Texto</p>

Enlace

<a href="url">Texto</a>

Imagen

<img src="imagen.jpg" alt="Descripción">

Lista no ordenada

<ul><li>Item</li></ul>

Contenedor

<div>Contenido</div>

Sección

<section>Contenido</section>

🎨

CSS3 Cheat Sheet

Color de texto

color: #667eea;

Color de fondo

background: #0a0e27;

Tamaño de fuente

font-size: 16px;

Centrar texto

text-align: center;

Flexbox

display: flex;

Grid

display: grid;

Margen

margin: 20px;

Relleno

padding: 10px;

Borde redondeado

border-radius: 8px;

Sombra

box-shadow: 0 4px 10px rgba(0,0,0,0.1);

Transición

transition: all 0.3s ease;

Transformación

transform: scale(1.1);

⚡

JavaScript Cheat Sheet

Variable constante

const nombre = 'valor';

Variable mutable

let edad = 25;

Arrow function

const func = () => { };

Seleccionar elemento

document.querySelector('.clase');

Event listener

element.addEventListener('click', () => {});

Array map

array.map(item => item * 2);

Array filter

array.filter(item => item > 5);

Fetch API

fetch(url).then(res => res.json());

Async/await

async function() { await promise; }

Template literal

`Hola ${nombre}`

Destructuring

const { prop } = objeto;

Spread operator

[...array, newItem];

⚛️

React Cheat Sheet

Componente funcional

function Component() { return <div />; }

useState

const [state, setState] = useState(0);

useEffect

useEffect(() => {}, [deps]);

Props

function Comp({ prop }) { }

Map array

{array.map(item => <div key={item.id} />)}

Conditional render

{condition && <Component />}

Event handler

onClick={() => handleClick()}

useRef

const ref = useRef(null);

Form input

onChange={(e) => setValue(e.target.value)}

useContext

const context = useContext(MyContext);

Fragment

<>...</>

Children prop

function Comp({ children }) { }