React Básico

Inicio / Tema / React Básico / Fundamentos de JSX

Fundamentos de JSX

JSX, o JavaScript XML, es una extensión de la sintaxis de JavaScript que permite escribir estructuras similares a HTML directamente en el código JavaScript. Es una de las características más distintivas de React y facilita enormemente el desarrollo de interfaces de usuario.

Aunque JSX se parece mucho a HTML, es importante recordar que en realidad no es HTML. Bajo el capó, JSX es convertido a llamadas a la API de React, lo que permite interactuar con el DOM de manera eficiente. En este capítulo, exploraremos los fundamentos de JSX, su sintaxis y cómo utilizarlo correctamente en React.

Sintaxis Básica de JSX

A primera vista, JSX parece HTML. Por ejemplo, este código JSX:

jsx

"En esta linea de código declaramos una constante llamada element que contiene un tag h1 con el texto 'Hello, world!'. La sintaxis JSX nos permite escribir en un codigo similar a HTML dentro de JavaScript."

Este fragmento crea un elemento JSX que representa un elemento h1 con el texto "Hello, world!". Sin embargo, JSX también te permite utilizar la potencia de JavaScript dentro del marcado, como veremos a continuación.

Embebiendo Expresiones JavaScript en JSX

Una de las características más poderosas de JSX es la capacidad de insertar expresiones JavaScript directamente en el código. Esto se hace utilizando llaves {}. Veamos un ejemplo:

jsx

"Aqui declaramos una variable llamada name con el valor John, y usamos esa variable dentro de un tag h1 dentro de JSX, usando corchetes para colocar la expresión JavaScript."

En este caso, la variable name se inserta dentro del elemento JSX. Como resultado, se renderizará el texto "Hello, John!" en la interfaz de usuario.

JSX es una Expresión

En React, JSX es una expresión válida de JavaScript. Esto significa que puedes utilizarlo dentro de funciones, asignarlo a variables, y retornarlo desde funciones. Por ejemplo:

jsx

"Esta funcion chequea si un usuario es pasado como un argumento. Si el usuario existe, regresa un elemento h1 con el nombre del usuario. De otro modo, regresa un elemento h1 con el texto Hello, Stranger."

Este código demuestra cómo JSX puede ser utilizado como una expresión dentro de las funciones, lo que permite crear interfaces dinámicas y personalizadas.

Atributos en JSX

JSX también permite agregar atributos a los elementos, de forma similar a HTML. Sin embargo, algunos nombres de atributos en JSX pueden diferir de los que se utilizan en HTML. Por ejemplo, class en HTML se convierte en className en JSX:

jsx

"En esta linea creamos un div element con una clase llamada container. Note que en JSX usamos className en vez de la clase regular de HTML."

Esto se debe a que class es una palabra reservada en JavaScript, por lo que React utiliza className para evitar conflictos.

Atributos Booleans

Los atributos booleanos en JSX funcionan de una manera similar a los de HTML, pero en JSX, si un atributo booleano está presente, no necesitas especificar su valor. Por ejemplo:

jsx

"En este caso, tenemos un input elemente de tipo checkbox que esta chequeado. no necesitamos especificar checked equals true; simplemente incluyendo el atributo checked lo coloca como true."

Aquí, el checkbox estará marcado, ya que el atributo checked está presente. Si quisieras que no estuviera marcado, simplemente puedes eliminar el atributo o poner checked={false}.

JSX y Objetos de Estilo

En lugar de usar cadenas de texto para los estilos como en HTML, JSX utiliza objetos de estilo de JavaScript. Esto es útil porque te permite usar variables y lógica de JavaScript dentro de los estilos. Por ejemplo:

jsx

"Aquí definimos un objeto llamado divStyle que contiene estilos para el color del fondo, color del texto, y padding. luego aplicamos este objecto a div usando el atributo style en JSX."

Este ejemplo aplica estilos a un div utilizando un objeto de JavaScript. De esta manera, puedes aprovechar el poder de la programación para definir y modificar estilos dinámicamente.

Comentarios en JSX

Aunque JSX se parece a HTML, los comentarios en JSX son ligeramente diferentes. Deben colocarse dentro de llaves como expresiones de JavaScript. Por ejemplo:

jsx

"En este ejemplo, agregamos un comentario dentro del codigo JSX. el comentario esta en corchetes y usa la sintaxis de comentarios de JavaScript con barras y asteriscos."

Los comentarios en JSX no serán renderizados en el DOM, y permiten agregar notas útiles dentro del código de la interfaz.

Conclusión

JSX es una herramienta poderosa que hace que escribir interfaces en React sea más sencillo y eficiente. A través de su capacidad para mezclar HTML y JavaScript, JSX proporciona una forma declarativa de crear componentes dinámicos y reutilizables.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea