ReactJS - JSX

React usa JSX para crear plantillas en lugar de JavaScript normal. No es necesario usarlo, sin embargo, a continuación se presentan algunas ventajas que lo acompañan.

• Es más rápido porque realiza la optimización al compilar código en JavaScript.

• También es de tipo seguro y la mayoría de los errores se pueden detectar durante la compilación.

• Hace que sea más fácil y rápido escribir plantillas, si está familiarizado con HTML.

Usando JSX

JSX parece un HTML normal en la mayoría de los casos. Ya lo usamos en el capítulo Configuración del entorno. Mira el código deApp.jsx donde volvemos div.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Aunque es similar a HTML, hay un par de cosas que debemos tener en cuenta al trabajar con JSX.

Elementos anidados

Si queremos devolver más elementos, debemos envolverlo con un elemento contenedor. Observe cómo estamos usandodiv como envoltorio para h1, h2 y p elementos.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Atributos

Podemos utilizar nuestros propios atributos personalizados además de las propiedades y atributos HTML habituales. Cuando queremos agregar un atributo personalizado, necesitamos usardata-prefijo. En el siguiente ejemplo, agregamosdata-myattribute como un atributo de p elemento.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Expresiones JavaScript

Las expresiones de JavaScript se pueden utilizar dentro de JSX. Solo necesitamos envolverlo con llaves.{}. El siguiente ejemplo representará2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

No podemos usar if else declaraciones dentro de JSX, en su lugar podemos usar conditional (ternary)Expresiones En el siguiente ejemplo, variablei igual a 1 para que el navegador renderice true, Si lo cambiamos a algún otro valor, representará false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Estilismo

React recomienda usar estilos en línea. Cuando queremos establecer estilos en línea, necesitamos usarcamelCasesintaxis. React también se agregará automáticamentepxdespués del valor numérico en elementos específicos. El siguiente ejemplo muestra cómo agregarmyStyle en línea para h1 elemento.

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

Comentarios

Al escribir comentarios, debemos poner paréntesis. {}cuando queremos escribir un comentario dentro de la sección de niños de una etiqueta. Es una buena práctica usar siempre{} al escribir comentarios, ya que queremos ser coherentes al escribir la aplicación.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Convenio de denominación

Las etiquetas HTML siempre usan lowercase nombres de etiquetas, mientras que los componentes de React comienzan con Uppercase.

Note - Deberías usar className y htmlFor como nombres de atributos XML en lugar de class y for.

Esto se explica en la página oficial de React como:

Dado que JSX es JavaScript, identificadores como class y forse desaconsejan como nombres de atributos XML. En cambio, los componentes de React DOM esperan nombres de propiedad DOM comoclassName y htmlFor, respectivamente.