Tabla de contenidos
En mi último artículo vimos cómo empezar a migrar un proyecto de JavaScript a TypeScript, de forma progresiva, sin grandes esfuerzos ni cambios drásticos. Hoy me gustaría hablaros de cómo usar TypeScript en un nuevo proyecto frontend. Para ser más específicos, voy a explicaros cómo crear un proyecto React con TypeScript.
Cómo crear un proyecto React con TypeScript
Normalmente, cuando hablamos de frontend y TypeScript, inmediatamente pensamos en Angular, mientras que React se asocia más frecuentemente con JavaScript. Al buscar soluciones o tutoriales sobre React, la mayoría de ejemplos son en base a JS. Para cambiar esto, he preparado un ejemplo que funciona de una app usando React-Redux con TypeScript.
Si no eres novato con React, probablemente estarás familiarizado con create-react-app, un project starter en React desarrollado directamente por Facebook y que nos da la opción de iniciar una app de forma prácticamente instantánea, ya que esconde gran parte de la configuración de build. Si no estás familiarizado con React, te recomiendo que le des una oportunidad haciendo quizás una app sencilla.
Pero si lo que quieres es usar React pero con TypeScript en vez de JavaScript, deberías darle un vistazo a este project starter que hace lo mismo (de hecho, también utiliza create-react-app), pero con TypeScript. Puedes seguir el archivo readme que viene adjunto y aprovechar para aprender un montón sobre React, Redux y, por supuesto, TypeScript.
Aún así, no están cubiertos todos los componentes necesarios para iniciar un proyecto que funcione completamente. Es por esto que he preparado un proyecto que añade funcionalidades (así como algunas dependencias comunes, como el react-router-dom, por ejemplo) a partir del cual podrás aprender más acerca de cómo funciona React:
React – TS demo
(Puedes clonar el proyecto y seguir el archivo readme para ejecutarlo)
Esta app sencilla tiene las características más comunes con las que se encuentra un developer al crear un proyecto desde 0. Así pues, lo puedes usar como ejemplo o bien como punto de partida desde el que tomar tus propias decisiones o buscar alternativas, siendo sus partes principales:
1. Enrutado
Usamos react-router-dom
‘Routes.tsx’ muestra cómo usar el enrutado y parámetros de la URL
‘Item.page.tsx’ muestra cómo recibir un parámetro de la URL
2. Soporte SCSS
Usamos node-sass-chokidar
‘navbar.scss’ es un ejemplo de archivo sass
‘navbar.component.tsx’ es un ejemplo de cómo importar estilos del archivo mencionado.
3. Hacer binding del estado y del dispatch de la Store con las Props del componente
-’list.container.ts’ es un ejemplo de este binding
4. Loader flag
Con un creador de acciones en ‘item.actions.ts’, marcamos un boleano en el estado de nuestra store como flag en ‘item.reducer.ts’ para representar el estado de la carga de la aplicación
-’list.page.tsx’ usa este valor para renderizar la UI de forma distinta dependiendo del valor de flag
5. Peticiones Http al Backend
-’item.service.ts’ contiene todas las peticiones al backend y devuelve entidades Item
-Dentro de nuestra aplicación usamos objetos Item (ver ‘item.ts’) en vez de objetos JS planos.
6. Testing
-Usamos jest
-Encontrarás distintos ejemplos de testing en distintas capas bajo la carpeta ‘/tests’
7. Typescript
-No hay ni un archivo .js en todo el proyecto
El propósito de este “repo” es el de proveer un proyecto lo suficientemente grande como para cubrir los principales conceptos de una aplicación frontend y ofrecer un “sandbox” donde probar y experimentar con las tecnologías y librerías utilizadas, al mismo tiempo que se añaden nuevas funcionalidades o se cambian y mejoran las que ya existen. Con suerte, su complejidad es lo suficientemente sencilla como para permitir entender a cualquier persona sus conceptos con un esfuerzo mínimo.
