Estructuramos en vivo un project de React usando conceptos de Clean Architecture -

Подписаться 57 тыс.

Просмотров 26 тыс.

50% 1

¡Buenas, buenas mi gente!
Volvemos con más sobre el cómo implementar los conceptos sobre Clean Architecture en tu Front End.
En el día de hoy veremos código EN VIVO, utilizando ReactJs, Vitejs, adapters, services, Redux y más para poder hacer un Login que se comunicará con la API de Rick an Morty, guardará el resultado dentro del store de Redux para luego poder modificarlo.
La verdad que muchas gracias por todo el apoyo y la repercución que ha tenido mi canal en estos útimos días, la verdad que ustedes ¡Son increibles!.
¡A por ello!
LINK AL REPOSITORIO: github.com/App...
Si quieres hacer una donación:
streamelements...
Link Context vs Redux: • Qué es Redux ? Qué es ...
Link Clean architecture: • Cómo estructurar tu pr...
▬ Links de interés ▬▬▬▬▬▬▬▬▬▬
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
#youtube #programacion #javascript #angular #react #html #css #formacion #cleanarchitecture

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 118

@vt1tov 2 года назад

Cafecito y clean architecture para arrancar el dia. Gracias por estos videos, sos de las pocas personas que veo conceptualizar de maneras practicas y que todo el mundo pueda entender. Saludos!

@GentlemanProgramming 2 года назад

Gracias Vladislav !! Y tu comentario genial para comenzar el día :D

@netopmtz 2 года назад

Muchas gracias por tus vídeos. 🖤 Este el único canal que conozco que habla de arquitecturas y patrones de diseño muy bien! Todos nos enfocamos únicamente en hacer código, pero cuando se trata de temas como éste, nos vemos pequeños.

@LocalGhost_8080 2 года назад

checa CodelyTV también

@GentlemanProgramming 2 года назад

Muuuuuchas gracias Neto !!y lo voy a seguir haciendo :)

@emanuellopez945 Год назад

Tu contenido es espectacular!!! Muchas gracias y muchos exitos!!!

@andycaseres2 Год назад

Estoy aprendiendo un monton con estos videos Ya entiendo mucho mas como usar Redux Toolkit y aprendiendo clear arquitecture en el front Mil gracias

@dev-xb1xm 8 месяцев назад

Tus videos son oro puro Allan, muchas gracias.

@LeiferMendez 2 года назад

A darle!!

@GentlemanProgramming 2 года назад

y con de todo !!

@MaironCuello Год назад

Genial. Gracias por compartir tu experiencia. he incorporado un par de cositas.

@nivus97 2 года назад

Excelente video amigo, sigue así, ojala muestres un ejemplo del patron repositorio! :)

@GentlemanProgramming 2 года назад

Vamos a ver ! Lo tengo conocido más para back pero por ahí podríamos meterlo

@LocalGhost_8080 2 года назад

Esto sí que me interesa

@GentlemanProgramming 2 года назад

Y a mi me interesa que te interese !!

@orlandogarcia4403 Год назад

Ya somos 17k :)

@GentlemanProgramming Год назад

Vamoooo

@vinzegonzalesgamboa1908 2 года назад

Excelente video!

@GentlemanProgramming 2 года назад

Thank you very much Vinze !

@brandeb 2 года назад

buenisimo el video gracias

@GentlemanProgramming 2 года назад

de nada debrand !!

@yoanestradablanco1608 2 года назад

mano yo se node crees que con react completare bien mi satck para optar por un empleo de fullsatack

@GentlemanProgramming 2 года назад

hmm en mi caso soy mas del que recomienda que te especialices en un solo ámbito ya que es TANTA la información y conocimientos que es muy dificl ser "full stack". Pero en otro caso, NodeJs es lo más parecido que puedes aprender ya que también es javascript :)

@fernandopoveda9861 2 года назад

Un poco confuso ver tantas carpetas en el SRC, cero que se podría agrupar un poco más; de lo contrario no es claro como separar Domain, Application, Infrastructure ... Separar en una carpeta: - Domain (Models, Components con reglas de negocio, o funciones con validaciones puras del negocio) . - Application (Pages, Routes, Components, Services, Hooks); - Infrastructure (Components - Componentes que nada que ver con el negocio ni la aplicación pero son necesarios).

