Empezando con JSX

JSX es una tecnología que fue introducida por React. Vamos a sumergirnos en ello

Introducción a JSX

JSX es una tecnología que fue introducida por React.

Aunque React puede funcionar completamente bien sin usar JSX, es una tecnología ideal para trabajar con componentes, por lo que React se beneficia mucho de JSX.

Al principio, podría pensar que usar JSX es como mezclar HTML yJavaScript(y como verá CSS).

Pero esto no es cierto, porque lo que realmente está haciendo cuando usa la sintaxis JSX es escribir una sintaxis declarativa de lo que debería ser la interfaz de usuario de un componente.

Y está describiendo que la interfaz de usuario no usa cadenas, sino JavaScript, lo que le permite hacer muchas cosas agradables.

Una cartilla JSX

Así es como se define una etiqueta h1 que contiene una cadena:

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

Parece una extraña mezcla de JavaScript y HTML, pero en realidad es todo JavaScript.

Lo que parece HTML, es en realidad azúcar sintáctico para definir componentes y su posicionamiento dentro del marcado.

Dentro de una expresión JSX, los atributos se pueden insertar muy fácilmente:

const myId = 'test'
const element = <h1 id={myId}>Hello, world!</h1>

Solo debe prestar atención cuando un atributo tiene un guión (-) que se convierte a la sintaxis camelCase en su lugar, y estos 2 casos especiales:

  • classse convierte enclassName
  • forse convierte enhtmlFor

porque son palabras reservadas en JavaScript.

Aquí hay un fragmento de JSX que envuelve dos componentes en undivetiqueta:

<div>
  <BlogPostsList />
  <Sidebar />
</div>

Una etiqueta siempre debe estar cerrada, porque esto es más XML que HTML (si recuerdas los días de XHTML, esto te resultará familiar, pero desde entonces ganó la sintaxis suelta de HTML5). En este caso se utiliza una etiqueta de cierre automático.

Observe cómo envolví los 2 componentes en undiv. ¿Por qué? Porquela función render () solo puede devolver un solo nodo, por lo que en caso de que desee devolver 2 hermanos, simplemente agregue un padre. Puede ser cualquier etiqueta, no solodiv.

Transpilar JSX

Un navegador no puede ejecutar archivos JavaScript que contengan código JSX. Primero deben transformarse en JS normal.

¿Cómo? Haciendo un proceso llamadotranspiling.

Ya dijimos que JSX es opcional, porque para cada línea JSX, está disponible una alternativa de JavaScript simple correspondiente, y eso es a lo que se transpila JSX.

Por ejemplo, las siguientes dos construcciones son equivalentes:

JS simple

ReactDOM.render(
  React.createElement('div', { id: 'test' },
    React.createElement('h1', null, 'A title'),
    React.createElement('p', null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

JSX

ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>A paragraph</p>
  </div>,
  document.getElementById('myapp')
)

Este ejemplo muy básico es solo el punto de partida, pero ya puede ver cuán complicada es la sintaxis simple de JS en comparación con el uso de JSX.

En el momento de escribir este artículo, la forma más popular de realizar eltranspilaciones usarBabel, que es la opción predeterminada cuando se ejecutacreate-react-app, así que si lo usas no tienes que preocuparte, todo sucede bajo el capó para ti.

Si no usacreate-react-appnecesita configurar Babel usted mismo.

JS en JSX

JSX acepta cualquier tipo de JavaScript mezclado.

Siempre que necesite agregar algo de JS, simplemente colóquelo entre llaves{}. Por ejemplo, aquí se explica cómo utilizar un valor constante definido en otro lugar:

const paragraph = 'A paragraph'
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>{paragraph}</p>
  </div>,
  document.getElementById('myapp')
)

Este es un ejemplo básico. Los tirantes rizados aceptanalgunaCódigo JS:

const paragraph = 'A paragraph'
ReactDOM.render(
  <table>
    {rows.map((row, i) => {
      return <tr>{row.text}</tr>
    })}
  </table>,
  document.getElementById('myapp')
)

Como se puede veranidamos JavaScript dentro de JSX definido dentro de JavaScript anidado en JSX. Puedes ir tan profundo como necesites.

HTML en JSX

JSX se parece mucho a HTML, pero en realidad es sintaxis XML.

Al final, renderiza HTML, por lo que necesita conocer algunas diferencias entre cómo definiría algunas cosas en HTML y cómo las definiría en JSX.

Necesitas cerrar todas las etiquetas

Al igual que en XHTML, si alguna vez lo ha utilizado, debe cerrar todas las etiquetas: no más<br>pero en su lugar use la etiqueta de cierre automático:<br />(lo mismo ocurre con otras etiquetas)

camelCase es el nuevo estándar

En HTML encontrará atributos sin ningún caso (p. Ej.onchange). En JSX, se les cambia el nombre a su equivalente camelCase:

  • onchange=>onChange
  • onclick=>onClick
  • onsubmit=>onSubmit

classse convierte enclassName

Debido al hecho de que JSX es JavaScript yclasses una palabra reservada, no se puede escribir

<p class="description">

pero necesitas usar

<p className="description">

Lo mismo se aplica aforque se traduce ahtmlFor.

El atributo de estilo cambia su semántica

losstyleatributo en HTML permite especificar estilo en línea. En JSX ya no acepta una cadena, y enCSS en Reactverá por qué es un cambio muy conveniente.

Formularios

La definición de los campos de formulario y los eventos se modifican en JSX para proporcionar más coherencia y utilidad.

Formularios en JSXentra en más detalles sobre los formularios.

CSS en React

JSX proporciona una forma genial de definir CSS.

Si tiene un poco de experiencia con los estilos HTML en línea, a primera vista se verá atrasado 10 o 15 años, a un mundo donde el CSS en línea era completamente normal (hoy en día está demonizado y, por lo general, solo es una "solución rápida"). solución).

