javascript - react - ¿Qué significa JSX?

react js div

Question

¿Qué significa JSX?

Me refiero al JSX que se define como una extensión de sintaxis similar a XML a ECMAScript, que se ha vuelto bastante popular con la creciente popularidad de ReactJS.

Answer 1

JSX - Extensión de sintaxis de JavaScript Un paso de preprocesador que agrega sintaxis XML a JavaScript

Answer 2

JSX significa J ava S cript X ML. Con React, es una extensión para código similar a XML para elementos y componentes. Por los documentos de React y como usted mencionó:

JSX es una extensión de sintaxis similar a XML para ECMAScript sin ninguna semántica definida

De la cita anterior, puede ver que JSX no tiene semántica definida, es solo una extensión de JavaScript que permite escribir código similar a XML por simplicidad y elegancia, y luego transpilar JSX en llamadas de función JavaScript puras con React.createElement . Por el tutorial React:

JSX es un paso de preprocesador que agrega sintaxis XML a JavaScript. Definitivamente, puedes usar React sin JSX, pero JSX hace que React sea mucho más elegante.

Al igual que XML, las etiquetas JSX tienen un nombre de etiqueta, atributos e hijos. Si un valor de atributo se incluye entre comillas, el valor es una cadena. De lo contrario, ajuste el valor entre llaves y el valor es la expresión de JavaScript incluida.

Cualquier código en JSX se transforma en JavaScript / ECMAScript simple. Considere un componente llamado Login . Ahora lo hacemos así con JSX:

<Login foo={...} bar={...} />

Como puede ver, JSX solo le permite tener una sintaxis similar a XML para etiquetas, que representan componentes y elementos en React. Se transpiló en JavaScript puro:

React.createElement(Login, { foo: ..., bar: ... });

Puedes leer más en los documentos .

Answer 3

JSXJavaScript significa extensión de sintaxis. Es similar a XML. Puede utilizar una transformada sintáctica JSX simple con React.