Instalaciones necesarias
·
Vscode
·
Postman
·
Mongo Compass
·
Mongo Compass es el software por excelencia para
la visualización de bases de datos MongoDB, oficial y desarrollado por Mongo.
Te permitirá conectarte a cualquier base de datos, local o remota, para
visualizar las colecciones y los documentos en tu base.
·
Node js
·
Android Studio
Refuerzo de React
Temas puntuales de la sección
En esta sección veremos los
siguientes temas:
·
¿Por qué es bueno usar TypeScript en mis
proyectos?
·
Tipos básicos
·
Objetos e interfaces
·
Hooks de React
o
useState
o
useEffect
o
useRef
o
useReducer
·
Custom Hooks
·
Genericos de TypeScript
·
Axios
·
Tipado de peticiones HTTP
·
Formularios
Por qué TypeScript
Porque si y punto. 😝
Inicio de proyecto (Introducción
React con TypeScript)
Voy a crear una carpeta donde
vamos a estar creando todos nuestros ejercicios, la voy a llamar React-Native y
la coy abrir en VScode:
Vamos ahora a abrir una terminal
y pasarle la dirección de nuestra carpeta (arrastrando la carpeta a la
consola,para crear una aplicación de react):
En este caso me faltaba el paquete vite, me pide que lo instala le digo que si.
Le doy un nombre a mi proyecto React; react-foundation. Y me pide que seleccione un framework
Con las flechas selecciono react
y después selecciono la primera opción para Type>Scrript
Enseguida nos crea nuestro
proyecto en la carpeta seleccionada:
Ahora antes de lanzar los
comandos que se nos indica , vamos a renombrar la carpeta 01-react-foundation:
Ahora si ejecutamos los comandos indicados en orden
Y una vez que termine podemos
lanzar el comando code . que nos abrirá el proyecto en VScode:
Este es un proyecto de REACT no de REACT-NATIVE
Ahora en la consola que tenemos abierta
(y si no nos situamos en la carpeta del proyecto) lanzamos el comando npm run
dev:
Si la seguimos tendremos en el
navegador nuestro proyecto REACT.
Preparar el Proyecto
Vamos a “limpiar” nuestro
proyecto React de cosas que no vamos a necesitar (algo muy parecidoa lo que
hacíamos en Vue) Para empezar vamos a srcàassetsàreact.sgv
Este componente no lo vamos a
necesitar así que lo eliminamos
Ahora iremos a nuestro main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<App />
</React.StrictMode>,
)
Podemos ver que estamos
trabajando en modo estricto de React y es lo que queremos.
Vayamos ahora a App.tsx
Y borraremos todo lo que está
dentro del return, nos quedamos con:
import { useState
} from ‘react’
import reactLogo from ‘./assets/react.svg’
import viteLogo from ‘/vite.svg’
import ‘./App.css’
)
}
al hacer esto nos marca errores
en los import. Solo con borrar el useStatese arregla, también borraremos todas
las importaciones que nos están generando error y vamos a añadir un sencillo h1
entre las etiquetas main:
import './App.css'
<h1>Introducciín
a TypeScript - React</h1>
</main>
)
}
si ahora lanzamos nuestra app
desde la consola:
Estructura del proyecto
Vamos ahora a crear la estructura
de directorios, para ello nos situamos sobre la carpeta src y en ella vamos a
ir creando los siguientes directorios:
Api
Components
Luego crearemos otro directorio
que se va a llamar Components:
import './App.css'
function App()
{
return
(
<h1>Introducción
a TypeScript - React</h1>
{/* Aquí mis componentes */}
</main>
)
}
export default App
Hooks
Crearemos ahora otra carpeta que
llamaremos hooks
Interfaces
Crearemos una nueva carpeta que
se llamará interfaces:
TypeScript
Y por último crearemos una carpeta
que se llamará typescript:
Entonces esta es la estructura
completa de directorios que vamos a utilizar para esa app
Ahora necesitamos ir a nuestro
main.tsx, donde podemos ver que tenemos una referencia a nuestro index.css:
En App.tsx tenemos una referencia
a App.css, que no vamos a necesitar:
import './App.css'
function App()
{
return
(
<h1>Introducción
a TypeScript - React</h1>
{/*
Aquí mis componentes */}
</main>
)
}
export default App
y también podemos borrar el
archivo App.css ya que no lo vamos a usar:
Si vemos nuestra App, veremos que como nos hemos cargado el App.css no tenemos aplicados algunos estilos
Vamos a arreglar esto, nos vamos
a ir a nuestro archivo index.css y al final del todo vamos a añadir un etiqueta
main, donde vamos a adarle algunos estilos básicos:
main {
Si salvamos veremos que en
nuestra app se aplican ya estos estilos de nuevo:
Vamos a añadir algunos estilos
más:
input {
Ha llegado el momento de comenzar
con TypeScript. En la carpeta de Typescript vamos a crear nuestro
primer Functional
component que llamaremos BasicTypes.tsx
La extensión tsx, es para typescript x, si estuviéramos
trabajando con JavaScript sería jsx.
Creando nuestro primer componente funcional (Functional
Component)
En nuestro archivo recién creado
BasycTypes vamos a escribir un primer componente funcional:
export const BasycTypes =
() => {
)
}
Como puedes ver un componente funcional, nos es más que
una función anónima auto ejecutables guardada en una constante con un nombre,
en este caso la hemos llamado BasicTypes.
Salvamos y antes de hacer nada
más, podemos ir a la carpeta typescript y añadir un nuevo archivo que vamos a
llamar index.ts (observa que es extensión ts y no tsx)
Esto que acabamos de hacer se
conoce como un archivo de barril. Lo que vamos a hacer en el index.ts es
simplemente exportar todo de nuestro archivo tsx BasycTypes:
Index.tsx
export * from './BasicTypes';
de este modo, cuanod yo haga
importaciones de esta carpeta TypeScript, puedo apuntar directamente a este
archivo index.ts.
Vayamos ahora a nuestro archivo
App.tsx
function App()
{
return
(
<h1>Introducción
a TypeScript - React</h1>
{/* Aquí mis componentes */}
</main>
)
}
export default App
y justo donde hemos comentado lo
de Aquí mis componentes, vamos a invocar nuestro archivo BasicTypes (que es el contiene nuestro primer
functional component)
import { BasicTypes
} from "./typescript"
<h1>Introducción
a TypeScript - React</h1>
<BasicTypes />
)
}
Nota cómo aquí la importación se
está haciendo desde ./typescript (en morado) y no desde ./typescript/index.ts
Esto último es lo que REACT está buscando, pero como en
la carpeta typescript tenemos un index no hace falta escribirlo ya que
automáticamente lo va a buscar dentro de ese directorio typescript.
Si vamos a ver nuestra app, veremos que ahora
al lado del h1 aparece el texto basictypes:
Se ve bastante mal y esto es
debido a que en el CSS (index.css) el flex direction lo dejamos en flex pero para
que se apliten los componentes, necesitamos que sea column:
main {
justify-content:
center;
input {
Si salvamos y vamos a nuestra app
veremos que ahora los componentes se apilan en columnas:
Trabajando en nuestro Functional Component
Vamos a nuestro archivo
BasicTypes, donde tenemos nuestro primer componente funcional BasicTypes, y
vamos a empezar a trabajar en él.
Vamos a crear un fragmento con un
h3 que diga tipos básicos:
export const BasicTypes =
() => {
<h3>Tipos
básicos</h3>
</>
)
}
Y ahora en el cuerpo de nuestro
functional component, vamos a estudiar un par de tipos básicos de TypeScript:
Por ejemplo yo puedo tener una
constante de tipo string que guarde mi nombre:
export const BasicTypes =
() => {
<h3>Tipos
básicos</h3>
</>
)
}
Ahora para usar esa constante
name, lo invoco en el return y ya está:
export const BasicTypes =
() => {
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
Nada sorprendente, nada del otro
mundo, pero démonos cuenta de algo, si dejamos el cursor encima, de la
invocación del componente se nos informa que es de tipo string:
export const BasicTypes =
() => {
const name = 'Juanjo';
return
(
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
Si vuelvo aponer el cursor encima de la invocación de mi constante, esta VEZ SE ME INFORMA QUE ES DE TIPO Juanjo
Esto puede parecer algo extraño.
Lo que pasa es que como es una constante jamás va a cambiar de valor, por eso
TypeScript nos está diciendo que el valor de la constante name es de tipo
Juanjo, esto es algo interesante aunque sabemos que es un string, pero es
interesante que tengamos esta opción.
Como sabemos que name es de tipo
string, si yo le añado el punto veo que tengo todos los métodos y propiedades
que yo espero de un string:
![]() |
Por ejemplo, métodos de empieza
con, termina con, el path, replace, Split, es decir todos lo métodos propios de
un string.
Del mismo modo si yo ahora a la
variable name le doy como valor un número, TypeScript lo infiere y del mismo
modo me daría todos los métodos del tipo number:
Todo esto lo hago para que nos quede claro que TypeScript
es capaz de inferir el tipo de una variable o constante. esto es importante
porque yo no necesito memorizar cada uno d ellos métodos que tiene cada tipo.
Por último, otra cosa que debemos
entender es que si yo ahora hago la constante name igual a un Array:
export const BasicTypes =
() => {
const name =
['Juanjo', 'Fernando'];
return
(
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
Si yo ahora pongo el cursor encima TypeScript
me va informar de que ahora la constante
name es del tipo Arreglo de Strings:
Lógicamente name no es un buen
nombre para un array, solo pretendo que tengamos claro que se nos va a dar
ayuda respecto del tipado de las variables y constantes y objetos, así como de
los métodos asociados a cada tipo.
Es por esto que resulta muy
beneficiososo trabajar con un tipado estricto, como nos ofece TypeScript. Visto
todo esto volvamos a dejar nuestra variable name como al principio con su
tipado en la msma declaración:
export const BasicTypes =
() => {
const name:string = 'Juanjo';
return
(
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
Añadiendo más constantes
Sigamos viendo más cosas, ahora
por ejemplo podríamos añadir mas constantes de distintos tipos:
export const BasicTypes =
() => {
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
Supongamos que después tenemos
una constante que queremos que sea de tipo Array y lo queremos inicializar
vacío:
export const BasicTypes =
() => {
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
Lo podemos inicializar vacío,
pero esto va generar un tipado muy interante, si pongo el cursor encima veremos
que nos está diciendo que es del tipo any:
En algunos lugares puede darse el
caso que nos diga que es de tipo unknown, en algunas compilaciones de
Typescript, a veces sale como unkown, y yo puedo incluso declararlo así,
dándole ese tipo:
const powers:unknown =
[];
Cuando nos arroja un unkown, esto
quiere decir es que no sabe el tipo de dato, pero esto es diferente al caso que
nos ocupa que es que sea de tipo any
El tipo any significa que en ese
arreglo, constante, variable, podemos colocar cualquier tipo de dato, Números,
booleanos, strings, numbers, objetos etc. Esto es como báscicamente trabaja
JavaScript.
Sin embargo, TypeScript va
intentar siempre ponerle algún tipo de dato estricto. Nosotros queremos evitar
el tipo any por que al admitir cualquier tipo de dato, esto hace que nuestro
código sea más difícil de mantener.
La forma de actuar en TypeScript,
sería declararlo diciéndole que es un arreglo de strings y que lo inicializo
vacío:
export const BasicTypes =
() => {
const name: string = 'Juanjo';
const powers: string[] = [];
return
(
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
O bien podría darle valores en la
declaración:
export const BasicTypes =
() => {
const name: string = 'Juanjo';
const powers: string[]
= ['React',
'ReactNative', 'Angular',
'Vue'];
return
(
<h3>Tipos
básicos</h3>
{ name }
</>
)
}
export const BasicTypes =
() => {
const name: string = 'Juanjo';
const powers: string[]
= ['React',
'ReactNative', 'Angular',
'Vue'];
return
(
<h3>Tipos
básicos</h3>
{ name } { age } { isActive?
'true': 'false'}
<br />
{powers}
</>
)
}
En mi app podré ir viendo lo que
me devuelve mi componente funcional
Esta es la forma en que react
imprime un objeto, podría usar el join para separarlos por una coma por
ejemplo:
export const BasicTypes =
() => {
const name: string = 'Juanjo';
const powers: string[]
= ['React',
'ReactNative', 'Angular',
'Vue'];
return
(
<h3>Tipos
básicos</h3>
{ name } { age } { isActive?
'true': 'false'}
<br />
{powers.join(', ')}
</>
)
}
Esta sería básicamente una
introducción a los tipos básicos en TypeScript, hemos visto que el tipado
fuerte tiene muchas ventajas frente al tipado débil de JS, por ejemplo, si yo
quisiera ahora hacer un push de números a mi array de strings:
No hay comentarios:
Publicar un comentario