React es una librería JavaScript que nos permite crear interfaces de usuario para el desarrollo de SPA (Single Page Application). Además, esta librería se caracteriza por utilizar un lenguaje declarativo en vez de imperativo, conocido como JSX. En este post, te explicaremos qué son y cómo se relacionan los conceptos de React declarativo y JSX.
¿Qué es React declarativo y JSX?
Cuando hablamos de React declarativo y JSX nos referimos a cómo el lenguaje JSX nos permite dar vida al apecto declarativo de React. Para conocer más sobre este aspecto declarativo, te recomendamos leer nuestro post sobre los principios básicos de React.
Antes de hablar de cómo se relacionan el React declativo y JSX, seguro que te estás preguntando qué es JSX. JSX es una extensión de JavaScript de Facebook para poder crear, desde JavaScript, código HTML. Básicamente, JSX una extensión de JavaScript que nos permite crear código con una sintaxis muy similar al HTML, manteniendo todas las posibilidades de JavaScript. En este sentido, es como una mezcla de los dos lenguajes.
¿Cómo se usa el React declarativo y JSX?
Para mostrar cómo se utiliza el React declarativo y JSX en React, usaremos un ejemplo en el que transformaremos un hello world escrito en código React a uno escrito con JSX. A continuación, puedes encontrar las líneas de código que transformaremos:
<html>
<body>
<div id=’root’></div>
</body>
<script type = ‘text/javascript’>
const rootElement = document.getElementById (‘root’)
const element = React.createElement (
‘div’
{
className: ‘container’
children: React.createElement (‘span’, ‘null’, ‘Hello World’)
style: {color: ‘red’, backgroundColor: ‘green’}
},
console.log (element)
ReactDOM.render (element, rootElement);
</script>
</html>
En las líneas de código anteriores, hemos creado un elemento div con el ID ‘root’, al cual podemos acceder con la constante rootElement. Luego, hemos creado un nuevo elemento div utilizando el comando React.createElement. A este elemento le hemos element y le hemos insertado las propiedades className, children y style al abrir las llaves {}. Finalmente, hemos pintado este elemento en la pantalla gracias al uso de console.log (element).
Ahora, lo que queremos es poder crear el mismo elemento element utilizando un modo más visual de escribir código. Es decir, queremos sustituir el código dentro de la llamada React.createElement. Para ello, utilizaremos JSX.
A continuación, te presentamos la línea de código que podríamos escribir para usar el react declarativo y JSX:
const element = <div className = “containter”> Hello World!</div>
Así de simple es JSX, un lenguaje que nos ha permitido simplificar siete líneas de código en una sola. Aunque esto es sorprendente, puede que no veas el Hello World que esperabas cuando revises los resultados en tu navegador. Esto se debe a que el navegador no puede procesar JSX. Entonces, para poder traducir nuestro código a uno que entienda el navegador, usamos la herramienta Babel. Si tienes dudas sobre cómo utilizar esta herramienta, te invitamos a leer nuestro post sobre qué es Babel.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo funcionan los conceptos de React declarativo y JSX en React, seguro que te emociona la idea de aprender a usar esta poderosa librería. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, una gran formación en la que aprenderás, entre muchas otras cosas, a dominar lenguajes y herramientas de programación como React, CSS, HTML y JavaScript. ¿A qué estás esperando para empezar a cumplir tu sueño de ser un desarrollador web? ¡Matricúlate ya y triunfa en el sector IT!
