06:22 Explicación de la Prueba Técnica 13:03 Diseño de la app 18:20 Crear app (Visual Studio Code)

@Michelbouf

10 ай бұрын

20:26 Instalar MUI y Styled Components 24:40 Crear carpetas 29:04 Limpiar App tsx 32:14 Implementar Home 34:20 Navbar 45:09 Table 1:05:10 Implementación de Styled Components 1:16:00 Añadir Checkbox (favoritos) 1:32:08 Crear Redux 2:11:38 Modal 2:29:10 ...

@NahuelMerlo-zg1gp

8 ай бұрын

Héroe sin capa

Gentleman puedes hacer más videos así, por fa?? Son buenísimos y se aprende mucho

@manuelfernandez4307

Жыл бұрын

Coincido

La calidad de contenido de este canal está a otro nivel , he aprendido muchísimo de buenas prácticas y detalles en medio de la creación de un proyecto grupal, y las he aplicado a medida de lo posible. Gracias, todo esto es oro, desearía que algún día crees una app utilizando RTK Query o algo similar para el manejo de los estados que dependen de funciones asíncronas, de nuevo gracias por el conocimiento que me has aportado.

El hecho de que te equivoques a veces y vayas de cara con ello me da confianza. Este tipo de vídeos tienen el problema de hacer creer a la gente que todo el mundo programa rapidísimo y que todo el mundo que sube un video a youtube es un Dios, esto genera mucho "síndrome del impostor" y programar cualquier cosa requiere tiempo por muy bueno que seas. Enhorabuena por el vídeo, he aprendido y me ha gustado. Tienes un seguidor más.

@danielpro8529

22 күн бұрын

Que comentario tan real, nada sale perfecto a la primera, todos nos atascamos, todos la cagamos, la victoria esta en levantarse, aprender y superarse

Que gran mentor, increíble lo que aprendo con tus videos, seguí así ! Es muy especial tu contenido !! Pocos saben tanto y saben explicarlo de manera que todos lo entiendan !

Yo estoy aprendiendo a desarrollar apps web y hoy terminé de armar una calculadora en react y redux, el típico proyecto de principiante, me costó como 2 días hacerlo pero lo logré. Es muy interesante observar lo que me espera en un futuro

Alta introducción, papaaá!

Excelente contenido Alan! No se como pero a pesar de las 3 horas ni me di cuenta y te seguia el desafio! Por mas contenido como este 🎊🎊

Excelente gentle gracias por los aportes que haces a la comunidad

Felicidades me encanto mucho todo lo que aprendi gracias a ti, apoyo total y desde hoy estare bastante pendiente de tus contenidos, saludos desde Colombia!

Yo hace poquito descubri el canal, de hecho hasta te tengo en linkedIn(lo agregue despues de ver el directo de angular) y es super completo, se me pego el tuki tuki xD Y la verdad aprendi un monton de buenas practicas, tips, todo.. GRACIAS se queda cortisimo! Genial los dirctos!!

que buenos videos Gentleman , gracias por compartir tus conocimientoss

Buenisimo a nivel SUPERLATIVO! Gracias crack

Estuvo muy bueno este video Alan, aprendi cosas que no sabia, trae mas viddos asi por favor,que sirven un monton, segui Asi alan!

Excelente video Alan

@Gentleman Programming pedazo de intro, eres una crack!

CAPOOO!!!! lo que aprendi con este video! gracias locura!!!!!

Genial, este tipo de contenido lo comparte muy poca gente, muchas gracias!

@GentlemanProgramming

Жыл бұрын

Gracias a ti José por la buena onda ! 🤍🤍

que buen video, muchas gracias por tu entrega.

Excelente, muchas cosas buenas en un unico video

Alan eres el mejor, muchas gracias aprendí mucho...

Un triple like. Gracias por tu gran aporte Alan.

Sería excelente lo mismo aplicando clean arquitecture en Angular, ver cómo sería paso a paso, o create un curso así sea de pago, sería el primero. Saludos desde Colombia.

@GentlemanProgramming

Жыл бұрын

ya lo tienes ! nos vemos el jueves a las 10pm España en Twitch , luego lo subiré a KZread

Una pequeña observación: MUI5 ya viene con una API basada en styled components entonces al quedarte utilizando la de MUI tenés la ventaja que el global styles te es accesible (su contexto) por medio de su styled() y así no tienes que hacer malabares para hacer que le llegue al de styled-components así por aparte. El problema es que sino tendrías que mantener dos global styles y sincronizarlos manualmente para ambas dependencias. Feliz de expandirme sobre este tema si a alguien le interesa.