@GentlemanProgramming 2 года назад

En mi caso es porque es solo un concepto, no me gustaría regir toda la estructura por el patrón utilizado. Me gustaría que todo se guía por la utilización correcta del patrón. También hay cosas que no están tan específicas, ya que es un patrón para projectos enteros (front + back, etc) y aquí estamos tratando de adaptarlo pero solo para front

@VRedondoQ Год назад

Creo coincido con el compañero, no es tan clara la separación, creo que uno de los objetivos mas importantes de Clean Arquitecture es poder separar la logica de negocios de los detalles de implementacion, de ahi la importancia de la separación, pero ejemplo del video esta perfecto para iniciar en los conceptos de Clean Arquitecture

@cejasclaudioa 2 года назад

Un espectaculo!!! Notita: descargate el plugin de material icon theme xD

@GentlemanProgramming 2 года назад

Me gusta mas Seti Icons :D es mas...serio ajjaja

@snk263 2 года назад

tremendo!1

@GentlemanProgramming 2 года назад

Gracias SNK !!

@jorgetejeda99 Год назад

noooooooo nooooo mano, no me digas eso de esa extension (barrels) lool, yo perdiendo tiempo haciendolo 1by1

@armandochindoy2729 2 года назад

Excelente video, like por profundizar en lo de los adapters y por lo de la extención de barrel, me gustaria saber en que casos de la clean arquitecture aplican usarlos y en que otros no, y creo que sería genial un video de buenas practicas de Redux.

@GentlemanProgramming 2 года назад

Mi regla para los barriles es: un archivo index.ts o js por carpeta siempre que esta contenga un archivo con export.

@matiasromera330 2 года назад

hola genio! me encuentro estudiando Clean Arquitecture y llegué a éste video. Cuando voy al repo y lo comparo con tu punto de partida ninguno de los commits corresponde a ese punto de partida del video, tampoco tenés otras branches. Voy a bajarme la version actual del proyecto e ir borrando los archivos que vayas creando, pero te recomiendo para otros proyectos (no he visto tus últimos videos de práctica asique quizás sobre ésto) pero podrías crear 2 branches: la de tu punto de partida en el proyecto ó 2 commits, de forma que podamos ir a la par tuya y si no se ve bien el video en algún momento podamos consultar el código final. Como siempre gracias por tu valiosísimo contenido crack!

@GentlemanProgramming 2 года назад

Yes ! Es que en verdad la clean architecture es un concepto, el punto de partida es un project clean sin nada, nada. Lo que si quiero hacer es crear un boilerplate con todo listo para que puedan empezar cualquier project

@matiasromera330 2 года назад

@@GentlemanProgramming eso sería fantástico, estoy aprendiendo bocha hermano!

@jaderguerra8436 2 года назад

Mu hubiera gustado ver estás técnicas en angular 😭. Saludos desde Colombia Excelente video 😁

@GentlemanProgramming 2 года назад

Nunca digas nunca ;)

@nicolasf.9139 2 года назад

Hola Alan, consulta minima, al hacer llamadas asyncronas, no usas createAsyncThunk de redux toolkit y haces la llamada dentro del componente. Por que lo haces de esa manera? algún motivo?

@GentlemanProgramming 2 года назад

Más que nada por dos cosas: 1- en mis projectos utilizo SWR 2- no me gusta confiar tanto en una librería ya que justamente hay que tratar de abstraerse lo más posible por si el día de mañana hay que hacer una migración o la misma no resulta una buena elección

@Edmundo_Rivero Год назад

seguro te lo preguntaron mil veces pero, tu bigote es real? saludos me encanta tu contenido

@GentlemanProgramming Год назад

Totalmente true, the original, al igual que los ojos que también me lo preguntan

@emanuelmaggio2297 2 года назад

Amigo muy buen video, una pregunta randóm que genero musical te gusta escuchar? Tenes banda favorita?

@GentlemanProgramming 2 года назад

uff de todo ! soy fan de Gorillaz, Daft Punk pero también de Snoop Dog, Eminem, pasando por clásicos de Bob Marley, Bobby Darin, David Bowie y bandas de Metal como Metallica, Iron Maiden, Ozzy...etc. En resumen de todo !! menos trap, reggaeton y esas cosas :p

