React JSX

JSX (JavaScript XML) es una extensión de sintaxis de JavaScript que se parece a XML. En React se usa comúnmente en lugar de JavaScript convencional para escribir componentes de UI, permitiéndote describir la estructura y el comportamiento de los componentes de manera similar a HTML.

El uso de JSX no es obligatorio, pero tiene las siguientes ventajas principales:

• Alta eficiencia de ejecución: al compilarse a código JavaScript se optimiza y se ejecuta más rápido;
• Seguridad de tipos: se pueden detectar errores en la fase de compilación (mejor aún con TypeScript);
• Escritura conveniente: la estructura de la interfaz de usuario es intuitiva y clara, incrustar expresiones de JavaScript es más flexible, y escribir plantillas es simple y rápido;
• Característica esencial: no es una cadena ni HTML, es compilado por Babel (integrado en Vite) en llamadas a React.createElement.

Veamos primero el siguiente código:

const element = <h1>Hello, world!</h1>;

Esta sintaxis de etiquetas que puede parecer un poco extraña no es una cadena ni HTML.

Se llama JSX, una extensión de sintaxis de JavaScript. Recomendamos usar JSX en React para describir la interfaz de usuario.

JSX se implementa dentro de JavaScript.

Sabemos que los elementos son la unidad más pequeña que compone una aplicación de React; JSX se usa para declarar los elementos en React.

A diferencia de los elementos DOM del navegador, los elementos en React son en realidad objetos comunes; React DOM puede garantizar que el contenido de los datos del DOM del navegador se mantenga consistente con los elementos de React.

Para renderizar elementos de React en el nodo raíz del DOM, los pasamos al método ReactDOM.render() para renderizarlos en la página:

Nota:

Dado que JSX es JavaScript, algunos identificadores comoclassyforno se recomiendan como nombres de atributos XML. En su lugar, React DOM usaclassNameyhtmlForpara los atributos correspondientes.

---

Reglas de sintaxis de JSX

JSX se parece a HTML, pero tiene reglas estrictas:

Las etiquetas deben estar cerradas:

• HTML puede<br>, pero JSX debe<br />(autocierre).
• Todas las etiquetas deben cerrarse:<div></div>。

class → className：

Debido a que class es una palabra clave de JavaScript, se usa className en su lugar.

<div className="container">内容</div>

htmlFor (dentro de la etiqueta):

<label for="id"> → <label htmlFor="id">

Componentes que comienzan con mayúscula:

Los componentes personalizados deben comenzar con mayúscula (las minúsculas se tratan como etiquetas HTML).

<Card />  {/* 正确，自定义组件 */}
<card />  {/* 错误，会被当成 <card> HTML 标签 */}

Comentarios:

usar{/* contenido del comentario */}。

jsx{/* 这是一个 JSX 注释 */}

Elemento raíz:

return solo puede tener un nodo raíz.

return (
  <>  {/* 碎片 Fragment，空标签，不渲染 DOM */}
    <h1>标题</h1>
    <p>段落</p>
  </>
);

Podemos abrir src/App.jsx y cambiar return a:

return (
  <>
    <h1 className="title">JSX 语法规则演示</h1>
    <img src="../vite.svg.html" alt="Vite Logo" />
    <br />
    {/* 自闭合标签和注释 */}
    <p>注意 className 和闭合标签</p>
  </>
);

Guarda el archivo para ver el efecto.

---

Inserción de expresiones, renderizado condicional, renderizado de listas

Lo más poderoso de JSX es que puedes usar {} para incrustar expresiones de JavaScript (solo expresiones, no sentencias como if/for).

Inserción de expresiones

Cualquier expresión JS válida se puede colocar dentro{}：

const name = 'ejemplo';
const now = new Date().toLocaleString();

return (
  <div>
    <h1>你好，{name}！</h1>
    <p>当前时间：{now}</p>
    <p>计算结果：{2 + 3 * 5}</p>  {/* 17 */}
  </div>
);

Renderizado condicional

Usa el operador ternario o&&：

const isLoggedIn = true;
const count = 0;

return (
  <div>
    {isLoggedIn ? <h1>欢迎回来，{name}！</h1> : <h1>请登录</h1>}
    
    {count > 0 && <p>你有 {count} 条未读消息</p>}  {/* count 为 0 时不渲染 */}
  </div>
);

