MERN STACK & Typescript (Mongodb, Express, React, Node con Typescript) - #2 Frontend

Aprende más de Expo.io ➞ bit.ly/3jdjnST
Esta es la segunda parte del video Práctico del Stack MERN (Mongodb, Express, React y Node). En esta sección aprenderemos a crear una aplicación Web Frontend usando módulos de React como react-router-dom, react-toastify, axios y otros módulos más además de Typescript.
Primera Parte ➞ • MERN STACK & Typescrip...
💻 Código de este proyecto:
github.com/Faz...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
Hostinger ➞ 7% de descuento en cualquier compra ➞Código: FAZT
👨‍💻 ¿Qué servicios utilizo?
Kite ➞ bit.ly/3dPzXHe
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/...
Cloudinary ➞ bit.ly/3ohNlJ7
SiteGround ➞ bit.ly/31u9ZEk
Namecheap ➞ bit.ly/3kne9W8
🖥️ Recursos:
Deno, Un nuevo entorno de Javascript ➞ • ¿Qué es Deno ? Un nuev...
Javascript para principiantes ➞ • Curso Javascript para ...
Curso de NodeJS ➞ • Nodejs Curso Desde Cer...
Curso de Git ➞ • Git y Github | Curso P...
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ [e-mail]
¡Gracias a Kite por patrocinar esta sección del vídeo! Kite es un asistente de autocompletado gratuito con tecnología de IA que te ayudará a codificar de forma más rápida e inteligente:
Haz clic aquí ➞ bit.ly/3dPzXHe ➞ para saber más.
#mern #typescript #react

[@josecarvajalhernandez665]

consideraciones: 1- para instalar typescript debes hacerlo así: "--template typespcript" en ves de así: "--typescript". 2- usar : import {BrowserRouter, Route, Routes} from 'react-router-dom' en vez de import {BrowserRouter, Route, Switch} from 'react-router-dom'

[@susor708]

Sip, en el momento del video era correcto, pero creo que (con React 17?) la forma de instalar TypeScript cambió. Lo de React Router me descolocó hace unos días jajaja. Lo cambiaron en la última actualización. Encima en la documentación no lo cambiaron, lpm

[@brandocarrillo8866]

Exacto

[@brandocarrillo8866]

Y en el Route va element={} en vez de component={SomeElement}

[@RodrigoCarrillo94]

1:07:03 Comunidad, agregar: width='100%' height='100%' al ReactPlayer para la responsividad, ya que en Boostrap 5.1 se utiliza y con ratio (no con embed-responsive). Saludos

[@yorshazli]

[@carlosalbertozavalagodoy7569]

muchísimas gracias Fazt me haces mover mi cerebro de izquierda a derecha con tus tutoriales, aprender con tus tutoriales, se siente como ir en un vuelo de spacex con mucha adrenalina !!! muchas gracias

[@SonGoku-pc7jl]

muy chulo el video, genial lo del

[@easytech9053]

No sabes cuanto me haz ayudado... Sigue asi y nunca pares de sorprendernos

[@jgvlc]

Muchísimas gracias, este stack se está demandando mucho en la actualidad, además explicas cada paso de forma muy amena y fácil. Enhorabuena estoy seguro que estás ayudando a muchísima gente!

[@mateovivas6920]

Me encanta tu estilo, muy limpio y explicas con mucha confianza.

[@pabloescales2588]

In addition to the answers, it should be noted that starting from react-router-dom v6, has been replaced by , and "component" to "element" eg.:

[@mexicandevelopers6469]

gracias por el tutorial, enserió que apoyas mucho a la comunidad latina, te agradezco por adelantado los proyectos que harás con react-native con expo, bueno mas de uno te lo agradecera

[@luisdavidsantiagosantana4305]

Saludos Fazt, muchísimas gracias por hacer lo qué haces, he aprendido muchísimo contigo ☺️.

[@mauroinde]

vos sos el mas capo Fazt

[@RafaArraez]

Fazt definitivamente eres el mejor, tenia días buscando esto!! Espero próximamente algo de React con BDD

[@d-landjs]

Excelente Fazt, me ayudo mucho este video a comprender como va TS con React y Node!!! Solo queda práctiar mas, espero que hagas mas tutos complejos !