El estilo JSX no es lo mismo: en primer lugar, en lugar de aceptar una cadena que contenga propiedades CSS, el JSXstyleatributo solo acepta un objeto. Esto significa que define propiedades en un objeto:

var divStyle = {
  color: 'white'
}

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)

o

ReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)

Los valores CSS que escribe en JSX son ligeramente diferentes de CSS simple:

  • los nombres de las propiedades de las llaves son camelCased
  • los valores son solo cadenas
  • separas cada tupla con una coma

¿Por qué se prefiere esto a CSS / SASS / LESS simple?

CSS es unproblema sin resolver. Desde sus inicios, decenas de herramientas a su alrededor se levantaron y luego cayeron. El principal problema con CSS es que no hay alcance y es fácil escribir CSS que no se aplica de ninguna manera, por lo que una "solución rápida" puede afectar los elementos que no deben tocarse.

JSX permite que los componentes (definidos en React, por ejemplo) encapsulen completamente su estilo.

¿Es esta la solución ideal?

Los estilos en línea en JSX son buenos hasta que los necesite

  1. escribir consultas de medios
  2. animaciones de estilo
  3. pseudoclases de referencia (p. ej.:hover)
  4. pseudo elementos de referencia (p. ej.::first-letter)

En resumen, cubren los conceptos básicos, pero no es la solución final.

Formularios en JSX

JSX agrega algunos cambios al funcionamiento de los formularios HTML, con el objetivo de facilitar las cosas al desarrollador.

valueydefaultValue

losvalueEl atributo siempre contiene el valor actual del campo.

losdefaultValueEl atributo contiene el valor predeterminado que se estableció cuando se creó el campo.

Esto ayuda a resolver algunos comportamientos extraños de losDOMinteracción al inspeccionarinput.valueyinput.getAttribute('value')devolviendo uno el valor actual y otro el valor predeterminado original.

Esto también se aplica atextareacampo, por ejemplo

<textarea>Some text</textarea>

pero en vez

<textarea defaultValue={'Some text'} />

Paraselectcampos, en lugar de usar

<select>
  <option value="x" selected>
    ...
  </option>
</select>

usar

<select defaultValue="x">
  <option value="x">...</option>
</select>

Un onChange más consistente

Pasar una función alonChangeatributo puede suscribirse a eventos en campos de formulario.

Funciona de forma coherente en todos los campos, inclusoradio,selectycheckboxcampos de entrada disparan unonChangeevento.

onChangetambién se dispara al escribir un carácter en uninputotextareacampo.

Escapes automáticos JSX

Para mitigar el riesgo siempre presente de las vulnerabilidades de XSS, JSX fuerza el escape automático en las expresiones.

Esto significa que puede tener problemas al utilizar una entidad HTML en una expresión de cadena.

Espera que se imprima lo siguiente© 2020:

<p>{'&copy; 2020'}</p>

Pero no es, esta imprimiendo&copy; 2020porque la cadena se escapa.

Para solucionar esto, puede mover las entidades fuera de la expresión:

<p>&copy; 2020</p>

o usando una constante que imprime la representación Unicode correspondiente a la entidad HTML que necesita imprimir:

<p>{'\u00A9 2020'}</p>

Espacio en blanco en JSX

Para agregar espacios en blanco en JSX hay 2 reglas:

Horizontal white space is trimmed to 1

Si tiene espacios en blanco entre elementos en la misma línea, todo se recorta a 1 espacio en blanco.

<p>Something       becomes               this</p>

se convierte en

<p>Something becomes this</p>

Se elimina el espacio en blanco vertical

<p>
  Something
  becomes
  this
</p>

se convierte en

<p>Somethingbecomesthis</p>

Para solucionar este problema, debe agregar explícitamente espacios en blanco, agregando una expresión de espacio como esta:

<p>
  Something
  {' '}becomes
  {' '}this
</p>

o incrustando la cadena en una expresión de espacio:

<p>
  Something
  {' becomes '}
  this
</p>

Agregar comentarios en JSX

Puede agregar comentarios a JSX utilizando los comentarios normales de JavaScript dentro de una expresión:

<p>
  {/* a comment */}
  {
    //another comment
  }
</p>

Difundir atributos

En JSX, una operación común es asignar valores a los atributos.

En lugar de hacerlo manualmente, p. Ej.

<div>
  <BlogPost title={data.title} date={data.date} />
</div>

puedes pasar

<div>
  <BlogPost {...data} />
</div>

y las propiedades deldataEl objeto se utilizará como atributos automáticamente, gracias al ES6operador de propagación.

Cómo hacer un bucle en JSX

Si tiene un conjunto de elementos sobre los que necesita hacer un bucle para generar un JSX parcial, puede crear un bucle y luego agregar JSX a una matriz:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

Ahora, al renderizar el JSX, puede incrustar elitemsmatriz envolviéndola entre llaves:

const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> )

Puede hacer lo mismo directamente en JSX, usandomapen lugar de un bucle for-of:

const elements = ['one', 'two', 'three'];
return (
  <ul>
    {elements.map((value, index) => {
      return <li key={index}>{value}</li>
    })}
  </ul>
)

Descarga mi gratisReact Handbook


Más tutoriales de react: