TypeScript / React – JSX

Bienvenidos sean a este post, hoy hablaremos sobre este lenguaje.

Como mencionamos en el post anterior, una de las piezas fundamentales de react es JSX, Javascript XML, y este es una sintaxis especifica para insertar codigo tipo HTML en nuestro codigo javascript. Este tipo de lenguaje es soportado por typescript desde sus primeras versiones. Para poder utilizarlo debemos modificar la extension de los archivos typescript de .ts a .tsx, Pasemos a crear una aplicacion para trabajar un poco con JSX, para ello ejecuten el siguiente comando:

$ npx create-react-app ejemplo02 --template typescript

Una vez finalizada la creacion/instalacion de la aplicacion, creara un nuevo directorio con este nombre, ingresamos a este y ejecutamos este comando:

$ npm start

Esto iniciara nuestra aplicacion y una vez finalice todas las configuraciones nos habilitara una url para conectarnos, abran desde el browser la siguiente direccion:

http://localhost:3000

Sin cerrar la aplicacion que ejecutamos, abran otra terminal y vamos a modificar el archivo App.tsx en el directorio src de la siguiente manera:

src/App.tsx

import React from 'react';
import './App.css';

class App extends React.Component {
        render() {
                return <div>Hola JSX</div>
        }
}

export default App;

En este caso reducimos todo el codigo que habia a un simple mensaje en pantalla. Comentemos un poco el codigo, primero importaremos al modulo de react para poder acceder a este. Lo siguiente es la importacion del archivo con los estilos css de la pagina. Despues definiremos una clase llamada App la cual la haremos heredera de Component, para establecerla como componente de React, y en ella usaremos al metodo render para mostrar el mensaje y por ultimo la exportaremos para que pueda ser accedida externamente. Si lo prueban, nuestra pagina se vera de la siguiente manera:

Vamos a ver una particularidad pero para ello debemos tomar el bloque de render y modificarlo de la siguiente manera:

        render() {
                return
                        <div>Hola JSX</div>
        }

Si tienen corriendo el servidor en este momento estara con un error, esto es debido a que siempre debe estar en la misma linea, como era en un principio, porque de lo contrario considera que devuelve un elemento de tipo void. Para momentos que tenemos usarlo de esta manera podemos hacer lo siguiente:

        render() {
                return (
                        <div>Hola JSX</div>
                )
        }

En este caso al estar entre dos parentesis se considera a este como una sola linea y por lo tanto ahora nuestra pagina volvera a funcionar. Y de esta forma podemos tener todas las lineas que necesitemos mostrar. Hablemos un poco mas sobre render, lo primero es que si utilizamos la primera opcion, solo podemos pasar un solo elemento HTML, o un elemento definido por el usuario. Con esto podemos decir que todo elemento HTML renderizado debe ser hijo de un elemento padre, y a su vez cada elemento hijo debe ser un componente react, para asegurarnos que solo se actualice la porcion de DOM que corresponda. Pero esto lo veremos cuando creamos nuestro proyecto de prueba.

Otra posibilidad que disponemos es aplicar logica de typescript dentro de nuestra funcion render pero esta debera ser antes del return. Vamos a tomar a la clase App y la modificaremos de la siguiente manera:

class App extends React.Component {
        render() {
          let item = null;
          if (Math.random() < 0.5) {
                item = <p>Random menor a 0.5</p>
          } else {
                item = (
                        <p>Random mayor a 0.5</p>
                )
          }
                return (
                  <div>
                  {item}
                  </div>
                )
        }
}

En este caso modificamos a render, y lo primero que haremos es definir una variable con el valor null. Lo siguiente sera un condicional donde verificamos si el valor generado por Math.random es menor a 0.5 y si es verdad le establece un elemento parrafo indicando que es menor a 0.5 a la variable item. Luego tenemos un else para cuando no se cumpla esta condicion y establecer en item el mismo elemento pero indicano que es mayor a 0.5. En el primer caso como usamos la misma linea lo pasamos directamente. En el segundo caso lo pasamos con parentesis para que vean que podemos pasar datos de esta manera tambien. Por ultimo en el return volvemos a usar los parentesis porque establecemos un bloque div donde entre las llaves le pasaremos el valor almacenado en item. Si lo prueban se vera de la siguiente manera:

En el video pueden ver como en cada actualizacion varia el mensaje, siempre y cuando se cumpla la condicion, y antes de terminar veamos algunos temas basicos sobre JSX:

• Los elementos HTML los podemos pasar directamente, sin necesidad de comillas
• Siempre deben estar en la misma linea
• Cuando no se cumpla lo anterior los encerraremos entre parentesis
• Si queremos aplicar codigo typescript en la funcion render, este debe ser antes del return
• Las variables del codigo que pasemos en el HTML siempre deben ir entre llaves para que el codigo sepa que son variables.

En resumen, hoy hemos visto de forma basica JSX, que es, principales caracteristicas, un ejemplo para verlo en accion,, algunas conductas y particularidades de este, y como se puede implementar un codigo typescript de forma sencilla. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.