@GentlemanProgramming

Жыл бұрын

Yea! Es que igual ojo, la idea de style componentes es la de hacer que cada estilo sea isolated, y no se tenga impacto entre elementos. Mui y sus styled componentes, como digo en el vídeo, traen la ventaja de poder acceder al theme, cosa que no necesitábamos en la app. Pero la idea principal de los styled componentes es que cada uno viva por su cuenta sin enterarse del otro

uy parcero! un capo que sos, muchas gracias! Cuándo podemos ver la segunda parte? la que añades los tests? quedo muy pendiente, me has ayudado muchísimo mi bro, te quiero amigo, te quiero mucho! :)

Este men se la pasa diciendo Tuki y tuki. Buen video, bro!

@GentlemanProgramming

Жыл бұрын

Tuki Tuki ;) jajajajjaj

sos un crack.....y suscrito a tu canal....

Uy este video me lo guardo para más rato. 👌🏻

Muchas gracias he seguido el tutorial y me salio todo bien! He realizado unas modificaciones en la parte de redux es lo siguiente : removeFavorite : (state, actions) => { const findIndex = state.findIndex((x:Person) => x.id === actions.payload.id); state.splice(findIndex,1); setLocalStorage(LocalStorageTypes.FAVORITES, state) return state } ------------------ Para remover en favorite he realizado lo siguiente : const handleRemoveFavorite = (person: Person) => { const findFavorite = selectedFavorite.find( (x:Person) => x.id === person.id); dispatch(removeFavorite(findFavorite)); setSelectedFavorite(filterPerson(person)); } Muchas gracias, espero los proximos tutoriales! .Saludos.

@GentlemanProgramming

Жыл бұрын

Está muy bien ! quise separarlo en dos states en mi caso para poder explicar y mostrarlo mejor, pero tranquilamente podrías poner una propiedad más que diga ¨favorite¨ y sea un Boolean, luego solo tienes que filtrar los que sean igual a true 🥰Lo que sí, prefiero que esta lógica que haz hecho se realice en el mismo slice reducer para separar mejor las responsabilidades y no crear dependencia 🤓

@manuonda

Жыл бұрын

@@GentlemanProgramming ok lo voy a modificar para que quede en el SliceReducer de Favorites..

Este contenido es valiosisimo. Muchas gracias por compartir tus conocimientos. Like y suscritoo

@GentlemanProgramming

Жыл бұрын

De nada Sergio un placer !!

¡Gracias por compartir, sos un crack!

@GentlemanProgramming

Жыл бұрын

Vos sos más crack por el apoyo 🫀🫀

Buenas!! hicieron la parte de testing al final? no le encuentro. Muchas gracias por cierto, muy educativo

Brother excelente tu aporte de lo mejor. muchas gracias

@GentlemanProgramming

Жыл бұрын

De nada Pedro ! 💕💕

Excelente video, contigo si se aprende! Donde encuentro la segunda parte 😁

Excelente por favor más contenido como este de crear una aplicación desde cero, armar una buena arquitectura, sistemas de diseños, buenas prácticas y relacionados sería genial ♥

Excelente 👍

😱 Gracias por esto querido Alan ❤ 👏

@GentlemanProgramming

Жыл бұрын

De nada locura ! 💞💞

Hola estimado. El stream lo pude seguir bastante bien, aunque al final "me perdí un poco" entre tantos cambios de pantalla que hacías, pero en fin, ya está. Te han dicho que tienes un parecido a Freddie Mercury??? Saludos desde Santiago de Chile y creo que me haré fan de tus contenidos.

buen vídeo! no suelo comentar pero hay que alimentar al algoritmo

@GentlemanProgramming

Жыл бұрын

Te lo agradezco de corazón ♥️

Hola! Muy bueno! Hay parte 2 ?

Gracias Papu! sos un crack!!!!!! 🏆🏆

@GentlemanProgramming

Жыл бұрын

Gracias a vos locura por el aguante !

Crack 🤟🤟

Para los que no les funciona la extensión (exactamente como en el video) para crear los componentes, sólo tienen que darle downgrade a la version 0.0.6 para que funcione exactamente igual.

@verteramo

21 күн бұрын

¿Cómo se llama la extensión? Gracias

Excelente contenido, es la primera vez que veo uno de tus vídeos y he de decir que me ha gustado mucho. Lo único que me genera duda es si esta bien utilizar el localStorage en los reducers, no se si eso se permite con Redux Toolki ya que nos permite escribir 'codigo mutante' o si esos efectos secundarios debemos usarlos en otro sitio. Agradecería tu respuesta crack!