@estsban11 Год назад

Muchisimas gracias!!!

@jperformerretrofuture961 11 месяцев назад

☀Brillante! Lejos del típico tutorial de "Aprende React desde 0", aquí muestras una guía con opinión experta, con unas buenas prácticas exquisitas, robustas y con rodaje. No he tenido más remedio que suscribirme inmediatamente!

@GentlemanProgramming 11 месяцев назад

Gracias !!! Que lindas palabras crack !!! 🫣😍😍🥰🥰

@juanpablogazzarri6874 Месяц назад

graciassss

@emanuelgomez6704 2 года назад

Consulta (vi tus videos y están excelentes) y mi quedó una duda si tienes una ecommerce usarías el apicontext para el login, carrito, panel del usuario, etc y redux solo para el panel del administrador de dicha ecommerce o solo redux para comoletamente todo y de ser así como haces con el estado de la entidad productos tanto para el panel administrativo y para la parte digamos pública de la web. Desde ya muchas gracias

@GentlemanProgramming 2 года назад

Justo te respondí en el otro video, pero para sumar un poco mas, Redux va agregando elementos al estado a medida que se usan, sino ni existen. Tranquilamente podrías tener un estado de productos a nivel admin y otro de productos a nivel cliente como también un solo estado pero que por medio de una prioridad lo muestres en un lugar u otro

@d-landjs 2 месяца назад

Excelente maestro, seria genial que hagas uno desde 0, grande eres!

@santiagoducos2572 2 года назад

Una consulta, en tus proyectos actuales implementan createAsyncThunk o prefieren seguir usando los thunks normales, en el caso que usen createAsyncThunk como lo implementan con callEndpooint (o como lo implemenrarias jajaja)? Saludos de Uruguay

@GentlemanProgramming 2 года назад

Buenas ! En mi caso uso SWR (fíjate mi vídeo sobre eso) por lo que no sabría decirte, PERO déjame que lo pongo en la lista de cosas a enseñar :)

@OSCARCORTEZVILLCA 8 месяцев назад

Me suscribi a tu pagina. Gracias por tu aporte 🤗

@PlayRapture-ky7dp Месяц назад

Soy Estudiante, apenas estoy empezando en React y la verdad me encanta la forma en que implementas todo, algo así estaba buscando, muchas gracias buen hombre, Saludos desde Colombia

@GentlemanProgramming Месяц назад

¡Qué bueno saber que te está gustando la forma en que implemento todo! Me alegra mucho que te sirva mientras estás empezando con React. Es un camino súper interesante y lleno de oportunidades, así que metele con ganas y no aflojes. Cualquier cosa que necesites, acá estoy para darte una mano. ¡Un abrazo grande hasta Colombia y seguí dándole con todo!

@motoCoderTraveler 2 года назад

Consulta... siguiendo con las pracitcas de tipado que haces con todos los datos, en el adapter no deberia retornar un objeto de tipo User ? Porque el retorno de esa funcion te queda huerfana en cuanto a tipado....y deberia tener el lineamiento como haces con los demas objetos de User, sino podria haber inconsistencias si hay modificaciones futuras...Que opinas? Tambien, la otra cosnulta que tengo es que en ese adapter es el lugar indicado para defauldear algunos values no te parece?

@GentlemanProgramming 2 года назад

Yes totalmente, es este caso no lo puse para apurar un poco pero si, deberia de retornar el modelo User (nunca tener un any en la app, ese es mi lema jajaj). En cuanto a eso... depende, porque la idea es la de adaptar el código que recibo, no darle un valor por defecto, para ello es que inicializo por ejemplo en el state los valores para que tenga todo mas contexto. Por ejemplo: todo lo relacionado en el state, se encuentra en ese lugar, el adapter al poder ser usado en más de un lugar, es lo más genérico posible y se encuentra en un nivel diferente.

@facundogutierrez8240 2 года назад

Hola Alan, soy principiante, vi tu video de react 18 y este en el que usas redux toolkit, estoy haciendo un logueo y no utilizaba el modo estricto, pero al usarlo no tengo cambios de estado en el selector, probe esto mismo con un contador basico utilizando tambien redux toolkit y definitivamente no se actualiza el estado si utilizo el modo estricto.

