Entendiendo JSX
JSX es una extension de sintaxis que te permite escribir markup similar a HTML dentro de JavaScript.
Sintaxis basica
// JSX se ve como HTML
const elemento = <h1>Hola Mundo</h1>;
// Pero es JavaScript!
// Se convierte en:
const elemento = React.createElement('h1', null, 'Hola Mundo');Reglas de JSX
1. Un solo elemento raiz
// MAL - multiples elementos raiz
return (
<h1>Titulo</h1>
<p>Parrafo</p>
)
// BIEN - envuelto en un div
return (
<div>
<h1>Titulo</h1>
<p>Parrafo</p>
</div>
)
// MEJOR - Fragment (sin div extra)
return (
<>
<h1>Titulo</h1>
<p>Parrafo</p>
</>
)2. Cierra todas las etiquetas
// HTML permite esto
<img src="foto.jpg">
<input type="text">
// JSX requiere cerrar
<img src="foto.jpg" />
<input type="text" />3. camelCase para atributos
// HTML
<div class="container">
// JSX
<div className="container">Expresiones JavaScript en JSX
Usa llaves {} para insertar JavaScript:
const nombre = "Maria";
const edad = 25;
return (
<div>
<h1>Hola {nombre}!</h1>
<p>Tienes {edad} anos</p>
<p>En 5 anos tendras {edad + 5}</p>
<p>Fecha: {new Date().toLocaleDateString()}</p>
</div>
);Estilos en JSX
// Estilos inline (objeto JavaScript)
<div style={{ color: 'blue', fontSize: '20px' }}>
Texto azul
</div>
// Con clases CSS
<div className="mi-clase">
Usando CSS
</div>Practica de portfolio
Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.
- Entregable: una captura, documento, repositorio o tablero con el resultado final.
- Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.
- Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.