3) Reemplazando createElement por JSX

Previous2) Creando elementos HTML con React.createElement API Next4) Creando el primer componente reutilizable con React

Last updated 7 years ago

3) Reemplazando createElement por JSX

Introducción

JSX es el standard para escribir aplicaciones con react. Analicemos esta declaración de variable:

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

El contenido de la variable no es ni HTML ni es un String. Parece HTML pero realmente es una mezcla de JavaScript y HTML.

Se llama JSX y es una extensión de JavaScript. Los creadores de react recomiendan usarlo para describir como debería ser la UI de un componente. Es parecido a un lenguaje de template, con la ventaja de que puedes agregarle todo el JavaScript que quieras, sin limitaciones.

Todo lo que escribimos en JSX se transforma en un "element" cómo vimos en el capítulo anterior. Esta transformación la hará con .

¿Por qué JSX?

No se requiere realmente usar JSX mientras se trabaja con aplicaciones react. Puedes desarrollar tus aplicaciones con createElement cómo vimos en el capitulo anterior. Pero usar JSX tiene ventajas.

Quizás se hizo popular por su sintaxis familiar, es casi como escribir HTML. La lógica de nuestra UI sea muy descriptiva y fácil de entender.

Analicemos este componente:

with-jsx.js

<div>
  <img src={url} className='item-image' />
  <span className='item-description'>{title + description}</span>
</div>

without-jsx.js

React.createElement(
  'div',
  null,
  React.createElement('img', { src: url, className: 'item-image' }),
  React.createElement(
    'span',
    { className: 'item-description' },
    title + description
  )
);

Sin JSX no queda del todo claro que es lo que está sucediendo. Con JSX visualizamos rápidamente como será la UI y además entendemos rápido desde donde se cargará la data. Es fácil entender lo que pasará con ese componente.

Cómo mencionamos, es una mezcla de JavaScript y HTML y por eso podemos incrustar variables o incluso código directamente en el template.

Reemplazando createElement por JSX

A continuación reemplazaremos el código que hicimos en el capitulo anterior por JSX.

<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
        const rootElement = document.getElementById('app');
        // const element = React.createElement(
        //    'div',
        //    {className: 'container'},
        //    'Hello word'
        // );
        const element = <div>Hello word</div>;
        ReactDOM.render(element, rootElement);
        </script>
    </body>
</html>

Cómo verás el código es mucho más lindo.

En nuestro ejemplo Babel transforma el código JSX a lo siguiente:

React.createElement(
    'div',
    null,
    'Hello word'
);

Contenido dinámico

Gracias a JSX y a su posibilidad de incrustar código JavaScript dentro de los template, podemos generar contenidos dinámicos en base a datos, condiciones, etc. A continuación se muestran algunos ejemplos, más adelante en el workshop profundizaremos.

Haciendo que el contenido del componente sea dinámico

const content = "Hello word";
const element = <div>{content}</div>;

Clases dinámicas

const content = "Hello word";
const style = "container";
const element = <div className={style}>{content}</div>;

Pasándole propiedades

const content = "Hello word";
const style = "container";
const props = {
    className: style,
    children: content,
};
const element = <div {...props}>;

Calma, más adelante veremos que es eso de las props y cómo darle estilos a nuestros componentes.

Lo importante es que hayas entendido que es JSX y cómo funciona, para saber más ingresa aquí: