Guía para principiantes de React JSX: ¿Qué es React JSX? Introducción a React JSX

¿Qué aprenderás?

• ¿Qué es React JSX?
• Aprenderás a utilizar React.createElement
• Te enseñaré a Reemplazar React.createElement por sintaxis JSX
• Hoy Comprenderás por que los componentes deben comenzar con una letra mayúscula.
• Te dejo la introducción al manejo de propiedades
• Cómo agregar expresiones de JavaScript dentro de la estructura JSX

Repositorio:

• Este segundo capitulo lo puedes descargar clonando el repositorio con la siguiente línea de código.
• Y solo debes cambiarte a la rama de nombre "introduccion-jsx"
• Si no estas familiarizado con Git, descarga el código aquí.
• Recuerda que cada capítulo estará en una rama diferente para llevar un orden

 

git clone https://github.com/EWebik/react-js.git

 

¿Qué es React JSX?

En definición JSX es considerado una extensión de Javascript, la cual nos permite unir o mas bien dicho mezclar código Javascript con HTML.

Usar JavaScript XML o bien JSX tiene el beneficio de proporcionarnos un código limpio, evitando repeticiones innecesarias y por supuesto hay que dar crédito a sus creadores quienes son el equipo de Facebook.

 

¿Cómo funciona JSX?

La extensión JSX nos permite escribir código muy parecido al HTML (pero que no es propiamente HTML) este código no lo reconoce ningún navegador de forma nativa.

Para que la sintaxis JSX sea reconocida e interpretada por los navegadores, requerimos transpilar dicho código para que pueda ser ejecutado e interpretado en los navegadores.

 

Transpilar código JSX

Para poder transpilar código JSX necesitamos una herramienta de nombre Babel JS, dicha herramienta es un Transpiler (tranpilador) de código.

 

Babel JS

Babel JS interpreta código en un lenguaje determinado y lo compila sin alterar su funcionalidad a otro lenguaje, esto tiene varias ventajas, lo más importantes es que nos permite:

• Usar expresiones JSX y asignarlas a una variable.
• Uso de expresiones JSX en argumentos de funciones.
• También podemos usar JSX en ciclos, condiciones y funciones.

Si has utilizado el comando:

create-react-app

No te debes preocupar por la instalación ni configuración de Babel ya que esta herramienta CLI lo hace por ti ahorrándote un montón de trabajo y conocimientos previos que deberías adquirir para montar un ambiente de React desde cero.

Al principio yo montaba React desde cero y créeme que al usar este comando te ahorras bastante.

 

Comportamiento de React JSX

Espero que hayas visto el capitulo anterior a esta clase donde te explico ¿Qué es React? No obstante, en resumen, dado que esta librería se basa en componentes, necesitamos una manera que nos permita definir, elementos como div, imágenes o párrafos.

Para ello vamos a utilizar la sintaxis que proporciona JSX en ves de utilizar React.createElement, si no tienes claro esto, te lo explico a continuación.

 

React.createElement y JSX

React.createElement nos permite definir un elemento en react y cuenta con la siguiente sintaxis.

React.createElement(
  type,
  props,
  ...children
);

Donde:

• Type, es tipo string que nos permite definir un:
  • Tag de HTML ('div', 'p', 'span', etc.)
  • O un tipo de Componente de React ya sea una clase o función.
• Props, es un arreglo de propiedades del elemento que estas definiendo, por ejemplo, si es una imagen aquí pones el valor de src y alt.
• Children, es opcional dependiendo del elemento, pero aquí debes agregar los elementos que serán hijos del elemento que estas creando.

Ejemplo de React.createElement

//Elemento tipo parrafo
var p = React.createElement('p', {
  className: 'style-parrafo'
},"Curso de React JS by EWebik");

//Contendor
var container = React.createElement('div', {
  className: 'container'
}, p);

 

El código anterior tendría una salida HTML de la siguiente manera:

<div class="container">
     <p class="style-parrafo">Curso de React JS by EWebik</p>
</div>

 

Excelente no, pero ahora imagina ¿Cuántos párrafos o elementos tiene una página web?