@GentlemanProgramming 2 года назад

Bien, es que el modo estricto trata de simular múltiples ciclos de vida de los componentes al mismo tiempo ! Yo lo que hago es activar el modo estricto y tratar de probar mi lógica antes de crear mis pull request para que este no haga problemáticas a mi código. Actívalo para probar que todo funcione. Luego si encuentro una mejor manera lo comentaré por el canal ;)

@montotox 2 года назад

Muchas gracias por esta data, son geniales los videos! Ayudan muchísimo a estructurar bien un desarrollo desde cero. Yo justo me encuentro en esta etapa y estoy aprendiendo un montón. Saludos y nuevamente felicitaciones por el canal, es un gran aporte a la comunidad.

@GentlemanProgramming 2 года назад

De nada Ricardo! Yo te agradezco tus palabras ya que hache justifican las horas de esfuerzo

@Weagle1337 2 года назад

Genial video!, me viene perfecto para reestructurar una app para mis residencias de la uni c:. Por cierto, como le haces para obtener intellisense de los alias de los import con vite? O estas usando webpack?

@GentlemanProgramming 2 года назад

Hola ! estoy usando vitejs :) solo pon esto en tu tsconfig.json: "paths": { "@/*": ["./src/*"] },

@Weagle1337 2 года назад

@@GentlemanProgramming :000 muchísimas gracias, todo un gentleman 7u7r

@GentlemanProgramming 2 года назад

@@Weagle1337 Con todo gusto !

@rayanbalbuena8165 2 года назад

Estos videos que son mas de código que teoría son lo mejor! Saludos desde República Dominicana. 👋

@GentlemanProgramming 2 года назад

Vamos a volver a hacer miti miti :)

@carlosmariohenaogonzalez9480 2 года назад

Bro, recomiendas algún libro para aprender clean architecture en React o en el front ?

@GentlemanProgramming 2 года назад

hmm en mi caso todo lo que enseño es un rejunte de experiencias y conocimientos , en verdad no existe un concepto de "Clean architecture solo en el front", es un concepto muy complejo que se utiliza en projectos a nivel general. En mi caso trato de concentrar los conceptos de la arquitectura e implementarlo en el front, ya que de todo un provecho podemos sacar :)

@bernardoalfaro173 2 года назад

Me encanto tu video amigo, gracias por el contenido lo adaptare para usarlo en Vue3

@GentlemanProgramming 2 года назад

Esooo, exactamente !! se puede usar en cualquier framework esto es solo un ejemplo :D

@germanmartinezsolis9543 2 года назад

Gracias Crack :)

@GentlemanProgramming 2 года назад

Gracias a ti por ver el video ! :D

@diegopagini9283 2 года назад

Muchas gracias por los videos, genial todo esto. En los ratos libres estoy aprendiendo React!

@GentlemanProgramming 2 года назад

Esoooo, a ver cuando venís para estos lados!

@lucasgonzalez2231 Год назад

Buenardo

@dev-xb1xm 8 месяцев назад

¡Gracias!

@GentlemanProgramming 8 месяцев назад

Muchísimas gracias hermosura mía !!! 😍😍😍

@noone-gz4pc Год назад

Te amo mucho gracias

@ricardoplaza2618 2 года назад

muchas gracias por tus videos y lo claro de las explicaciones !! te mereces el cielo. Saludos desde chile.

@GentlemanProgramming 2 года назад

muchas gracias a ti por el aguante Ricardooooo

@JuanPabloGazzarri 22 дня назад

muy buenoo!

@thekillercraft1000 2 года назад

Hola, disculpa.. por que al createUseAdapter al parametro que recibe le pones tipo any ? no deberias poner el tipo de interfaz ? es buena practica dejarlo asi ?

@GentlemanProgramming 2 года назад

Siempre ponerle tipo, le puse any para la explicación :)

@thekillercraft1000 2 года назад

@@GentlemanProgramming jsjs, es que como le puse User ahora me da error nse puede asignar un argumento de tipo "AxiosResponse" al parámetro de tipo "ApiAuthUser". Al tipo "AxiosResponse" tambien porque no esta auth.name.data.

@GentlemanProgramming 2 года назад

