Presentando JSX

Es una extensión de la sintaxis de JS, JSX produce "elementos" de React.

¿Porque JSX?

React considera que la lógica de renderizado esta intrínsecamente unida a la lógica de la interfaz de usuario: como se manejan los eventos, como cambia el estado con el tiempo, como se preparan los datos para su visualizacion.

En lugar de seprar maquetado y logica en archivos separados, React separa intereses con unidades ligeramente acopladas llamadas "componentes" que contienen ambas.

Insertando expresiones en JSX

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX tambien es una expresion

Despues de complicarse las expresiones JSX se transforman en llamadas a funciones regulares de JS y se evaluan en objetos JS.

Por lo que se puede utilizar JSX (en todo lo que quieras?) en JS, dentro de declaraciones if bucles for, asignarlo a variables, argumentos, retorno desde funciones:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Especificando atributos en JSX

const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;

Llaves para expresiones o comillas para sitrings literales, no ambas....

JSX Previene ataques de inyección

Por defecto react DOM escapa cualquier valor insertado en JSX antes de renderizarlo. De este modo se asegura de que nunca se pueda insertar nada que no este explícitamente escrito en tu aplicación.

Todo es convertido en un string antes del renderizado. Esto ayuda a prevenir vulnerabilidades XSS (cross-site-scripting).

JSX representa objetos

Babel compila JSX a llamadas de React.createElement().

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
{/*Esto es equivalente a:*/}
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() realiza algunas comprobaciones para ayudar a escribir codigo libre de errores, pero en esencia crea un objeto:

	// Nota: Esta estructura está simplificada
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};