3-jsx

Guía Mejorada: ¿Qué es JSX?

Introducción a JSX

JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que permite escribir estructuras similares a HTML directamente en código React. No es un lenguaje de plantillas, sino una forma declarativa de describir interfaces de usuario.

Beneficios Clave de JSX

  1. Sintaxis intuitiva: Combina la familiaridad de HTML con el poder de JavaScript

  2. Mejor legibilidad: Código más claro y mantenible

  3. Optimización automática: Se compila a llamadas eficientes de React.createElement()

  4. Prevención de errores: Verificación de sintaxis durante la compilación

Comparación: Con JSX vs Sin JSX

Ejemplo con JSX

jsx
Copy
Download
const Greeting = <h1 className="welcome">Hello, React!</h1>;

Ejemplo sin JSX

javascript
Copy
Download
const Greeting = React.createElement(
  'h1',
  { className: 'welcome' },
  'Hello, React!'
);

Nota: JSX no es obligatorio, pero mejora significativamente la experiencia de desarrollo.

Características Esenciales

1. Interpolación de Expresiones

jsx
Copy
Download
const user = { name: 'Alex' };
const Greeting = <h1>Hello, {user.name}!</h1>;

const Calculation = <p>5 × 8 = {5 * 8}</p>;

2. Bloques de HTML Multilínea

jsx
Copy
Download
const Article = (
  <article>
    <header>
      <h2>React Fundamentals</h2>
    </header>
    <section>
      <p>Learn about JSX syntax and components</p>
    </section>
  </article>
);

3. Fragmentos

jsx
Copy
Download
const Items = (
  <>
    <li>First item</li>
    <li>Second item</li>
  </>
);

4. Reglas de Sintaxis

  • Cierre de etiquetas: <img src="..." alt="..." />

  • Atributo className: <div className="container">

  • Un elemento raíz: Siempre un padre contenedor

Renderizado Condicional

Opción 1: Declaración externa

jsx
Copy
Download
function WelcomeMessage({ isLoggedIn }) {
  let message;
  if (isLoggedIn) {
    message = <span>Welcome back!</span>;
  } else {
    message = <span>Please sign in</span>;
  }
  
  return <div>{message}</div>;
}

Opción 2: Operador ternario

jsx
Copy
Download
function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <span>Welcome back!</span>
      ) : (
        <span>Please sign in</span>
      )}
    </div>
  );
}

Opción 3: Operador lógico AND

jsx
Copy
Download
function Notification({ hasUnread }) {
  return (
    <div>
      {hasUnread && <span>You have new messages</span>}
    </div>
  );
}

Diferencias Clave con HTML

CaracterísticaHTMLJSX
Atributo classclassclassName
Estilos inlinestyle="color: red"style={{ color: 'red' }}
EventosonclickonClick
EtiquetasCierre opcionalCierre obligatorio

Buenas Prácticas

  1. Componentes PascalCase: <MyComponent />

  2. Propiedades camelCase: onClick, tabIndex

  3. Fragmentos para múltiples elementos

  4. JSX en archivos .jsx o .tsx para mejor soporte en IDEs

Compilación de JSX

JSX se transforma en JavaScript estándar mediante Babel:

jsx
Copy
Download
// Antes (JSX)
const element = <h1>Hello</h1>;

// Después (JavaScript)
const element = React.createElement('h1', null, 'Hello');

Conclusión

JSX es una herramienta poderosa que combina la expresividad de HTML con la flexibilidad de JavaScript. Al dominar JSX, podrás:

  • Crear interfaces de usuario más intuitivas

  • Desarrollar componentes React más mantenibles

  • Escribir código más conciso y legible

Recuerda que JSX es opcional, pero altamente recomendado para proyectos React modernos.


Comentarios

Publicar un comentario

Entradas más populares de este blog

6.5-4-Qué son las Props

Qué son las Props Son datos que se pasan de un  componente padre  a un  componente hijo . Las props son  inmutables  (el hijo no puede modificarlas directamente) y pueden ser de cualquier tipo: Strings, números, booleanos Arrays, objetos Funciones (para comunicación hijo → padre) Elementos React, componentes, etc. Permiten la comunicación entre componentes(Padre al hijo). Pueden ser de cualquier tipo: strings, números, arrays, objetos, funciones, etc. Ejemplo Básico jsx-cadena-entero // En el componente padre (App.js) function App ( ) { const userName = "Agustín Navarro" ; const age = 26 ; return ( < Saludar nombre = { userName } edad = { age } /> ) ; } // En el componente hijo (Saludar.js) function Saludar ( props ) { return ( < div > < h1 > Hola { props . nombre } </ h1 > < p > Edad: { props . edad } años </ p > </ div > ) ; } 🔹  ...
Leer más

6.8-23-pasando funciones a nuestro componente

Imagen
Pasando Funciones como Props en React Introducción Clara y Motivadora En React, los componentes no solo pueden recibir datos a través de props, ¡también pueden recibir funciones! Esto nos permite: ✅ Crear componentes interactivos (como botones que ejecutan acciones) ✅ Comunicar componentes hijos con padres ✅ Construir aplicaciones más dinámicas y reactivas 1. Pasando Funciones Básicas Ejemplo Simple: Botón con Alerta jsx-Funciones Básicas Copy Download // Componente Padre (App.js) function App ( ) { const saludar = ( ) => { alert ( "¡Hola desde el componente padre!" ) ; } ; return < BotonSaludar onClick = { saludar } /> ; } // Componente Hijo (BotonSaludar.js) function BotonSaludar ( props ) { return ( < button onClick = { props . onClick } > Saludar </ button > ) ; } 🔹  Key Points : La función se define en el padre y se pasa como prop ( onClick ) El hijo ejecuta la función cuando ocurre un evento ...
Leer más

6.12-0-3- Spread Operator

 Spread Operator en Props de React El  spread operator  ( ... ) es una herramienta poderosa en React que nos permite pasar múltiples  props  de manera más eficiente y limpia. ¡Veamos un ejemplo práctico! 🔹 ¿Cómo funciona? En lugar de pasar cada  prop  manualmente, podemos expandir un objeto directamente en las props del componente. Ejemplo sencillo: jsx-operator-objeto  // Definimos un objeto con las props const usuario = { nombre : "Ana" , edad : 25 , pais : "España" } ; // Pasamos todas las props de una vez usando ... function TarjetaUsuario ( props ) { return ( < div > < h2 > Nombre: { props . nombre } </ h2 > < p > Edad: { props . edad } </ p > < p > País: { props . pais } </ p > </ div > ) ; } // Uso del componente function App ( ) { return < TarjetaUsuario { ... usuario } /> ; } 🔹 Beneficios: ✅  Evita repetir ...
Leer más