@GentlemanProgramming

Жыл бұрын

Para todo lo que es tema de token si, ya que expira y no aporta a quien lo robe, pero cualquier otra cosa que sea contenido sensible es totalmente prohibido en el local storage. Pero puedes usarlo tranquilamente y sin ningún problema :)

👏👏👏👏 cool sr. gentleman

@GentlemanProgramming

Жыл бұрын

Thanks Dariooo ! 💘💘

Muy bueno 😌👏

@GentlemanProgramming

Жыл бұрын

De nada Alejandrooooo ! 💝💝

Perdona, como se llama la extensión que usas para crear los barrels?

bajo dios y subio este video.

muy bueno, felicitaciones por el contendio, donde se puede ver la parte 2?, estaria bueno ver como conectar ese data grid a una API y por otro lado ver como usar ese Modal de forma que se pueda abrir mostrando otros valores, no solo la tabla de favoritos, si despues tengo otra cosa que mostrar que se pueda abrir algo distinto

@GentlemanProgramming

8 ай бұрын

No hay segunda parte ! para conectar a un data grid y demás tienes mis otros vídeos viendo como hacer peticiones y demás

Genial!, contenido de Angular piensas seguir realizando?

@jppachar

Жыл бұрын

Siiii por favor!! 🙏🏻

@GentlemanProgramming

Жыл бұрын

YEs ! nos vemos el jueves a las 10pm España en Twitch para hacer una app desde 0 en Angular ;)

Mas Videos Aprendiendo React!!!!

Recien encuentro tu canal y vi que tenias un flex 1 en el body y tambien place-items:center , quizás hubiera sido bueno que borres todo el estilo por defecto asi no te rompia después. Muy bueno el tutorial, voy a seguir viendo tu canal , saludos !

@GentlemanProgramming

Жыл бұрын

Yes, normalmente uso un normalizer, en este caso ya que lo que quería mostrar era más la lógica de la app no le di mucha importancia. Buen ojo !

Hola, como se llama la extencion de creacion de componentes que usas en vs code?

Muy bueno! Una consulta el componente de grilla admite la carga paginada desde el servidor o el paginado/filtrado es solo en memoria? Estuve leyendo y no lo encontré explicado en la documentación 🤔

@GentlemanProgramming

Жыл бұрын

Yes sir ! Tienes que usar el componente paginator de forma separada. Con el paginas la búsqueda en back y el resultado es lo que muestras en la tabla

muy buen video crack! igual creo que te la complicaste un poco al crear otro reducer para los favoritos, lo más óptimo habría sido agregar un campo nuevo a cada persona que sea favorite: false y cambiarlo a true dentro del reducer, pero lo demás genial cómo se organizan las cosas y esperando con ansias la parte 2!!

@GentlemanProgramming

Жыл бұрын

Justo ! es lo que había pensado en hacer pero quería usarlo de manera para volver a explicar los conceptos con otro ejemplo 🤓 gracias por prestar tanta atención !!!

@matiasromera330

Жыл бұрын

@@GentlemanProgramming un placer hermano, es un disfrute tus videos!

Muy buena aplicación, gracias.

@GentlemanProgramming

Жыл бұрын

De nada Claudio ! 💟💟

Gentleman me das tu opinion por favor, de hacer exactamente lo opuesto en el caso que el proyecto escale a una ecommerce de usar context para favoritos, login, carrito de compras, etc y redux para el panel administrativo en el caso de productos, clientes, categorías, etc... ? porque al usar solo redux tendría problemas con por ej. products visibles al publico y products de la parte administrativa, entre otras cosas.

@GentlemanProgramming

Жыл бұрын

Puedes hacer todo desde Redux tambien es todo según tu contexto, a mi me gusta presentar como lo hago yo pero siempre hay alternativas y necesidades distintas. ÚNICA cosa que si te recomiendo si vas por el camino del context, es que si este es bastante complicado en cuanto a la información que guarda, si o si, usa un useReducer porque sino puedes tener problemas de async

Hola Gentleman, cual es la extensión que usas de 'create barrel'??

@GentlemanProgramming

Жыл бұрын

Auto Barrel mister :D

Muy buen video crack! Me gustaria saber como haces el debug del minuto 1:52:56, Intente hacerlo, pero no me aparece el Home, ni ningun componente de mi App, Saludos!

estás mezclando el estado del componente (useState) con Redux, pudiendo hacer todo en redux y no trabajar con amba data en los dos lados (evitando el confundir la lógica) buen video por cierto, hay algunas cosas que no sabía, saludos!