[@Totus_tuus_Maria]

Excelente proyecto y explicación

[@luiszabalaga3816]

Excelente Fazt, seguí los dos videos y he aprendido mucho, gracias.

[@oscargm1979]

Pero que grande eres! Gracias de nuevo por compartir tu conocimiento con los demás.

[@davidhch9833]

Gracias Fazt ♥

[@glzsan5927]

Justo lo que necesito, gracias bro.

[@jackb.777]

El contenido es de buena calidad. Saludos

[@lindltaylor4093]

Que grande Fazt justo lo que buscaba

[@juliangarcia8051]

Mil gracias.

[@henryromero3482]

Buenisimos tus videos brot, muchas gracias!!!

[@veronicaflorescalla8102]

Gracias Fazt, aprendí muchooo.

[@arlandmv4053]

Fazt, puedes enseñarnos a usar contentful?

[@LumbreraEnMiCamino]

Lo que esperaba gracias

[@melojuan]

Fazt, una pregunta... en serio, COMO CARAJO TE ENTRA TANTO EN LA CABEZA? :v

[@surflaweb]

Tiene dos computadoras. En una lee código y en otra escribe.

[@AlanDanielx]

pues porque a eso se dedica y es su trabajo burris

[@cristianalvarado7952]

@@surflaweb jajajajajaja así estamos muchos en el trabajo, pero la verdadera clave es dedicarle tiempo voy por el proyecto 53 entre el trabajo y estos videos, y se nota que aprendes bastante, ni cuenta te das y estas codeando al mismo ritmo del video

[@richardjorgemirandaabarca2349]

😀Gracias.

[@obsesivasyntaxis4975]

El dios Fazt!

[@yesiddodge8742]

Excelente trabajo

[@xandinho4564]

Substitua const history = useHistory() por const navigate = useNavigate() import { useNavigate } from "react-router-dom"

[@FaztTech]

Excelente. Tambien dejo el video de react-router-dom 6 para mas informacion :) kzbin.info/www/bejne/bam1h6GjjMiHe5o

[@fullpeliculafhdhdsd9242]

Gracias:)

[@mauroinde]

Muchisimas gracias como siempre fazt de 10!

[@MrBananaspli]

Holaa el video del despliegue de esta app sigue en pie o ya fue? uwu

[@scott-123]

Excelente aporte! De lo mejor que vi! Hay tercera parte?

[@pupoxws983]

EXCELENTE, GRACIAS

[@quepasohoyofficial]

useEffect es el sucesor de componentDidMount y componentDidUpdate, dependiendo del arreglo que tiene

[@mauroavellaneda9019]

Mi único héroe en este lío

[@mauroavellaneda9019]

Dedo arriba si también es el tuyo

[@AlanDanielx]

En este video en especifico, te comento como feedback que explicas muy rapido y cambias de ventana tan rapido que uno tiene que estar pausando a cada rato lo cual no hace una buena experiencia, pero en si, un excelente video despues de todo lo aprendido, gracias!

[@joseluis3545]

Por eso se llama fazt 😅

[@chrisytbexp6705]

que buen video, buen fazt!

[@ricanmalra]

Muchas gracias 🙏🙏 excelente video... 💯

[@javier_barrios_shm]

Que gran gran aporte

Gracias Fazt por este curso! Una consulta, qué pasa con el SEO de una SAP en React?

[@jaimesanchezgalvis]

Impresionante muchas gracias Fazt, alguien tiene la URL para continuar con el canal de pago Premium, para aprender a hacer el despliege gracias.

[@__diego432__]

Gran video fazt, una pregunta, cual es el tema de vs que usas? o alguien más sabe cual es?

[@FaztTech]

El tema se llama Dobri Next :)

[@victoralfonsocastillomuril8599]

super genial

[@sukerrojas7684]

Fazt una pregunta. ¿como se descarga tan rápido las librerías de react, o es que adelantas el video?

[@lujanemmanuel]

Excelente! Solo me falta saber implementar modals para los formularios, ¿Alguien sabe cómo?

[@vinchenzoaragon1438]

Hola Fazt, estuve revisando los enlaces como "¿QUÉ ES TYPESCRIPT?" y "CURSO DE EXPRESS" y son enlaces que no tienen que ver me parece. Revísalo por fa. Saludos y muy buen video.

