Utilizando JSX

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

Esto no es HTML ni un string. Es JSX, que es una extensión a la sintaxis de JavaScript. Se utiliza en React para definir cómo se debe ver la UI de un componente. Básicamente es una mezcla de HTML y Javascript, que se escribe en archivos .js (archivos javascript) y es una forma muy práctica y sencilla de indicar que dibuja un componente.

JSX crea elementos de React, que en realidad son simplemente objetos en JavaScript, como vimos anteriormente. Para hacer esta traducción de JSX a javascript común y corriente, se utiliza Babel.

Características de JSX

Expresiones en JSX

Dentro de los tags de JSX es posible utilizar cualquier expresión JavaScript, ya sea una cuenta matemática, o evaluar una función, etc. Esto hace que sea muy simple describir la lógica que se encuentra en nuestros componentes. Por ejemplo:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
var user = {
  firstName: 'José',
  lastName: 'Pérez'
};
var element = (
  <h1>
      Hello, {formatName(user)}!
  </h1>
);

Si renderizamos (dibujamos) la variable element, lo que se renderiza en este caso es <h1>Hello, José Pérez</h1>

JSX tambien es una expresión

Como se mencionó antes, cuando JSX es compilado pasa a ser un objeto JavaScript, por lo que puede utilizarse dentro de if's, loops for, asignarlo a variables, aceptarlo como argumentos y retornarlo en funciones.

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

Atributos en JSX

A los tags de JSX se les puede especificar atributos, al igual que sus tags equivalentes en HTML. La diferencia es que en JSX se escriben utilizando nomenclatura camelCase:

tabindex se convierte en tabIndex
onclick se convierte en onClick

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

Un caso a tener en cuenta: En Javascript class es una palabra reservada, por lo que para proporcionar una clase, en JSX usamos className

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);

Hola Mundo: Reemplazando createElement por JSX

Vamos a modificar el código que hicimos en el capitulo anterior para usar JSX ahora.

<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 className="container">Hola Mundo</div>;
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

Además de incluir los scripts de React y React-Dom ahora agregamos Babel. Babel transformará el código JSX en el código equivalente en react.

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

React.createElement(
    'div',
    null,
    'Hola Mundo'
);

Pueden probar traducir cualquier código JSX a JavaScript normal usando un traductor online en Babel.

PreviousHola Mundo NextComponentes

Last updated 7 years ago

Was this helpful?

hashtagCaracterísticas de JSX

hashtagExpresiones en JSX

hashtagJSX tambien es una expresión

hashtagAtributos en JSX

hashtagHola Mundo: Reemplazando createElement por JSX

Características de JSX

Expresiones en JSX

JSX tambien es una expresión

Atributos en JSX

Hola Mundo: Reemplazando createElement por JSX