@@thekillercraft1000 te tiene que quedar asi: import { User } from "@/models"; import { AxiosResponse } from "axios"; export const createUserAdapter = (user: AxiosResponse) => ({ name: user.data.name, gender: user.data.gender, status: user.data.status }); ya comprobado :)

@GentlemanProgramming 2 года назад

Lo que entra es una respuesta de Axios que en su interior contiene datos de User :D

@jesusdavidmunozfarfan1571 2 года назад

Excelente curso, muchísimas gracias!!!

@GentlemanProgramming 2 года назад

De nada mister ! A por todo !

@edissonnarvaez7042 8 месяцев назад

Hola, estaba viendo los videos pero no me quedo tan claro el uso de los interceptors 🥺

@GentlemanProgramming 8 месяцев назад

Fíjate este video ! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UaZgjzWRn8U.htmlsi=XJWLkdkr3pAWTtYP Pertenece a esta playlist para clean architecture actualizada: ru-vid.com/group/PL42UNLc8e48TF9l07z_tLGHzmC_d-yfJJ&si=bQgD09zMS72DEvyI

@Deus-lo-Vuilt Год назад

Gracias , ya estoy en la segunda parte , me gustó un monton la organizacion y entendí mejor como estructurar mi proyecto, gracias

@carlosmori6927 2 года назад

Tremendo brother, muchas gracias por esparcir tanto conocimiento. Sos un capo

@GentlemanProgramming 2 года назад

De nada Carlos ! siempre con todo el amor del mundo ! 😍

@orlandogarcia4403 2 года назад

Super bien explicado, me encanto, me hubiera gustado que agregaras una capa de negocio por ejemplo un middleware o algo que solo maneje la capa de negocio (hook, function o un singlaton/class) y el componente solo se enfoque en manejar el UI y los eventos del DOM. Saludos super buen contenido.

@GentlemanProgramming 2 года назад

Es una muy bueno opción ! El problema viene que al separar tanto el código también perdemos visibilidad inmediata de la funcionalidad y con esto carácter semántico en el entendimiento del mismo. Lo que trato siempre de hacer es separar las responsabilidades lo más posible aplicando atomic design, haciendo que el código no supere las 100 líneas o 150 líneas. Por eso digo que en mi caso es una adaptación personal sobre los conceptos de Clean Architecture, me gusta mucho aplicar mi experiencia y tomar mis propias decisiones en cuanto a aprendizajes pasados.

@orlandogarcia4403 2 года назад

@@GentlemanProgramming mejor explicado imposible, totalmente de acuerdo, todo depende del proyecto o como se meneje el equipo, pero me gusto mucho la explicación 💪🏻✌🏻

@GentlemanProgramming 2 года назад

@@orlandogarcia4403 eeexactamente ! Concuerdo totalmente :D

@juanignacio383 2 года назад

Estaría bueno ver como manejas los errores de la llamada de la peticion y como los mostras, más allá de eso excelente

@GentlemanProgramming 2 года назад

Te me adelantas para otro vídeo que tengo preparado !! :D

@juanignacio383 2 года назад

@@GentlemanProgramming jajaja lo voy a estar esperando, además estaría bueno ver como conectas redux a clean architecture, más que nada la parte de las peticiones el fetch

@christianalejandroherrejon6819 2 года назад

Esto es lo que buscaba, espero como esto ya poder pasar una entrevista con un cliente

@GentlemanProgramming 2 года назад

Vamos que se puede, como te fue en la interview ??

@christianalejandroherrejon6819 2 года назад

@@GentlemanProgramming aun no he tenido entrevistas recientemente, pero ya tengo listo esos conceptos.

@ricardomarin8019 2 года назад

Hola, en el caso del enrutamiento con react como lo manejas de lado de clean architecture?

@GentlemanProgramming 2 года назад

Hola ! Trato de que cada page se cargue por medio de lazy loading usando lazy y suspense, se esa manera cada componente principal se carga de forma independiente y agilizamos el peso de la app. Trata de que cada ruta que contenga componentes los cargue de esta manera :)

@ricardomarin8019 2 года назад

@@GentlemanProgramming Muchas gracias, de verdad que he aprendido muchísimo viendo tus videos, excelente contenido!