Evita:No uses sentencias if directamente en JSX (se pueden usar dentro del cuerpo de la función).

Renderizado de listas (importancia de key)

Usa map() para renderizar arreglos; debes agregar el atributo key a cada elemento (identificador único, ayuda a React a actualizar el DOM de manera eficiente).

const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>  {/* key 必须唯一且稳定！ */}
        {item.name}
      </li>
    ))}
  </ul>
);

Importancia de key:

• Sin key: React mostrará una advertencia y puede causar errores de renderizado (especialmente cuando la lista cambia dinámicamente).
• Mala práctica: usar index como key (key={index}) — cuando el orden de la lista cambia, puede provocar renderizados innecesarios o pérdida de estado.
• Mejor práctica: usar un ID único de los datos (como el id de la base de datos).

Manejo de estilos

React tiene múltiples formas de manejar estilos; primero aprenderemos las dos más básicas.

Estilo en línea (inline style)

Usa el atributo style, cuyo valor es un objeto (notación camelCase):

return (
  <div
    style={{
      backgroundColor: '#F0F0F0',
      padding: '20px',
      borderRadius: '8px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <h2 style={{ color: 'blue', marginBottom: '10px' }}>
      内联样式示例
    </h2>
  </div>
);

• Ventajas: los estilos dinámicos son fáciles (se pueden usar variables).
• Desventajas: dificulta el mantenimiento de estilos complejos.

CSS Modules (recomendado, aislamiento de ámbito)

Vite admite CSS Modules por defecto, lo que evita la contaminación global.

Crea src/App.css (ya existe) o un nuevo archivo src/styles/Card.module.css:

/* Card.module.css */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px;
}

.title {
  color: #333;
  margin: 0 0 10px 0;
}

.content {
  color: #666;
}

Importarlo y usarlo en el componente (se generan automáticamente nombres de clase con ámbito):

import styles from './styles/Card.module.css';

return (
  <div className={styles.card}>
    <h3 className={styles.title}>标题</h3>
    <p className={styles.content}>内容</p>
  </div>
);

• Ventaja: los nombres de clase se generan automáticamente con hash (como .card__abc123), no habrá conflictos.

Práctica completa:Cambia el componente Card anterior para usar CSS Modules.

Crea src/components/Card.module.css:

.container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: white;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.title {
  margin: 0 0 10px 0;
  padding: 20px 20px 0;
  color: #333;
}

.content {
  padding: 0 20px 20px;
  color: #666;
}

Modifica Card.jsx:

import styles from './Card.module.css';

const Card = ({ title, content, imageUrl }) => {
  return (
    <div className={styles.container}>
      {imageUrl && <img src={imageUrl} alt={title} className={styles.image} />}
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.content}>{content}</p>
    </div>
  );
};

export default Card;

---

Usar JSX

JSX se parece a HTML, podemos ver un ejemplo:

Podemos anidar varias etiquetas HTML en el código anterior; es necesario envolverlas con un elemento div. En el ejemplo, al elemento p se le agregó un atributo personalizadodata-myattribute, para agregar un atributo personalizado se necesita usardata-prefijo.

Archivo independiente

Tu código React JSX puede estar en un archivo independiente; por ejemplo, creamos unhelloworld_react.jsarchivo, con el siguiente código:

Luego incluye ese archivo JS en el archivo HTML:

---

Expresiones de JavaScript

Podemos usar expresiones de JavaScript en JSX. Las expresiones se escriben entre llaves{}Dentro de ellas. El ejemplo es el siguiente:

En JSX no se pueden usarif elsesentencias, pero se puede usarconditional (operación ternaria)expresión como alternativa. En el siguiente ejemplo, si la variableies igual a1el navegador mostrarátrue, si cambias el valor de i, se mostraráfalse.

---

Estilos

React recomienda usar estilos en línea. Podemos usarcamelCasesintaxis para definir estilos en línea. React agregará automáticamente después del número del elemento especificadopx. El siguiente ejemplo muestra cómoh1agregar al elementomyStyleestilos en línea:

---

Comentarios

Los comentarios deben escribirse entre llaves, por ejemplo:

---

Arreglos

JSX permite insertar arreglos en la plantilla; los arreglos expanden automáticamente todos sus elementos:

Otras extensiones