El estar usando React.createElement sería muy complicado, para ello utilizamos JSX y definimos una estructura HTML dentro de JavaScript, solo debemos tener cuidado con algunos aspectos que veremos más adelante.

 

Sintaxis JSX, reemplazando a React.createElement

En el ejemplo anterior definimos un div y un párrafo, ahora si aplicáramos la sintaxis JSX quedaría de la siguiente manera.

//Elemento creado con JSX
var div = (
      <div className="container">
              <p className="style-parrafo">Curso de React JS by EWebik</p>
      </div>
);

//Nodo donde montaremos nuestro elemento creado con JSX
ReactDOM.render(div,document.getElementById('idRoot'));

Como puedes observar la sintaxis JSX es muy parecida a la salida de HTML que vimos anteriormente, pero class es reemplazado por className.

Esto se debe a que class es una palabra reservada de JavaScript y por lo tanto debemos cambiarla en JSX, también encontraremos otras palabras que estaré subiendo y actualizando constantemente, si es que no ya las he subido.

 

Los componentes personalizados deben ser capitalizados

Existen dos tipos de elementos:

• Aquellos que inician con una letra minúscula, estos elementos dan como resultado por lo regular etiquetas HTML, como párrafos (p), imágenes (img), etc.
• Ahora, los tipos que inician con una letra mayúsculas, son elementos por lo regular creados en una sintaxis JSX, por lo tanto, si tienes un elemento con una letra minúscula, debes asignarlo a una letra mayúscula antes de renderearlo en la DOM.

Por ejemplo:

import React from 'react';

//Elemento personalizado con la primera letra en mayúscula es decir Capitalizado
function HolaEwebik(props){
             return <p>{props.texto}</p>;
}

//Agregando elemento personalizado dentro de otro
function Contenedor(){
             return <HolaEwebik texto="Curso React JS EWebik" />;
}

 

Props en JSX

En el ejemplo anterior introduje una palabra props, a esto se le conoce como propiedades, esto quiere decir que podemos pasar valores de un elemento a otro, a través del uso de las props en JSX.

Esto es bastante sencillo de hacer y lo haremos casi igual a como se hace en HTML, por ejemplo, en el código anterior creamos la propiedad texto y se le pasamos al elemento "HolaEwebik":

//Agregando elemento personalizado dentro de otro
function Contenedor(){
             return <HolaEwebik texto="Curso React JS EWebik" />;
}

Y para recuperar el valor de la propiedad lo veremos a continuación.

 

¿Cómo agregar expresiones de JavaScript en JSX?

Podemos pasar cualquier expresión de JavaScript dentro de la sintaxis JSX, a través de llaves

{}

Tal y como vimos en nuestro ejemplo anterior:

//Elemento personalizado con la primera letra en mayúscula es decir Capitalizado
function HolaEwebik(props){
             return <p>{props.texto}</p>;
}

Donde pasamos la propiedad texto con el valor "Curso React JS EWebik" Y entre llaves invocamos la propiedad para obtener el valor.

 

Pero también podríamos pasar, funciones, variables, y operaciones, por ejemplo:

<MiComponente propiedad={()=>{ return 1 + 1; }} />

 

Operadores Spread

Utilizando la sintaxis Spread podemos heredar propiedades entre componentes o pasar en una sola linea toda una serie de propiedades que podremos recuperar en otros elementos.

function Elemento1 (props){
       return (
            <div>
               <p>{"Titulo: " + props.titulo}</p>
               <p>{"Capitulo: " + props.capitulo}</p>
            </div>
       );
}

function Elemento(){
       const props = {titulo:"Curso React JS EWebik", capitulo:"Introducción a JSX"};
       return <Elemento1 {...props} />;
}

 

Todavía existen muchas más cosas que nos permite hacer JSX, pero eso le iremos viendo en otros vídeos con ejemplo y centrándonos en cada uno de ellos, por ejemplo:

• Veremos condicionales
• Ciclos
• Etc.

Espero que esta segunda clase te haya gustado y hayas aprendido los fundamentos de JSX, te aseguro que las próximas clases te van a fascinar, nos vemos en el siguiente post.