@GentlemanProgramming

Жыл бұрын

Puede ser que lo haga para probar algo nada más para debuggear, creo que luego lo utilizo de forma directa y si no es así tienes toda la razón !

I have a question regarding the "localstorage". The doubt lies in the difference between "localstorage" and "Cache", because in your SWR videos, where we fetched information from the "Rick and Morty" API, it was said that we could (and we did) store this in the "Cache ". But in this video I noticed that the place where both are stored is the same. What is the difference between "localstorage" and "Cache" ?

@GentlemanProgramming

Жыл бұрын

Great question ! LocalStorage is a place to store information, while the cache is the stored information itself or the act of storing it for later use (persist it) You may cache information inside the localStorage, sessionStorage, indexedDb, etc

@cristianomartins96

Жыл бұрын

@@GentlemanProgramming Hummm... ok ok. Thanks !

es posible terminar un ejercicio como este en 20 minutos?, pregunto porque ya me han puesto ejercicios como estos en una prueba técnica, me pidieron hacerlo en 20 minutos en vivo y sin utilizar referencias, honestamente me pareció imposible, ya me pasó en 3 pruebas técnicas

las buenas prácticas siempre hacen un código legible y bonito a la vista. psdt: como va la creación de la app en react de subir imágenes a una base de datos en firebase(o puede ser en supabase o como quieras) y que se muestre en un carrusel, por favor. tengo una pregunta, como puedo hacer una api en un archivo json, por ejemplo para una app de rutas de buses, registrar las rutas y usarlas en una app con react?

@GentlemanProgramming

Жыл бұрын

La verdad que medio complicada jajaja la gente me está pidiendo cosas antes pero igualmente debería ser igual que en el vídeo, solicitas la data y la pasas al carousel nada más ni nada menos, lo haces cuando carga el component :)

@GentlemanProgramming

Жыл бұрын

Para subirlas fíjate este docu: firebase.google.com/docs/storage/web/upload-files

Gentleman , tienes pensado mas adelante crear proyectos como estos? asi siguiendo pautas y demás ?

@GentlemanProgramming

Жыл бұрын

Yes ! Se vienen cositas 😇

@Deus-lo-Vuilt

Жыл бұрын

@@GentlemanProgramming Genial estaré al pendiente para poder aprender de estas pruebas

hay algun video que explique a fondo sobre la data grid table?

@GentlemanProgramming

Жыл бұрын

Lo crearemos !

Disculpa Alan e estado toda la mañana intentado subir este proyecto a aws amplify, me esta dando error al compilar en aws pero en local todo va perfecto con pnpm dev. Mi pregunta es aws no permite deploy usando pnmp y vite que fue con lo que se realizo el proyecto, que me puedes aconsejar al respecto?

@GentlemanProgramming

Жыл бұрын

Buenas genio ! no pasa nada ! puedes borrar el .lock que genera ppm y utilizar yarn o npm si gustas, puede ser que venga por ahi el problema

@camilorestrepo6868

Жыл бұрын

@@GentlemanProgramming vale lo voy a intentar mil gracias por tu respuesta y tus excelentes aportes!

usa el navegador de brave, desde que lo uso 0 anuncios en youtube y en casi todas las paginas, además su interfaz y todo es la misma de google chrome pero va mucho mas rápido 10/10.

@GentlemanProgramming

Жыл бұрын

No sabía lo de KZread ! Lo usaba anteriormente pero necesitaba que no siempre me sea tan privado, volveremos a darle una mirada

Es excelente lo facil que es aplicar una solucion con redux. Me gustaria saber en que casos conviene utilizar context API y cuando redux.

@GentlemanProgramming

Жыл бұрын

You got it ! Cúando y cómo usar Redux, Context o Rxjs? Con esto tu app no tendrá problemas de comunicación kzread.info/dash/bejne/h4ehj9eihty6pbQ.html

@facundoleonel487

Жыл бұрын

@@GentlemanProgramming Increible man gracias!

En la parte de los models, por qué el archivo se llama people.ts y exporta Person, no debería llamarse el archivo person.ts?

@GentlemanProgramming

Жыл бұрын

Depende, en ese caso es people porque representa a más de una persona en la app, y dentro podríamos tener todo lo relacionado con la misma, desde el person, hasta una collection de person que ya sería el people, etc. Trato de generalizar estos archivos normalmente

¿Qué significa TUKI, TUKITI y derivados?

@GentlemanProgramming

Жыл бұрын

Modismos Argentinos jajaj es como decir “y listo”

