React JSX – Reaccionar movimiento vernáculo 06

Reaccionar06-Reaccionar-JSX

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.

  1. ¿Qué es JSX?
  2. sintaxis JSX
  3. 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 = [&quot;Manzanas&quot;,&quot;Plátanos&quot;,&quot;Cerezas&quot;] 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

Objeto JavaScript ES6 - Reaccionar movimiento vernáculo 02

JavaScript ES6 - Reaccionar movimiento vernáculo 01

Reaccionar06-Reaccionar-JSX
Reaccionar06-Reaccionar-JSX

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_ESEspañol