Hello Typescript React

Submitted by betotto on Vie, 04/26/2019 - 13:55

Introduccion

Ya pregunte si se puede escribir sobre React, asi que vamos a empezar con ello, el primer ejemplo sera el clasico hello world pero con Typescript. Tampoco me agrada demasiado la idea de usar Typescript, de hecho sigo pensando que es mejor usar javascript normal, pero tampoco quiero caer en una postura de no usar typescript solo por puro gusto de javascript. Entonces haremos una serie de pequenas no tan pequenas aplicaciones en React con Typescript o al reves en Typescript con React.

Tambien incluiremos servicios Rest basicos sin seguridad ni monitoreo hechos en Kotlin, por ultimo, si nos da tiempo metemos algo de Kafka.

Ambiente de desarrollo

Para poder realizar los ejemplos vamos a necesitar Nodejs instalado, de preferencia una version lts mayor o igual a 6.

Dependencias

  • Parcel: Esta herramienta es un bundler que nos permite transpilar jsx, es6, ts y otros lenguajes a ES5, es un competidor de Webpack, lo usaremos porque no vamos a realizar configuraciones muy complicadas, nos queremos enfocar al desarrollo
  • React: La version 16.8 es un mundo nuevo y abre la posibilidad de escribir codigo funcional bastante extenso
  • Typescript: Un sublenguaje muy parecido a javascript pero que agrega types

Como editor de codigo, sugiero ampliamente vscode que esta hecho en typescript y por tanto tiene mucho soporte para este; pero cualquier editor funciona.

Directorio de trabajo

Creamos una carpeta cualquiera, con el nombre que le quieras dar, yo le puse types

mkdir types

Entramos al directorio de la carpeta con "cd types" e inicializamos el proyecto Nodejs con los parametros por default.

npm init -y

Con eso tendremos el archivo package.json, luego creamos el archivo tsconfig.json que es la configuracion del compilador de typescript, el contendio sera el siguiente>

{
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  }
}

Instalamos las dependencias con el siguiente comando:

npm insall --save-dev typescript react react-dom parcel-bundler @types/react @types/react-dom

Eso nos debio crear el archivo package-lock.json y la carpeta con las dependencias de node (node_modules). Finalmente crearemos dos archivos index.html index.tsx

Nuestro directorio se deberia ver algo asi:

|-node_modules
|-index.html
|-index.tsx
|-package-lock.json
|-package.json
|-tsconfig.json

Implementando la aplicacion

React es un libreria que manipula el DOM, pero no lo hace de manera directa como hariamos con javascript o jquery. Crea un DOM virtual y despues compara el DOM virtual contra el DOM real y solo actualiza lo que es necesario. Por ello necesita un punto de montaje que contendra todos los componentes de React que declaremos para ese punto de montaje.

El contenido de index.html debera tener ese punto de montaje y ademas la referencia al script de react que contenga nuestros componentes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello</title>
</head>
<body>
  <div id="app"></div>
  <script src="index.tsx"></script>
</body>
</html>

Ahora a crear el componente, una de las cosas que mas debemos tener en cuenta con React 16.8 es que debemos usar lo menos posible clases (no usarlas). Entonces vamos a tener un simple component que reciba un texto y lo muestre en un h1:

import React, { useState, useContext } from 'react';
import ReactDOM from 'react-dom';

const Hello: React.SFC<{
  text: string
}> = props => <h1>Hello, {props.text}</h1>;

ReactDOM.render(<Hello text="Javamexico"/>, document.getElementById('app'));

El codigo anterior debe ir en index.tsx. Cabe la pena mencionar que si usas typescript y quitas el atributo text vscode (si lo usaste como editor) te dira que ese atributo es requerido sin necesidad de usar PropTypes, debo aceptarlo punto para Typescript.

En javascript el mismo componente se escribe asi

const Hello = props => <h1>Hello, {props.text}</h1>;

Comparando, aqui creo que si vale la pena escribir los tipos de las propiedades que espera el componente.

Ejecutando la aplicacion

Ahora todo es responsabilidad de parcel, solo debemos ejecutar en la consola:

npx parcel index.html

y seguir la ruta que nos muestre, por defecto localhos en el puerto 1234. Asi que abre un navegador y abre la liga http://localhost:1234/index.html y admira el resultado de tu arduo trabajo :P

image