¿Por qué JSX?
React acepta el hecho de que la lógica de representación está inherentemente acoplada
con otra lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el
estado con el tiempo y cómo se preparan los datos para su visualización.
En lugar de separar tecnologías artificialmente al colocar el marcado y la lógica en
archivos separados, React separa las preocupaciones con unidades débilmente
acopladas llamadas "componentes" que contienen ambas. .
React no requiere el uso de JSX, pero la mayoría de las personas lo encuentran útil
como ayuda visual cuando trabajan con la interfaz de usuario dentro del código
JavaScript. También permite que React muestre mensajes de error y advertencia más
útiles.
Una vez aclarado esto, ¡comencemos!
Incrustar expresiones en JSX
En el siguiente ejemplo, declaramos una variable llamada namey luego la usamos dentro
de JSX envolviéndola entre llaves:
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
Puede poner cualquier expresión JavaScript válida dentro de las llaves en JSX. Por
ejemplo, 2 + 2, [Link] formatName(user)son todas expresiones
JavaScript válidas.
En el siguiente ejemplo, incrustamos el resultado de llamar a una función de JavaScript,
formatName(user)en un <h1>elemento.
function formatName(user) {
return [Link] + ' ' + [Link];
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
Pruébelo en CodePen
Dividimos JSX en varias líneas para facilitar la lectura. Si bien no es obligatorio, al
hacer esto también recomendamos incluirlo entre paréntesis para evitar los problemas
de la inserción automática de punto y coma .
JSX también es una expresión
Después de la compilación, las expresiones JSX se convierten en llamadas a funciones
de JavaScript normales y se evalúan como objetos de JavaScript.
Esto significa que puedes usar JSX dentro de ifdeclaraciones y forbucles, asignarlo a
variables, aceptarlo como argumentos y devolverlo desde funciones:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>; }
return <h1>Hello, Stranger.</h1>;}
Especificación de atributos con JSX
Puede utilizar comillas para especificar cadenas literales como atributos:
const element = <a href="[Link] link </a>;
También puede utilizar llaves para incrustar una expresión de JavaScript en un atributo:
const element = <img src={[Link]}></img>;
No coloque comillas entre llaves al incrustar una expresión de JavaScript en un atributo.
Debe utilizar comillas (para valores de cadena) o llaves (para expresiones), pero no
ambas en el mismo atributo.
Advertencia:
Dado que JSX está más cerca de JavaScript que de HTML, React DOM utiliza
camelCaseuna convención de nomenclatura de propiedades en lugar de nombres de
atributos HTML.
Por ejemplo, classse convierte classNameen JSX y tabindexse convierte en
tabIndex.
Especificación de niños con JSX
Si una etiqueta está vacía, puedes cerrarla inmediatamente con />, como XML:
const element = <img src={[Link]} />;
Las etiquetas JSX pueden contener hijos:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX previene ataques de inyección
Es seguro incrustar la entrada del usuario en JSX:
const title = [Link];
// This is safe:
const element = <h1>{title}</h1>;
De forma predeterminada, React DOM escapa de cualquier valor incrustado en JSX
antes de renderizarlo. Por lo tanto, garantiza que nunca podrá inyectar nada que no esté
escrito explícitamente en su aplicación. Todo se convierte en una cadena antes de
renderizarse. Esto ayuda a prevenir ataques XSS (cross-site-scripting) .
JSX representa objetos
Babel compila JSX hasta [Link]()las llamadas.
Estos dos ejemplos son idénticos:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = [Link](
'h1',
{className: 'greeting'},
'Hello, world!'
);
[Link]()realiza algunas comprobaciones para ayudarle a escribir
código sin errores, pero esencialmente crea un objeto como este:
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
Estos objetos se denominan "elementos de React". Puedes considerarlos como
descripciones de lo que quieres ver en la pantalla. React lee estos objetos y los usa para
construir el DOM y mantenerlo actualizado.