3-TypeScript se compila a JavaScript
JAVASCRIP PARA REACT
-[Link](producto) //Con esto no permite realizar modificaciones a
un objeto
-[Link](producto) //Permite modificar los valores pero no agregar ni
eliminar
-Dentro de una destructuracion puede haber otra destructuracion
-> OPERACIONES CON ARREGLOS Y FUNCIONES MUTABLES
-[Link]('hola')
-Cuando veamos el termino de mutar en una funcion quiere decir que si
modifica al arreglo, por ende no se recomienda push con react
-[...arreglo1, 'hola'] //Genera un arreglo nuevo osea no lo muta
- Si usamos una funcion que muta como push y despues queremos volver a
asignarle con un set el mismo arreglo, pues React no lo renderiza pq es
el mismo arreglo
-> DESTRUCTURACION DE ARREGLOS
-const tec = ["html", "css"]
-const [htmlVar, cssVar] = tec;
-Lo va destructurando en base a la posicion
-> FUNCIONES
-Con function expresion lo que hace JS es primero registrar todas las
funciones
function sumar(){}
-> OPTIONAL CHAINING ?
- Sirve para acceder a propiedades sin que JS arroje error si algo es
null o undefined
-Si en cualquier punto hay null o undefined, se detiene y devuelve
undefined
[Link]([Link]?.examen1)
-Revisa si existe esa propiedad y si no simplemente seria undefinied, de
igual forma el codigo posterior se ejecuta y no lanza excepcion como
cuando no tiene
{user?.images?.map?.(img => (
<img key={[Link]} src={[Link]} />
))}
-> NULLISH COALESCING ??
- Sirve para dar un valor por defecto solo cuando el valor de la
izquierda es null o undifined
EJM:
valorA ?? valorB
-valorA → si NO es null ni undefined
-valorB → si valorA es null o undefined
-> EVALUACION DE CORTOCIRCUITO
-Es cuando una expresion se trata como Truty, es un valor que es
considerado true cuando se evalua en un contexto de boolean o condicion,
siempre es true hasta que se demuestre lo contrario
-Un arreglo vacio u objeto es truty
user && [Link]() //Si lo de la izquierda es true entonces se ejecuta
lo de la derecha
OPERADOR OR ||
-Devuelve el primer valor truthy, si ninguno lo es devuelve el ultimo
0 || 5 // 5
OPERADOR &&
-Devuelve el primer valor falsy, si ninguno lo es devuelve el ultimo
user && <Button/>
-> PROMISE
-Si queremos realizar varias peticiones a la vez, en lugar de hacerlo de
forma secuencia con await podemos usar: const [response1, response2,
reponse3] = await [Link]([fetch(url1), fetch(url2), fetch(url3)])
DOM
-Es una representacion del HTML en forma de arbol de objetos para que JS
pueda manipularlo
-Lo que mas se usa es el [Link]('.heading')
-Modificar el DOM puede ser caro, por eso React modifica el virtual DOM
-El target de un evento es el elemento html
VIRTUAL DOM
-Es una copia liviana del DOM, hecha con objetos JS, que se mantiene en
memoria antes de sincronizarse con el DOM real
-Cuando se modifica el DOM se recalcula todos los estilos, recalcula
posiciones, vuelve a pintar, si afecto a otros elementos
-Cuando se modifica el DOM se recalcula ese elemento y tambien todos los
elementos que pueden verse afectado por el cambio, cuando se modifica
algo en el DOM virtual se compara con el DOM virtual anterior para solo
modificar en el DOM lo necesario
-A veces es solo uno y muchas veces son varios
CREAR UN PROYECTO CON VITE
-Es una herramienta de desarrollo frontend, hace mas rapido arrancar y
recargar cambios
-En desarrollo, Vite no junta archivos, usa modulos ES del navegador y
responde a los import como si fueran peticiones HTTP
-El navegador solo carga los módulos que necesita cuando los necesita. Si
tienes 100 archivos pero solo usas 5 al cargar la página, el navegador
solo descarga esos 5.
-El navegador descarga [Link] -> <script type="module"
src="/src/[Link]"></script>, ve un import y hace una peticion http
-Se denomina modulos ES nativos del navegador porque el navegador puede
entender y ejecutar las sentencias import y export
-Durante muchos años, aunque JavaScript tenía módulos ES en su
especificación, los navegadores no los soportaban.
-Si cambias un archivo, Vite solo necesita avisar al navegador "oye, este
archivo cambió", y el navegador lo recarga. No hay que reconstruir un
bundle completo.
-Vite construye un grafo de dependencias para sabe que depende de que y
actualizar solo lo necesario
-En la consola: npm create @lastest
-SWC es un compilador en el cual estan trabajando VITE
-El navegador pide [Link] ya que lo vio en un import -> GET /src/[Link]
Vite: Devuelve [Link], si es jsx o ts -> lo tranforma a JS
BUNDLER
-Es una herramienta que junta muchos archivos en uno (o pocos)
optimizados para el navegador
QUE HACE
-Un bundler (Webpack, Rollup, etc)
1. Lee el archivo principal ([Link])
2. Sigue todos los imports
3. Construye un grafo de dependencias
4. Junta todo en: [Link]
Al final queda: <script src="[Link]"></script>
-Esto era necesario porque los navegadores eran viejos, no entendian
import, no entendian jsx, no entendian TS
-Tambien los bundler: Convertian jsx -> js, ts -> js, optimizaba imagenes
y css
-Vite no es un bundler pero si usa rollup en produccion
-Webpack perdio terreno porque es muy lento en desarrollo, configuracion
compleja pero es muy poderoso y ultra configurable
-create react app -> webpack
-vite + react -> rollup (solo en build)
-Para producción siguen siendo esenciales. Servir miles de archivos
pequeños por HTTP es muy ineficiente. Cada archivo requiere una petición
HTTP separada, lo que genera latencia. Es mucho más rápido descargar un
solo archivo optimizado de 500KB que 500 archivos de 1KB cada uno.
-Aparte realizan otras optimizaciones
MODULOS ES
-Los modulos ES son una forma estandar de JavaScript para dividir codigo
en archivos usando import y export
-Los modulos ES son el sistema de modulos del lenguaje (Como se divide el
codigo en modulos, como se cargan, como se resuelven, como se ejecuta),
import y export son la sintaxis de ese sistema
-Los navegadores modernos los entienden directamente, sin bundler (en
dev)
-Antes de la llegada de los modulos ES habia varias formas de organizar
el codigo, una de ellas era multiples archivos con etiquetas <script> en
el html
-Antes:
<script src="[Link]"></script>
<script src="[Link]"></script>
<script src="[Link]"></script>
-Debia haber un orden manual, varibles globales, dificil escalar
-Ahora:
<script type="module" src="/src/[Link]"></script>
-Y dentro
import { suma } from "./[Link]";
Como funciona:
-Cuando el navegador ve:
import App from "./[Link]";
1. Hace una peticion HTTP a [Link]
2. Ejecuta el modulo
3. Cachea el resultado
4. Respeta dependencias
REGLAS DE LOS HOOKS
-No poner un hook dentro de un condicional, funcion del componente
PROPS
-Es una forma de compartir informacion entre componentes
STATE DERIVADO
-Es un state derivado de otro, podemos ponerlo al inicio de nuestro
componente:
const totalPagar = [Link]((total, guitar) => total +
([Link] * [Link]), 0)
-El state de react es asincrono, porque afectaria al renderizado de la
interfaz y su interaccion con ella
-Aunq sea asincrono no devulve una promesa, si queremos ejecutar codigo
despues de una actualizacion podemos usar un useEffect
CUSTOM HOOKS
-Deberia tener la extension .js
TYPESCRIPT
-Es un superconjunto tipado de JavaScript
-El codigo que se escribe al final se ejecuta como JavaScript pero
TypeScript ayuda antes de ejecutar a detectar errores (en el editor y al
compilar)
VENTAJAS
-Permite especificar los tipos de los variables, parametros, valores de
retorno. Permite realizar comprobaciones durante la compilaciones y
detectar errores posibles cuando se escribe el codigo
-(Opinion personal) La principal ventaja es el autocompletado que vamos a
tener con VS
POTIPS
-Cuando pasamos algo a una funcion, si no definimos el tipo nos puede
arrojar una advertencia de que lo que estamos pasando pueda ser null,
entonces para eso podemos poner !, con esto garantizamos que lo que
estamos pasando no es null
-TypeScrip puede inferir en el tipo de nuestros datos, pero es mejor
crear grupos o interfaces
TIPOS PRIMITIVOS
-Son los tipos de datos de TS soporta de forma nativa como: number,
string, boolean, null, undefined
let const : string = "ciudad" //Ya despues si queremos modificar su valor
con otro valor de diferente tipo nos saldra error, TS infiere tipo
entonces en este caso no es necesario poner el tipo
-En JavaScript cualquier numero es un number
-undefined significa que no tiene aun valor asignado
-null significa que intencionalmente no tiene valor
LITERAL TYPE
-Con let TS inferiere un tipo generalmente primitivo, con un const este
no es el caso. EJM:
const estado = "activo"
-TS infiere el tipo como "activo" no string
INFERENCIAS
OBJETOS
const user = {
id: 1,
name: "Ana",
active: true
}
El tipo es: {id: number, name: string, active: boolean}
Por tanto [Link]="1" -> error
ARRAYS
const numbers = [1, 2 ,3]
tipo -> number[]
por tanto [Link]("1") //error
FUNCTIONS
-No existe inferencia aca, se debe tipar los parametros
-En Return si se infiere -> (): number
Regla de oro -> Dejar que TS infiera cuando pueda, y especificar cuando
no pueda o hay ambiguedad
TIPADO DE FUNCIONES
UNION
-Es normal poner string | null, es decir que puede tener uno u otro tipo
BIGINT
let montoGrante : bigint = 100000000000n
TYPES & INTERFACES
-Ambos pueden ser utilizados de forma intercambiable
-Types:
type Guitar = {
id: number
decription: string
}
export const db : Guitar[] = [{}, {}]
-Interfaces
interface Guitar{
} //Basicamente lo mismo q type
EN LOS PROPS PODEMOS DEFINIR EL TYPE INLINE O SEPARADO
type Guitar = {...}
export function Guitar({guitar, addGuitar} : {guitar: Guitar, addGuitar:
(item: Guitar)=>void}){}
-Para una mejor legibilidad podemos usar el nombre del componente y el
props:
type GuitarProps = {...}
export Guitar({guitar, addGuitar} : GuitarProps){}
PARA CENTRALIZAR Y REUTILIZAR LOS TYPES
-Creamos una carpeta de types y creamos un archivo [Link], dentro
ponemos los types que queremos reutilizar con un export, los typesProps
los dejamos en el componente
-Para usarlos: import type {Guitar} from '../types'
HERENCIA DE TIPOS
-Con types:
export type Guitar = {}
export type CartItem = Guitar & {}
-Con interfaces
export type Guitar = {}
export interfaces CartItem extends Guitar {}
UTILITY TYPES
-En la herencia podemos seleccionar solo los propiedades que nos
interesan:
export type CartItem = Pick<Guitar, 'id' | 'name'> & {
}
-Con Omit es lo contrario, especificamos lo que queremos omitir
TYPES DE LOS PARAMETROS
-En una parametro podemos simplemente especificar los tipos de datos pero
si estos son la propiedad de un objeto entonces si el objeto cambia
entonces tendremos que estar cambiando cada uno de estos, para eso
tenemos 2 alternativas, en nuestro archivo de [Link]:
export type cartID = Pick<Guitar, 'id'>
o Podemos hacer:
export type carID = Guitar['id']
o simplemente poner en el codigo Guitar['id']
TAILWIND
-Podemos agregar espacio entre los elementos hijos mediante: space-y-3
PARA ASIGNARLE UN TIPO A UN STATE
-Podemos hacero con generics
-const [order, setOrder] = useState<OrderItem[]>([])
-Para ponerle un estilo al ultimo hijo:
className="last-of-type:border-b"
CONVERTIR NUMER STRING A NUMBER
+stringNumbb er
-Si desactivamos un boton podemos ponerle estilos cuando este este:
disabled:opacity-10
FORMULARIOS
-Normalmente se usa una libreria para manejar los formularios, pero en
las entrevistas suelen pedir implementarlos en codigo, entonces tenemos
algunas opciones
EN UN OBJETO
-Los inputs que estan relacionados podemos manejarlo en un solo objeto:
const [activity, setActivity] = useState({
name: "",
calories: 0
})
-Podemos poner en los values de los inputs la propiedad correspondiente
del objeto, pero tambien deberemos tener un handleChange
-Si queremos poner una propiedad de un objeto o un valor como tal como
key de un objeto, podemos poner: {[[Link]]: ...}