[@sergiob3698]

Muy bueno! Me gustaria consideres hacer algo similar con NextJs.🙏 Y para dar me aporte Axios tiene algo que define la base url a nivel global asi no necesitas concatenar la url de la api. Gracias!

[@oscargm1979]

Perdona podrias explicarte un poco mejor? Es que voy a montar una App en el trabajo con axios y no sé mucho! Gracias

[@sergiob3698]

@@oscargm1979 Axios permite definir defaults, te recomiendo mirar la documentacion. Pueden empezar por aca www.npmjs.com/package/axios#global-axios-defaults

[@TheinfinityLight]

Clever Programmer

[@mariojorgeszanto8172]

Como obtengo acceso al próximo video extra que sigue para desplegar esta misma app.

[@MrGabrielcaba]

hice todo quedo perfecto el unico detalle es que la clase de boostrap para embed-responsive para que queden responsive los videos dentro de las tarjetas , no me toma esa clase

[@jeanpinto8864]

Bootstrap actualizo su versión, es posible que la sintaxis haya cambiado.

[@lmunozpr264]

A mi me ha ocurrido lo mismo. Yo he usado otra plantilla distinta de bootswatch a la de este vídeo y por eso no lo estoy haciendo todo igual que en este vídeo(en cuanto a la estética). Por lo que yo lo he solucionado envolviendo el elemento ReactPlayer entre un como hace en el video, pero yo le he añadido las clases ''card-body d-flex'', puesto que el vídeo ocupará todo el cuerpo de la tarjeta. Con estas dos clases te aparecerá en ajustado al espacio y además con paddings bien centrado y demás, y si tan solo utilizas la clase ''d-flex'' se ajustará al tamaño de la tarjeta perfectamente pero sin dejar los paddings que te comentaba, ocupará todo el espacio del mismo. Saludos! espero que te sirva de ayuda

[@RodrigoCarrillo94]

Hola Bro!! en el Update la carga de datos en los campos del form estan en un loop infinito, me refiero a que al intentar modificar cualquiera de los campos, se aprecia que se estan re-cargando sin parar, entonces escribo una letra y ya se borra mostrando los campos actuales.. que puede ser??

[@forcodebr]

En qual canal es el deploy, en esta o en tu otro canal?

[@FaztTech]

Como aun no esta activo el boton unirse en este canal, sera gratuito y será publicado mañana por aquí Gustavo :)

[@chriz7u789]

@@FaztTech Hola, me puedes compartir el links, por favor :)?

[@sergiotellezesinocente6865]

@@FaztTech si lo publicaste?

[@stac95]

Primer comentario!!!!

[@arielceluya5913]

Cómo se llama el tema??

[@anthonytowers9655]

