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'
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
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
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
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!
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
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!
@@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
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 Axios permite definir defaults, te recomiendo mirar la documentacion. Pueden empezar por aca www.npmjs.com/package/axios#global-axios-defaults
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
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
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??
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.
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?
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!
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
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
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.
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});
@@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.
@@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
@@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
@@dayan7359 Bueno eso ya depende el equipo que esté detrás del desarrollo, así como RUclips 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
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
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'
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
Exacto
Y en el Route va element={} en vez de component={SomeElement}
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
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
No sabes cuanto me haz ayudado... Sigue asi y nunca pares de sorprendernos
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!
muy chulo el video, genial lo del
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
Me encanta tu estilo, muy limpio y explicas con mucha confianza.
Fazt definitivamente eres el mejor, tenia días buscando esto!!
Espero próximamente algo de React con BDD
vos sos el mas capo Fazt
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 !
Pero que grande eres! Gracias de nuevo por compartir tu conocimiento con los demás.
Excelente Fazt, seguí los dos videos y he aprendido mucho, gracias.
Saludos Fazt, muchísimas gracias por hacer lo qué haces, he aprendido muchísimo contigo ☺️.
Excelente proyecto y explicación
Buenisimos tus videos brot, muchas gracias!!!
Que grande Fazt justo lo que buscaba
El contenido es de buena calidad. Saludos
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.:
Justo lo que necesito, gracias bro.
Gracias Fazt, aprendí muchooo.
que buen video, buen fazt!
Gracias Fazt ♥
Muchisimas gracias como siempre fazt de 10!
Lo que esperaba gracias
Muchas gracias 🙏🙏 excelente video... 💯
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!
Por eso se llama fazt 😅
El dios Fazt!
Excelente trabajo
Mil gracias.
Excelente aporte! De lo mejor que vi! Hay tercera parte?
Mi único héroe en este lío
Dedo arriba si también es el tuyo
useEffect es el sucesor de componentDidMount y componentDidUpdate, dependiendo del arreglo que tiene
😀Gracias.
Fazt, puedes enseñarnos a usar contentful?
Gracias:)
Que gran gran aporte
EXCELENTE, GRACIAS
Gracias Fazt por este curso! Una consulta, qué pasa con el SEO de una SAP en React?
Fazt, una pregunta... en serio, COMO CARAJO TE ENTRA TANTO EN LA CABEZA? :v
Tiene dos computadoras. En una lee código y en otra escribe.
pues porque a eso se dedica y es su trabajo burris
@@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
Impresionante muchas gracias Fazt, alguien tiene la URL para continuar con el canal de pago Premium, para aprender a hacer el despliege gracias.
Holaa el video del despliegue de esta app sigue en pie o ya fue? uwu
super genial
Gran video fazt, una pregunta, cual es el tema de vs que usas? o alguien más sabe cual es?
El tema se llama Dobri Next :)
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!
Perdona podrias explicarte un poco mejor? Es que voy a montar una App en el trabajo con axios y no sé mucho! Gracias
@@oscargm1979 Axios permite definir defaults, te recomiendo mirar la documentacion. Pueden empezar por aca www.npmjs.com/package/axios#global-axios-defaults
Excelente! Solo me falta saber implementar modals para los formularios, ¿Alguien sabe cómo?
Fazt una pregunta. ¿como se descarga tan rápido las librerías de react, o es que adelantas el video?
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
Bootstrap actualizo su versión, es posible que la sintaxis haya cambiado.
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
Primer comentario!!!!
Como obtengo acceso al próximo video extra que sigue para desplegar esta misma app.
En qual canal es el deploy, en esta o en tu otro canal?
Como aun no esta activo el boton unirse en este canal, sera gratuito y será publicado mañana por aquí Gustavo :)
@@FaztTech Hola, me puedes compartir el links, por favor :)?
@@FaztTech si lo publicaste?
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??
Substitua
const history = useHistory()
por
const navigate = useNavigate()
import { useNavigate } from "react-router-dom"
Excelente.
Tambien dejo el video de react-router-dom 6 para mas informacion :)
ruclips.net/video/7xRVnmWcTE8/видео.html
Clever Programmer
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.
Cómo se llama el tema??
El video de la API ya no está disponible?
Aquí esta: ruclips.net/video/_RZ-T6TxP7w/видео.html
@@FaztTech Gracias !
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?
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!
cuando agrego el component = {VideosList} molesta el component no se porque, dice que no existe en type
el component no se usa , cambia el component por element = {}
Primer comentario:D
Hola Fazt .. porque no me aparece el primer video? :(
Alguien sabe cual es el primer video? o tiene el link?
creo que lo retiro
supongo que lo resubirá
@@erickmarleyarita8026 Ojala :(
Se los dejo chicos :) ruclips.net/video/_RZ-T6TxP7w/видео.html
@@FaztTech Gracias pana
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
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
Pregunta seria, :) Si hago todo esto video 1 y 2 sin guias soy un Senior? o un Junior consolidado?
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.
Que lío hizo cuando quiso ordenar los videos por fecha, con un flex-direction: row-reverse se solucionaba 😂😂
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});
@@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.
@@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
@@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
@@dayan7359 Bueno eso ya depende el equipo que esté detrás del desarrollo, así como RUclips 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
se murio el primer video :'( #1
lo edite mal, ahora ya esta resubido correctamente :)
Ya no esta dispobible #1 Frontend. Creo que fue eliminado
Ya esta disponible otra vez: ruclips.net/video/_RZ-T6TxP7w/видео.html
me quede en ruclips.net/video/wOLo-B7mrZM/видео.html
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