Prefacio
React es uno de los paquetes de JavaScript más populares para desarrollar interfaces web y móviles. Desarrollado por Meta (anteriormente Facebook), React permite a los desarrolladores crear componentes reutilizables para completar páginas de inicio.
Sin embargo, cabe señalar aquí que, estrictamente hablando, React no es un marco. Esto se debe a que solo es responsable de representar los elementos de la interfaz de usuario. Sin embargo, React proporciona otra solución para marcos como Angular y Vue, lo que nos permite completar funciones complejas de la página de inicio con él.
Este artículo presentará una sintaxis importante en React: JSX.
JSX también es el método de escritura de React más común que vemos actualmente, por lo que lo presentaremos a continuación.
- ¿Qué es JSX?
- sintaxis JSX
- Construya componentes de React usando JSX
¿Qué es JSX?
Antes de explicar JSX, revisemos la sintaxis DOM para crear DOM con React como se explicó en el artículo anterior.
const plato = React.createElement("h1", "Hola mundo") ReactDOM.render(plato, document.getElementById("raíz"))
La sintaxis de React anterior se puede convertir al siguiente DOM HTML.
<div id="root">
<h1><span class="ez-toc-section" id="hello-world"></span>Hola Mundo<span class="ez-toc-section-end"></span></h1>
</div>
Al ver el código anterior, debería ser fácil imaginar que la sintaxis de React en JavaScript es relativamente difícil de entender, y si se trata de un archivo HTML más complejo con miles de líneas, el código será aún más complicado y difícil de entender.
Por lo tanto, mientras desarrollaba React, el equipo de Facebook también agregó una sintaxis más simple para construir componentes web front-end para abordar esta deficiencia, que es JSX.
JSX es una abreviatura compuesta por dos palabras "JS" JavaScript y "X" XML. Aunque JSX es algo similar a HTML, en realidad usa la sintaxis de React para construir un componente. El siguiente es un ejemplo simple de JSX.
importar React desde 'react'; importar ReactDOM desde 'react-dom/client'; const myElement = ( <ul> <li>Manzanas</li> <li>Plátanos</li> <li>Cerezas</li> < /ul>); const raíz = ReactDOM.createRoot(document.getElementById('root'));
Puede ver que la parte central es casi la misma que la sintaxis HTML, pero el principio y el final del programa son ambos sintaxis JavaScript.
Las computadoras en realidad usan algunas herramientas para traducir la sintaxis JSX y finalmente producen HTML puro. Los siguientes artículos también explicarán dichas herramientas.
sintaxis JSX
La sintaxis JSX parece HTML, pero en realidad es la sintaxis de JavaScript y React, por lo que la sintaxis JSX se explicará aquí.
nombre de la clase
En la sintaxis general de HTML, si queremos agregar una clase a una etiqueta, usaremos el siguiente método de escritura
<h1 class="hi"><span class="ez-toc-section" id="hello-world-2"></span>Hola Mundo<span class="ez-toc-section-end"></span></h1>
Sin embargo, en la sintaxis de JSX, si desea agregar cualquier clase a una etiqueta, debe cambiarla a className.
<h1 classname="hi"><span class="ez-toc-section" id="hello-world-3"></span>Hola Mundo<span class="ez-toc-section-end"></span></h1>
elementos anidados
La sintaxis de JSX es la misma que la de HTML y ambos admiten el formato anidado. JSX también puede crear sus propios componentes y convertirlos a formato anidado.
<ListaAnimal> <Perro /> <Gato /> <Pájaro /> </ListaAnimal>
expresión compuesta
JSX en sí también se basa en la sintaxis de JavaScript, por lo que es totalmente compatible con la sintaxis de JavaScript que explicamos antes, así como con la sintaxis en ES6, como los literales de plantilla (Template Literals) como ejemplo.
const frutas = ["Manzanas","Plátanos","Cerezas"] const myElement = (
<ul>
<li>{frutas[0]}</li>
<li>{frutas[1]}</li>
<li>{frutas[2]}</li>
<div>`Me encanta ${frutas[0]}`</div>
</ul>
);
En JSX, puede usar llaves para ajustar variables de JavaScript, o puede usar la sintaxis de literales de plantilla (Template Literals) para combinar cadenas con JSX.
Mapa de JavaScript
Dado que se puede usar la sintaxis de JavaScript, también podemos usar la función de mapa incorporada de Array para combinarla con JSX.
const frutas = ["Manzanas","Plátanos","Cerezas"] const myElement = ( <ul> {frutas.map(elemento=>{ <li>{elemento}</li> })} </ul> ) ;
También se pueden combinar varios li mediante el uso de la función de mapa.
Construya componentes de React usando JSX
Finalmente, explicaremos cómo construir componentes, usando el código inicial como ejemplo.
importar React desde 'react'; importar ReactDOM desde 'react-dom/client'; const myElement = ( <ul> <li>Manzanas</li> <li>Plátanos</li> <li>Cerezas</li> < /ul>); const raíz = ReactDOM.createRoot(document.getElementById('root'));
La primera y segunda línea se utilizan para llamar a las bibliotecas de funciones ya escritas de reaccionar y reaccionar-dom/cliente, y utilizar las funciones integradas.
La constante en el medio se usa para la declaración, y se puede colocar la sintaxis JSX en ella y se puede escribir algo de HTML. Cuando se completan, se puede obtener un elemento llamado myElement.
Finalmente, a través de la función createRoot en ReactDOM, primero cree un DOM con "id="root"" y finalmente coloque el componente myElement que creó en la raíz.
Después del proceso anterior, se puede construir un componente de React.
Conclusión
Este artículo explica una sintaxis de React muy importante: JSX. También utiliza esta sintaxis para facilitarnos la creación de un componente de React. También explica los principios, la sintaxis y cómo crear un componente de JSX.
Si tiene alguna sugerencia o pregunta, ¡deje un mensaje!
Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~
Cita
Reaccionar movimiento vernáculo 07-JSX
Reaccionar serie de deportes vernáculos
Cómo funciona React – React Vernacular Movement 05
Funciones de alto orden de JavaScript: React Vernacular Movement 04
JavaScript Async Await - Reaccionar movimiento vernáculo 03
Español 
繁體中文 
English 
简体中文 
한국어 
日本語