JSX y su Función Básica

JSX es una extensión de sintaxis para JavaScript que se asemeja a los lenguajes de plantillas, pero con todas las capacidades de JavaScript. En esencia, JSX es un azúcar sintáctico para la llamada React.createElement en JavaScript.

Transformación de JSX a DOM

1. Las etiquetas JSX son convertidas por Babel en llamadas a React.createElement;

2. La función createElement retorna finalmente una instancia de ReactElement;

3. ReactElement organiza los parámetros recibidos en un objeto element, que es una representación de objetos JavaScript del DOM, también conocido como "DOM virtual";

4. Finalmente, ReactDOM.render presenta este elemento en el contenedor DOM especificado.

Funciones Clave Detrás de JSX

Crear Elemento

Parámetros: tipo, configuración, hijos;

Resultado: Instancia de ReactElement

Desglose de la función:

1. Manejo especial de atributos clave de elemnetos React como key, ref, self, source;
2. Iteración sobre configuración para extraer propeidades a props;
3. Extracción de elementos hijos y agregación a props.children;
4. Formateo de defaultProps;
5. Retorno de la instancia de ReactElement;

Código:

export function crearElemento(tipo, config, ...hijos) {
  let nombrePropiedad;
  const props = {};
  let clave = null;
  let referencia = null;
  let propio = null;
  let origen = null;

  if (config != null) {
    if (tieneReferenciaValida(config)) {
      referencia = config.ref;
    }
    if (tieneClaveValida(config)) {
      clave = '' + config.key;
    }
    propio = config.__propio === undefined ? null : config.__propio;
    origen = config.__origen === undefined ? null : config.__origen;

    for (nombrePropiedad in config) {
      if (
        tienePropiedad.call(config, nombrePropiedad) &&
        !PROPIEDADES_RESERVADAS.tiene(nombrePropiedad)
      ) {
        props[nombrePropiedad] = config[nombrePropiedad];
      }
    }
  }

  const longitudHijos = hijos.length;
  if (longitudHijos === 1) {
    props.hijos = hijos[0];
  } else if (longitudHijos > 1) {
    const arregloHijos = Array.from(hijos);
    props.hijos = arregloHijos;
  }

  if (tipo && tipo.defaultProps) {
    const defaultProps = tipo.defaultProps;
    for (nombrePropiedad in defaultProps) {
      if (props[nombrePropiedad] === undefined) {
        props[nombrePropiedad] = defaultProps[nombrePropiedad];
      }
    }
  }

  return ReactElement(
    tipo,
    clave,
    referencia,
    propio,
    origen,
    ReactDueñoActual.corriente,
    props,
  );
}

ReactElement

Parámetros: tipo, clave, referencia, propio, origen, dueño, props

Resultado: elemento

Función: ReactElement organiza los parámetros recibidos en un objeto element, que representa el DOM virtual, y lo devuelve para ser utilizado por React.createElement.

Código:

const ReactElement = function(tipo, clave, referencia, propio, origen, dueño, props) {
  const elemento = {
    $$typeof: TIPO_REACT_ELEMENT,
    type: tipo,
    key: clave,
    ref: referencia,
    props: props,
    _owner: dueño,
  };
  if (__DEV__) {
    // Código específico para entornos de desarrollo omitido para mayor claridad.
  }
  return elemento;
};

ReactDOM.render

Parámetros: elemento, contenedor, [callback]

Resultado: El elemento se monta en el contenedor especificado.