@matiasromera330

Жыл бұрын

jajaja

Buenas, tengo una pregunta a la hora de abril el modal, si en ese componente tengo varios modales, como se haria para abrir cada uno por separado, gracias !

@GentlemanProgramming

Жыл бұрын

Hola ! La idea por ley es que haya siempre un modal a la vez abierto, no te recomiendo abrir más de uno. Para abrir un contenido diferente por cada botón, solo usa el mismo modal y cambia el componente child de adentro. Eso es lo que hago yo en el vídeo :)

@jhonnyagudelo2467

Жыл бұрын

@@GentlemanProgramming asi lo tengo, si me podrias explicar, te lo agradeceria mucho componente donde se hacen las consultas const handleOpenHistory = (id) => { isOpenModal$.setSubject(true); setIdWallet(id); }; const handleOpenBalance = (id) => { isOpenModal$.setSubject(true); setIdBalance(id); }; componente principal {idBalance ? : }

Y la segunda parte de este ejercicio?

@GentlemanProgramming

Жыл бұрын

Es solo una parte ! todo lo requerido por el ejercicio ya esta realizado, lo que digo al final son cositas que se podrían hacer luego. Tengo vídeos sobre testing en la playlist de Testing !

1:16:10 checkbox 1:32:35 redux

si ya tienes emotion instalado por que instalas styled components?

@GentlemanProgramming

Жыл бұрын

No idea, por ahí estaba probando cosas, ya la verdad que están muy similares los dos a nivel de que están bajo la misma api: emotion.sh/docs/styled Buena lectura : storybook.js.org/blog/541-components-from-styled-components-to-emotion/

@lunaticfriki

Жыл бұрын

@@GentlemanProgramming yo siempre uso emotion, pero me ha sorprendido porque ya lo tenías instalado y no te hacia falta styled. De hecho mui te permite elegir una u otra librería

Excelente!, me gustaría puedas hacer algo con react query si es posible

Qué opinas de react query?

@GentlemanProgramming

Жыл бұрын

Esta muy bien ! cualquiera tanto SWR como React Query están perfect :)

@0GERA0

Жыл бұрын

@@GentlemanProgramming excelente, muchas gracias por tu respuesta, espero en un futuro hagas una app similar con React Query :D

sou novo aqui

@GentlemanProgramming

Жыл бұрын

Welcome !!!

Cuanto dinero se cobra por una app como esa?

Manos alguien sabe que extesion es la que utiliza para crear los componetes

@soledadpetrino

Жыл бұрын

MaterialUI (mui)

@GentlemanProgramming

Жыл бұрын

Estoy usando una de un chico de la comunidad ! marketplace.visualstudio.com/items?itemName=JavierGutierrez.create-component-React

Que locura, todo enrrollo se haría con dos lineas de puro html y sin necesidad de eso !!!

@matiasromera330

Жыл бұрын

jaja éxitos tratando de escalar eso

@GentlemanProgramming

Жыл бұрын

ajajajjaja

future

@GentlemanProgramming

Жыл бұрын

proof ? :D

Hola amigos! Tengo un problema, inatale la extención de react create component pero no me pregunta si quiero typescript o javascript, me pone por defecto javascript, y cuando voy a sus opciones pongo por defecto typescript, pero de igual manera me los crea con extención jsx. Si alguien me ayuda seria buenisimoo.

@andresfajardo7383

Жыл бұрын

Hola ando en la misma situación, pudiste solucionar?

@Farwar-en3pp

Жыл бұрын

@@andresfajardo7383 no rey, no pude. Seguro lo habran actualizado y no funciona. Trate con otras versiones pero nada.

@andresfajardo7383

Жыл бұрын

@@Farwar-en3pp Le escribí al autor de la extensión, esperar que me conteste y te cuento.

@andresfajardo7383

Жыл бұрын

@@Farwar-en3pp Tenés razón tiene que ver con la versión de la extensión, la versión 0.0.6 funciona igual que en el video, sólo tenés que ir a la extensión instalada y darle a la ruedita, ahí te sale un menú, le dás a "Install Another Version" elejís la 0.0.6 y listo.

@Farwar-en3pp

Жыл бұрын

@@andresfajardo7383 sos genio hermano, muchas gracias!!

aa

Lol angular

¡Freddy no murió!! Enseña programación

@GentlemanProgramming

Жыл бұрын

Aviso 1 de 2 antes del ban...No relaciones con Freddy Mercury o Camilo

@facundolavagnino5085

Жыл бұрын

@@GentlemanProgramming 🤣🤣