Hola Fazt .. porque no me aparece el primer video? :(

[@MesacMovies]

Encontré un bug si estoy editando un video y le doy en el menu 'crear nuevo' no se borran los campos porque en el router es el mismo componente como podría borrar los campos del formulario?

[@MesacMovies]

Creo que encontre la solucion aun que no se si sea la mas optima en el useEffect si esta el params.id obtiene el video si no setVideo en initialstate y en el array del useEffect meti el params.id eso es correcto? Espero puedas responder, gracias!

[@miusicpro-musicaparacreado9513]

cuando agrego el component = {VideosList} molesta el component no se porque, dice que no existe en type

[@omarortizjimenez2429]

el component no se usa , cambia el component por element = {}

[@AndresRodriguez-qz1vm]

Fazt Broth, el metedo delete me da un problema Notification Item= const handelDelete = async ( id: string)=> { await notificationService.deleteNotification(id): notificationService= loadNotifications(); export const deleteNotification = async (id: string)=>{ return await axios.delete(`${API}/deleteNotification/${id}`) En el Objeto Notification de delete, esta el error... =/ Expected 0 type arguments, but got 1.ts(2558) capaz y es solo un error, que no logro identificar

[@nerochristopher1692]

El video de la API ya no está disponible?

[@FaztTech]

Aquí esta: kzbin.info/www/bejne/lYO9Xodsid2Dbdk

[@nerochristopher1692]

@@FaztTech Gracias !

[@luisfelipequispe]

Primer comentario:D

[@yorvymeza1546]

Fazt Sera que puedes hacer un tutorial de como hacer una app de ecommerce donde uno pueda comprar producto sería un video excelente como lo que tu haces

[@jaimesanchezgalvis]

Pregunta seria, :) Si hago todo esto video 1 y 2 sin guias soy un Senior? o un Junior consolidado?

[@jorgemosqueda9409]

Creo que de eso no depende ser senior o junior. Alguien lo puede hacer de memoria pero sin saber qué es lo que esta haciendo ni porque se hace así, creo que el ser senior o junior se define por tu nivel de comprensión al desarrollar.

[@carlosmorales1866]

Alguien sabe cual es el primer video? o tiene el link?

[@erickmarleyarita8026]

creo que lo retiro

[@erickmarleyarita8026]

supongo que lo resubirá

[@carlosmorales1866]

@@erickmarleyarita8026 Ojala :(

[@FaztTech]

Se los dejo chicos :) kzbin.info/www/bejne/lYO9Xodsid2Dbdk

[@carlosmorales1866]

@@FaztTech Gracias pana

[@alejandrogonzalezcolin4475]

Ya no esta dispobible #1 Frontend. Creo que fue eliminado

[@FaztTech]

Ya esta disponible otra vez: kzbin.info/www/bejne/lYO9Xodsid2Dbdk

[@sundar392]

se murio el primer video :'( #1

[@FaztTech]

lo edite mal, ahora ya esta resubido correctamente :)

[@Enzo-ye5yl]

Que lío hizo cuando quiso ordenar los videos por fecha, con un flex-direction: row-reverse se solucionaba 😂😂

[@ospina5367]

Espero que digas eso de broma jajajaja, y si una aplicación externa consume la API y no utiliza flex para listar los vídeos?. La otra opción es ordenarlos desde el Backend, que para mí opinión es la mejor. Mongo tiene el método sort. const videos = await Video.find({}).sort({createdAt: -1});

[@dayan7359]

@@ospina5367 pues ya es cosa de quién y cómo decida usar la API. En este caso es mucho más sencillo hacer un row-reverse. Tu forma de hacerlo condiciona más al que usa la API, ya que lo estás ordenando de una forma desde el principio.

[@ospina5367]

@@dayan7359 Los datos vienen desde el Backend, por lo tanto el Backend debe entregarlos cómo el usuario final los necesite y él ya decide como organizarlos en el front. En ese caso no habría problema en entregar los datos ordenados o no de acuerdo a parametros en la URL, todo depende en realidad de cómo lo necesiten los usuarios finales

[@dayan7359]

@@ospina5367 exacto, y qué tal si el usuario lo quiere de más reciente a más a antiguo? U otro usuario lo quiere diferente? No puedes cumplirle a ambos con la misma petición, el front tendrá que ver como mostrar los datos como se lo entreguen

[@ospina5367]

@@dayan7359 Bueno eso ya depende el equipo que esté detrás del desarrollo, así como KZbin tiene para ordenar vídeos que vienen desde su base de datos por más reciente, más antiguo, más visto, etc etc... Pero sí tienes razón, ahora, yo comentaba lo que es mejor entregarlos ordenados de más reciente a más antiguo desde el Back directamente porque es buena práctica, así es como se entregan normalmente, espero me haga entender bro, pero bueno hay maneras y maneras... de hacer las cosas

[@asbeldev3071]

me quede en kzbin.info/www/bejne/rYCvoGB4bNKlkK8

[@hernanplaza5436]

C:/Users/TSI2/Desktop/mern-typescript/fontend/src/components/videos/VideoItem.tsx TypeScript error in C:/Users/TSI2/Desktop/mern-typescript/fontend/src/components/videos/VideoItem.tsx(18,22): No overload matches this call. Overload 1 of 2, '(props: ReactPlayerProps | Readonly): ReactPlayer', gave the following error. Type 'String' is not assignable to type 'string | string[] | SourceProps[] | MediaStream | undefined'. Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible. Overload 2 of 2, '(props: ReactPlayerProps, context: any): ReactPlayer', gave the following error. Type 'String' is not assignable to type 'string | string[] | SourceProps[] | MediaStream | undefined'. TS2769