Creamos una app en React ! buenas prácticas, clean architecture, redux, context y Typescript !
HTML-код
- Опубликовано: 6 сен 2024
- ¡Buenas, buenas mi gente!
Creamos una app en React ! 🤪🤪
Hacemos una prueba técnica para position SENIOR con #Redux, #Context, #Axios, #CleanArchitecture, #Typescript, #buenasprácticas y más
A por ello !
🔴Si quieres hacer una donación🔴
streamelements...
REPOSITORIO: github.com/Gen...
🔴▬ Links de interés ▬🔴
Link a RUclips: / gentlemanprogramming
Link a Twitch: t.co/vodIqiCH9N
Link a Spotify: spoti.fi/3y281cY
Link a la comunidad: / discord
Link a la comunidad de Facebook: shorturl.at/jkmL6
Link a instagram: / gentlemanprogramming
Link a twitter: / g_programming
Link al libro Cómo ser front-end sin fallar en el intento: Tus primeros pasos en la programación web: amzn.to/2ReBuzL
#comunidad #discord #programming #podcast #live #stream #clase #Angular #ReactJs #interview #lifecyle #componentes #framework #library
06:22 Explicación de la Prueba Técnica
13:03 Diseño de la app
18:20 Crear app (Visual Studio Code)
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 ...
Héroe sin capa
Gentleman puedes hacer más videos así, por fa?? Son buenísimos y se aprende mucho
Coincido
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.
Que comentario tan real, nada sale perfecto a la primera, todos nos atascamos, todos la cagamos, la victoria esta en levantarse, aprender y superarse
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.
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
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!!
Muchísimas gracias estaba buscando algo que me enseñará buenas prácticas y aplicar redux en un caso real de verdad me sirve mucho
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 🎊🎊
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 !
Genial, este tipo de contenido lo comparte muy poca gente, muchas gracias!
Gracias a ti José por la buena onda ! 🤍🤍
que buenos videos Gentleman , gracias por compartir tus conocimientoss
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!
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 gentle gracias por los aportes que haces a la comunidad
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 ♥
@Gentleman Programming pedazo de intro, eres una crack!
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.
ya lo tienes ! nos vemos el jueves a las 10pm España en Twitch , luego lo subiré a RUclips
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!
Tuki Tuki ;) jajajajjaj
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.
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.
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
Alta introducción, papaaá!
CAPOOO!!!! lo que aprendi con este video! gracias locura!!!!!
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
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
Alan eres el mejor, muchas gracias aprendí mucho...
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 !
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 !
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!
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 :)
Quiero, necesito, me encantaria aprender a debuggear así, q genial, enseñanos 💯🤟
Excelente video Alan
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.
¿Cómo se llama la extensión? Gracias
Este contenido es valiosisimo. Muchas gracias por compartir tus conocimientos. Like y suscritoo
De nada Sergio un placer !!
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!!
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 !!!
@@GentlemanProgramming un placer hermano, es un disfrute tus videos!
Uy este video me lo guardo para más rato. 👌🏻
sos un crack.....y suscrito a tu canal....
Genial!, contenido de Angular piensas seguir realizando?
Siiii por favor!! 🙏🏻
YEs ! nos vemos el jueves a las 10pm España en Twitch para hacer una app desde 0 en Angular ;)
Excelente, muchas cosas buenas en un unico video
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.
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 🤓
@@GentlemanProgramming ok lo voy a modificar para que quede en el SliceReducer de Favorites..
Un triple like. Gracias por tu gran aporte Alan.
Buenisimo a nivel SUPERLATIVO! Gracias crack
¿Qué significa TUKI, TUKITI y derivados?
Modismos Argentinos jajaj es como decir “y listo”
jajaja
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.
No sabía lo de RUclips ! Lo usaba anteriormente pero necesitaba que no siempre me sea tan privado, volveremos a darle una mirada
bajo dios y subio este video.
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!
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 !
Excelente video, contigo si se aprende! Donde encuentro la segunda parte 😁
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" ?
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
@@GentlemanProgramming Hummm... ok ok. Thanks !
que buen video, muchas gracias por tu entrega.
Brother excelente tu aporte de lo mejor. muchas gracias
De nada Pedro ! 💕💕
Buenas!! hicieron la parte de testing al final? no le encuentro. Muchas gracias por cierto, muy educativo
Es excelente lo facil que es aplicar una solucion con redux. Me gustaria saber en que casos conviene utilizar context API y cuando redux.
You got it ! Cúando y cómo usar Redux, Context o Rxjs? Con esto tu app no tendrá problemas de comunicación
ruclips.net/video/USm-uiVyTuQ/видео.html
@@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?
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
Mas videos así
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
Perdona, como se llama la extensión que usas para crear los barrels?
😱 Gracias por esto querido Alan ❤ 👏
De nada locura ! 💞💞
¡Gracias por compartir, sos un crack!
Vos sos más crack por el apoyo 🫀🫀
buen vídeo! no suelo comentar pero hay que alimentar al algoritmo
Te lo agradezco de corazón ♥️
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.
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
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 🤔
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
Mas Videos Aprendiendo React!!!!
Y la segunda parte de este ejercicio?
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 !
Gracias Papu! sos un crack!!!!!! 🏆🏆
Gracias a vos locura por el aguante !
Hola! Muy bueno! Hay parte 2 ?
hay algun video que explique a fondo sobre la data grid table?
Lo crearemos !
👏👏👏👏 cool sr. gentleman
Thanks Dariooo ! 💘💘
Gentleman , tienes pensado mas adelante crear proyectos como estos? asi siguiendo pautas y demás ?
Yes ! Se vienen cositas 😇
@@GentlemanProgramming Genial estaré al pendiente para poder aprender de estas pruebas
Amigo gentleman te hago una preguntita poco relacionada, pero con que extension haces que se marque asi la indentacion?
Creo que es una config propia del vs code, pero si te soy sincero ya van un par de años que uso NViM y no me acuerdo nada de vscode ajaja
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!
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?
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
@@GentlemanProgramming vale lo voy a intentar mil gracias por tu respuesta y tus excelentes aportes!
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?
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 :)
Para subirlas fíjate este docu: firebase.google.com/docs/storage/web/upload-files
Muy buena aplicación, gracias.
De nada Claudio ! 💟💟
Excelente 👍
Hola, como se llama la extencion de creacion de componentes que usas en vs code?
Hola Gentleman, cual es la extensión que usas de 'create barrel'??
Auto Barrel mister :D
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 !
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 :)
@@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 ? : }
1:16:10 checkbox
1:32:35 redux
si ya tienes emotion instalado por que instalas styled components?
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/
@@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
Muy bueno 😌👏
De nada Alejandrooooo ! 💝💝
Que locura, todo enrrollo se haría con dos lineas de puro html y sin necesidad de eso !!!
jaja éxitos tratando de escalar eso
ajajajjaja
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.
Hola ando en la misma situación, pudiste solucionar?
@@andresfajardo7383 no rey, no pude. Seguro lo habran actualizado y no funciona. Trate con otras versiones pero nada.
@@Farwar-en3pp Le escribí al autor de la extensión, esperar que me conteste y te cuento.
@@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.
@@andresfajardo7383 sos genio hermano, muchas gracias!!
Manos alguien sabe que extesion es la que utiliza para crear los componetes
MaterialUI (mui)
Estoy usando una de un chico de la comunidad !
marketplace.visualstudio.com/items?itemName=JavierGutierrez.create-component-React
Crack 🤟🤟
Qué opinas de react query?
Esta muy bien ! cualquiera tanto SWR como React Query están perfect :)
@@GentlemanProgramming excelente, muchas gracias por tu respuesta, espero en un futuro hagas una app similar con React Query :D
Cuanto dinero se cobra por una app como esa?
sou novo aqui
Welcome !!!
Excelente!, me gustaría puedas hacer algo con react query si es posible
future
proof ? :D
¡Freddy no murió!! Enseña programación
Aviso 1 de 2 antes del ban...No relaciones con Freddy Mercury o Camilo
@@GentlemanProgramming 🤣🤣
aa
Lol angular