En este post, te enseñaremos cómo usar JSX para abrir una ventana a JavaScript en React y acceder a los beneficios de su código.
React es una librería JavaScript que nos permite crear interfaces de usuario en el proceso de desarrollar una aplicación de una sola página. A estas aplicaciones también se les conoce como SPA, por su significado en inglés single page applications. Para crear estas aplicaciones, React nos permite unir HTML con JavaScript con la ayuda de la extensión JSX.
Antes de abrir una ventana a JavaScript en React
Para enseñarte cómo abrir una ventana a JavaScript en React, utilizaremos las siguientes líneas de código JSX. En ellas, estamos creando un elemento usando la constante element y un div creado con JSX. Luego, estamos pintando en pantalla este elemento usando el comando console.log (element) y lo procesamos para la web con el comando ReactDOM.render (element, rootElement).
<html>
<script type= "text/babel">
const rootElement = document.getElementById ('root');
const element = (
<div className = "container" children = "Hello World!">
<span> Goodbye </span>
);
console.log (element);
ReactDOM.render (element, rootElement);
</script>
</html>Nota que las líneas de código que definen el elemento element son JavaScript, no HTML. Sin embargo, están encerradas dentro de un documento HTML, dentro del que podemos insertar líneas de código JSX. Cuando empezamos a escribir JSX, lo hacemos marcando donde empieza y finaliza un tag. En el caso de las líneas de código anteriores, marcamos el inicio y final del elemento div como si estuviéramos en HTML.
Esta es la magia de React. Aunque dentro de un HTML no podemos usar directamente JavaScript, si podemos usar JSX. Entonces, podemos usar JSX para abrir una ventana a JavaScript en React. Esto nos permitirá acceder a todos los beneficios de JavaScript para hacer que nuestras aplicaciones sean más complejas y funcionales.
¿Cómo abrir una ventana a JavaScript en React?
Cuando hablamos de abrir una ventana a JavaScript en React, nos referimos a la posibilidad de empezar a escribir código JavaScript dentro del código JSX y luego volver a nuestro código JSX. Es decir, crear una pequeña sección JavaScript dentro de la librería React. Esto lo hacemos mediante las populares curly brackets o llaves {}. Es decir, dentro de las líneas de código JSX escritas antes, podemos insertar los símbolos { } para abrir una ventana a JavaScript en React.
Imaginemos que queremos guardar la propiedad className de las anteriores líneas de código en una variable. Entonces, podemos escribir la línea JavaScript const className = “container”.
Ahora, puede que queramos que esta variable className se inserte dentro de nuestro elemento en vez de la clave className=’container’. Esto haría que, si el valor de la variable cambia, nuestro código se actualice de manera automática. Para ello, deberemos abrir una ventana a JavaScript en React usando las llaves.
Ten presente que el JavaScript que puedes escribir dentro de esta ventana se reduce a las expresiones que nos retornan cosas. Es decir, puedes escribir, entre muchas cosas, constantes y variables. Aunque no es todo el JavaScript que existe, podemos hacer muchas cosas con estas expresiones.
A continuación, puedes ver las mismas líneas de código que hemos escrito antes, ahora con una pequeña ventana a JavaScript para insertar la constante className como valor dentro de nuestra propiedad JSX className. Allí, las llaves representan el inicio y final de nuestra sección JavaScript.
<html>
<script type= "text/babel">
const rootElement = document.getElementById ('root');
const className = 'container';
const element = (
<div className = {className} children = "Hello World!">
<span> Goodbye </span>
);
console.log (element);
ReactDOM.render (element, rootElement);
</script>
</html>Ahora que sabes cómo abrir una ventana a JavaScript en React, ¡es el momento de usar este conocimiento para desarrollar tus propios proyectos! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, donde encontrarás una mezcla perfecta entre teoría y práctica. Así, aprenderás a dominar lenguajes de programación como JavaScript, CSS, HTML y JSX, con lo que podrás convertirte en un experto en desarrollo web en pocos meses. ¿A qué esperas para tomar el siguiente paso en tu aprendizaje? ¡Anímate a matricularte!
