Тёмный

Cómo estructurar tu project de ReactJs? Aplicamos Clean Architecture en Front End -  

Gentleman Programming
Подписаться 43 тыс.
Просмотров 79 тыс.
50% 1

Buenas, buenas mi gente !
En el día de hoy veremos cómo estructurar tu projecto de ReactJs!
Se hablará sobre Front End Clean Architecture y cómo tenerlo en cuenta para estructurar tu project. Voy a mostrarles cómo YO adapto la Clean Architecture en mis projects.
▬ Contenido del video ▬▬▬▬▬▬▬▬▬▬
0:00:00​​ - Welcome !
0:00:53 - Clean Architecture
0:02:01​​ - Front End Clean Architecture
0:04:14 - Estructura de carpetas
0:05:57 - Carpetas dentro de la Clean Architecture
0:07:19​ - Carpetas Reutilizables - Modularización
0:10:35​​ - Carpeta adapters
0:12:43​​ - Carpeta assets
0:13:15​​ - Carpeta components
0:14:09​​ - Carpeta contexts
0:15:23​​ - Carpeta hooks
0:17:04​ - Carpeta interceptors
0:18:04​ - Carpeta models
0:19:27 - Carpeta pages
0:19:47 - Carpeta redux
0:20:38 - Carpeta services
0:21:01 - Carpeta styled-components
0:22:08 - Carpeta utilities
0:23:42 - Despedida
¡A por ello !
Si quieres hacer una donación:
streamelements.com/gentlemanp...
LINK AL REPOSITORIO: github.com/AppleLAN/Customhoo...
Link Context vs Redux: • Qué es Redux ? Qué es ...
Link Clean architecture: • Qué es Clean Architect...
▬ 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

Наука

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

 

3 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 316   
@LeiferMendez
@LeiferMendez 2 года назад
A darle!! pronto empezare a ver tus videos para pulirme en ReactJs
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Venga Leifer !!!
@matiastorres5993
@matiastorres5993 Год назад
que hermoso video!!! desde que empecé a programar tuve esta duda existencial! te agradezco mucho!
@achoo195
@achoo195 2 месяца назад
gracias por tus videos, esta información vale millones!!
@matiastorres9268
@matiastorres9268 Год назад
impresionante, realmente me encantó!
@estelasanchez8889
@estelasanchez8889 Год назад
Gracias por compartir tus conocimientos!! 100% Ncesario para comprender cuando estás haciendo un proyecto de React!!
@estebancastano2299
@estebancastano2299 Год назад
Excelente video, gran explicación muchas gracias Alan Saludos desde Colombia
@emilio_code
@emilio_code Год назад
Muy interesante, llevo dias aprendiendo React y de organizar carpetas me ha sido muy util, eres genio. Muchas gracias!
@diegojesushernandezgonzale4970
@diegojesushernandezgonzale4970 2 года назад
Exelente video y con ejemplos, es oro puro Alan ❤️.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas muchas gracias Diegoooo
@Deus-lo-Vuilt
@Deus-lo-Vuilt Год назад
Excelente video , ya voy avanzando en la lista de videos , el materia es buenisimo y se agradece que lo expliques tan bien , me gusta el enfoque que tiene y demas, un saludo !
@losmuppets100
@losmuppets100 Год назад
muy bueno y práctico
@Sebastian-fj1wn
@Sebastian-fj1wn Год назад
De los mejores cursos acerca de react que puedes encontrar, gracias por todo.
@raulbatres7059
@raulbatres7059 2 года назад
Esto es oro. Muchas gracias
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias a ti Raul por el mensaje !!
@juanfernandovilladiegomade9423
@juanfernandovilladiegomade9423 2 года назад
Grande Gentle!!! muchas gracias por tu contenido 😁
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias a ti Juan por ver el vídeo !!
@javiermartinez4477
@javiermartinez4477 2 года назад
esto es oro, Gracias por el video
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Thank you Javier !
@andresariascapurro
@andresariascapurro Год назад
gracias por compartir tu conocimiento!!
@arceniovilcacaceres7236
@arceniovilcacaceres7236 6 месяцев назад
Buen video, gracias por la información.
@andresromero25
@andresromero25 2 года назад
Excelente, justo lo que necesitaba
@GentlemanProgramming
@GentlemanProgramming 2 года назад
A por ello Andres!!
@Carmen_23
@Carmen_23 2 года назад
Me guardo este video como oro. Saludos desde Barcelona.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Eaaa yo también vivo ahí ! Welcome to the community Carmen :D
@joelrondinelpacheco7358
@joelrondinelpacheco7358 Год назад
Espectacular
@ZzZz-dr7uq
@ZzZz-dr7uq 2 года назад
excelente buenísimo, lo estaba buscando hace tiempo.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Que bueno que lo encontraste ! :D
@marianojimenez990
@marianojimenez990 Год назад
Muy buena explicación!
@andrescortes7378
@andrescortes7378 2 года назад
Por fin encuentro un vídeo de este tema de estructura de proyectos en React, muchas gracias, te ganaste un suscriptor. 💯👏
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias Zenéize ! Welcome a la comunidad :)
@camilozaque4266
@camilozaque4266 2 года назад
Gracias crack, justo lo que necesitaba.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
De nada Camilo !!!
@mlinescode
@mlinescode 2 года назад
Un gran video! Y muy buena explicación.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias Miguel !! Genial que te haya gustado
@luisedwards3534
@luisedwards3534 Год назад
Suscrito! Excelente video 👌
@rubenreyes8220
@rubenreyes8220 2 года назад
Muchas gracias por tu contenido, bastante claro, nuevo suscriptor!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias y Bienvenido a la comunidad Ruben !!!
@ragnarok_tz
@ragnarok_tz 2 года назад
No sabes lo que me ha ayudado este video. GRACIAS!.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Vamoooooo con de tuti Aubis !
@Luisito_Silva
@Luisito_Silva 2 года назад
Excelente video amigo, muchas gracias.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
De nada Luis !!!!
@xbz24
@xbz24 11 месяцев назад
El gaspi del codigo, videazo Crac ❤
@cejebuto
@cejebuto 2 года назад
Primera vez que te veo... excelente para comenzar.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muuuuchas gracias cejebuto !!
@nero1375
@nero1375 Год назад
Muy bien video! Yo soy un brasilenio y no tengo mucho gusto en el conocer espanhol pero tu vídeo me ayudó demas! Voy a aplicar este conocimiento en vue. Gracias!
@brandonbarreras2598
@brandonbarreras2598 2 года назад
Super clean explicación, resumir mucho tiempo de conocimiento en un video, muy bien contenido, sigue así!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias Brandon ! Lo seguiré haciendo :D
@carlajiguan2704
@carlajiguan2704 2 года назад
Una joya este video! Tienes una subscriptora más !!! 👏🏼
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias Carla ! Welcome to the community
@blackjack4482
@blackjack4482 2 года назад
Resuscrito !! Buenisimo tema para trabajar profesionalmente, esperando mas contenido asi y claro, de frontend
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Bienvenido nuevamente !! Si que se va a venir :D
@lditzel
@lditzel 2 года назад
El unico video en todo fucking RU-vid y lo vengo buscando hace siglos, 10/10
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muuuuchas gracias por las palabras Luciano !! Espero que te haya podido satisfacer esa búsqueda infinita que tenías :D
@marsdev6592
@marsdev6592 4 месяца назад
Tremendo crack. Muchísimas gracias. Actualmente, cumplí un año como Desarrollador Web y creé todo el front-end de una aplicación con React, pero fue mi primera app en producción. Aplicaré Clean Architecture para mejorar el código y aumentar la escalabilidad. Muchísimas gracias. :D
@gregorlopez7060
@gregorlopez7060 2 года назад
Estuvo brutal Alan!! 🤘🏾
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias Gregor !!! Y lo que se viene !!!
@leandro1.618
@leandro1.618 2 года назад
Que calidad este video, recién conozco tu canal. Me suscribo. 🇦🇷
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Welcome Leandroooo ojalá te guste todo el contenido :)
@marceloalejandro1476
@marceloalejandro1476 2 года назад
Muy buen contenido! 💪🏼
@GentlemanProgramming
@GentlemanProgramming Год назад
Gracias Marcelo queridooo
@sanchezcarlos1986
@sanchezcarlos1986 2 года назад
RU-vidando info sobre Clean Architecture y paf! Me encuentro con este canal y este videazo! Muchas gracias por este tremendo contenido, nuevo suscriptor por acá! 👏🏼👏🏼
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Bienvenido y muchas gracias !!!!!!
@miyazjee
@miyazjee 2 года назад
Muy buen vídeo! Muy poca gente habla de esto a este nivel.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Yes ! o lo hacen más dificil de lo que deberia :D
@efrainalvarez4585
@efrainalvarez4585 2 года назад
Gran video !! ❤️
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muuuuchas gracias Efrain !!!
@davidcalderon2159
@davidcalderon2159 2 года назад
Excelente video!!!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Thank you David !!!
@TutosAndroidCarloslobo
@TutosAndroidCarloslobo 2 года назад
Excelente vídeo y contenido, gracias
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias TutosCarlos por pasarte !!
@nicolascaillet-bois7045
@nicolascaillet-bois7045 2 года назад
Buenas Gentelman! Muy bueno el video rey! Muy buenas practicas!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias Nicolás !!
@ctorresdev
@ctorresdev 2 года назад
Esto suma en la entrevista hablada como no tienes idea, una joya de video. Like y nuevo sub
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias y welcome Carlos !!!
@antonionavarrro
@antonionavarrro 2 года назад
Que buen video 🤩👍🏻
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muuuchas gracias Guillermo :D
@nicowindows4589
@nicowindows4589 2 года назад
Gracias!!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
A tí Nico !
@cristiangutierrez2335
@cristiangutierrez2335 2 года назад
grande crack! me gusto mucho la forma en la que vez el orden que debiese llevar el front en cuanto a clean arch 🙂
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muuuchas gracias Cristian :D
@cristiancamilocalderontapi8923
Llegue al canal en Twingo y salí en Ferrari con tus clases
@agustinperez8700
@agustinperez8700 2 года назад
Muy buen video pa. Saludos
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Muchas gracias Agustín !!
@Pedroallesss
@Pedroallesss 2 года назад
Muito bom! Parabéns e obrigado pelo conteúdo!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
You are welcome Pedro !
@JoelBW904
@JoelBW904 2 года назад
Justo la explicación que necesitaba, ando buscando más info sobre cómo aplicar arquitecturas limpias
@GentlemanProgramming
@GentlemanProgramming 2 года назад
esoooo, genial asokaDev !
@luka4695
@luka4695 11 дней назад
Buen video locoo
@josearevalomoya3052
@josearevalomoya3052 Год назад
Chabón soy react dev desde hace dos años y este video te quedó re potente, sos un crack, muchas gracias por compartir tu conocimiento!
@GentlemanProgramming
@GentlemanProgramming Год назад
Gracias miles José!!!! Gracias a ti por pasarte y comentar
@coipo123
@coipo123 Год назад
Una máquina! además de clean code, podrías hablar del rendimiento en react? mejores practicas sobre el tema, tu manera de manejarlo, etc?
@selienyorbandi
@selienyorbandi 2 года назад
Messirve, muchas gracias
@GentlemanProgramming
@GentlemanProgramming 2 года назад
de nada Selien !
@getseneko7004
@getseneko7004 2 года назад
Segunda vez que miro el día y ya voy entendiendo mejor las cosas, a pesar de que lo explicabas con peras y manzanas XD. Gracias por el buen contenido.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Siempre Getse !! Y que bueno que lo tengas de referencia 🥰🥰
@josetuz
@josetuz 2 года назад
Le estoy entrando a tu canal como cascarudo al foco!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Jaaaaaa, espero que lo estés disfrutando :P
@juandrago5433
@juandrago5433 2 года назад
Tremendo, cuando ya sabes programar esta bueno que haya videos para buenas practicas
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Yes !! Muy pocos he visto con este tipo de contenido y no podía faltar mi aporte a la comunidad :)
@naruclon
@naruclon 2 года назад
Buen video. No habia visto nunca en uso la carpeta de "adapters"
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Yes ! Estamos aplicando los conceptos de clean arquitecture para armar algo lindo para nosotros :) No muchos lo hacen de esta manera !
@thaeronmorales8408
@thaeronmorales8408 2 года назад
MUUUUUCHAS GRACIAAAAAAAAAAAAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
A ti por pasarte y dejar un mensajeeeeee
@holmanpz8265
@holmanpz8265 2 года назад
Un gran video, muchas gracias por compartirlo
@GentlemanProgramming
@GentlemanProgramming 2 года назад
De nada HOLMANPZ !!! Con todooo
@programmingj613
@programmingj613 2 года назад
Sos un genio, no solo que compartis contenido de calidad si no que transmitis de una forma divertida y se te entiende al 100%. Hay algun libro donde se vean explicado a detalle estos conceptos en react?
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias miles por el comment y la buena vibra ! la verdad que lo que expliqué es más un rejunte de mis experiencias y conocimientos que fui aprendiendo en el transcurso de los años, la verdad no sabría decirte, si alguien lee este comment y sabe de alguno que lo pongaaaaa
@igugadev
@igugadev 2 года назад
¡Genial vídeo, gracias! En lo personal, también prefiero agrupar por feature, sobre todo en proyectos grandes en donde haya proyección para ser micro frontends o monorepo. Adicionalmente, por feature tengo básicamente las siguientes carpetas: - repositories - servicies - models - libs - state (si la feature necesita redux) - presentation: donde van los containers/pages, componentes y hooks. Me gusta agrupar todo lo relacionado a UI en la capa de presentación y dejar lo relacionado a lógica de negocio en carpetas sueltas.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Perfect! Realmente no hay una forma correcta de hacer las cosas, sólo una recordada que siempre adáptanos a nuestras necesidades :)
@eliasepg
@eliasepg 2 года назад
Buenísimo, es lo que mas anduve buscando. Generalmente los tutoriales son muy básicos y está bien para aprender la herramienta, pero no se explican las arquitecturas, qué significan, qué conviene y no conviene, y eso es lo que piden en la mayoría de los puestos de trabajo. Me gustó mucho tu vídeo, y me gustaría ver tus próximos vídeos, me suscribo!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Vengaaa, gracias por el subscribe espero que te gusten también los vídeos viejos !
@eliasepg
@eliasepg 2 года назад
@@GentlemanProgramming sisi ya vi unos y me gustaron también, voy a seguir viendo los otros
@cerm88
@cerm88 9 месяцев назад
Faltó la carpeta `routes`, sería bueno un video de arquitectura con react-router-dom. Gracias por el vídeo
@GentlemanProgramming
@GentlemanProgramming 9 месяцев назад
Tengo un vídeo de routing ! Igualmente estoy por hacer uno nuevo. No uso una carpeta routes generalmente ya que hago que esto surja naturalmente
@cuaticito
@cuaticito 2 года назад
Tremendo video te mandaste man, con una información muy valiosa, especialmente para los que comenzamos. Busqué bastante info sobre el orden, patrones de diseño, etc etc, y nunca quedaba satisfecho, pero lo positivo, es que no estaba tan mal como venía trabajando, pero con esto seguro pego un salto de calidad. Muchisimas gracias por el aporte.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
A ti por tan increíble mensaje !!!!
@cuaticito
@cuaticito 2 года назад
​@@GentlemanProgramming Hola profe, quería saber si no le molestaba que le nombre en un Readme.md que estoy escribiendo para una nueva práctica que estoy haciendo en React, dónde voy a tratar de utilizar esta arquitectura que nos compartió, y quería destacar que es con este video que la conocí. Y cuándo tenga un tiempito si puede darme su parecer con respecto a lo siguiente "Si tenemos un componente el cuál tiene varios estados, varias funciones, y su respectivo jsx, pero definido en un archivo .js, es conveniente para que sea más limpio crear un name.jsx con el jsx mismo, los states y las funciones pero que el cuerpo de dichas funciones sólo llamen a otras funciones que se encuentran en un name.js (el mismo nombre que el jsx) con toda la lógica para manejar el estado y que estas funciones reciban como argumento ciertas variables y estados (state y setStates), asi lograr componentes un poco más limpios? O hacer todo en un .js derecho, o bien, usar una carpeta helper o algo similar (que es lo que hacía pero no se si sea buena práctica) ... espero haberme hecho entender. Agradecería mucho si podría orientarme."; Muchas gracias, y que tenga una muy buenas tardes.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
@@cuaticito primero que sería un honor ! Y la idea es la siguiente, digamos que tienes un componente que abre un diálogo, este diálogo tiene una lista de elementos a mostrar al usuario y un botón confirmar que cierra la interacción. Entonces tenemos: -carpeta utilities / helpers que contiene funciones reutilizables por toda la app -carpeta components -componente lista -componente diálogo (que puede mostrar otros componentes dentro y guarda el comportamiento de abrir y cerrar el modal) -carpeta pages -page contenedor que utiliza al componente dialog --componente button --componente dialog propia de esta page que utiliza al componente list y que va dentro del component reutilizable dialog. Espero haberte ayudado !!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
@@cuaticito ahh y me olvidaba, .jsx para archivos que tienen html en su interior, .js para los otros. Y no trates de nombrar con el mismo nombre, que cada funcionalidad represente fácilmente por medio de un nombre fácil su funcionamiento
@cuaticito
@cuaticito 2 года назад
@@GentlemanProgramming El honor es todo mio .. Muchisimas gracias por tomarse el tiempo para darme el consejo profe, algún día, cuándo tenga, estaré aportando para que este canal siga creciendo como merece. Saludos.
@johanaescudero6244
@johanaescudero6244 Год назад
Tendrías que dar cursos de programación por Udemy, explicas muy bien
@andresbustamante972
@andresbustamante972 10 месяцев назад
Confirmo. Cursos avanzados serian de mucho valor.
@carlosarielmergen
@carlosarielmergen 2 года назад
El Radagast de react. Es igual el color de voz. Más allá de chiste, excelente y muy clara explicación !!!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Jajajajajaajajaj te lo tomo ! :D
@ivgadev
@ivgadev 2 года назад
Gracias por el contenido. Se agradecen nuevos puntos de vista y en muchas cosas estoy de acuerdo. Pero falta por desacoplar frameworks en la logica para considerarlo clean architecture. Sin embargo me suscribo, muchas gracias!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Yes ! Es que no es clean architecture de un proyecto completo sino el como implementar sus conceptos principales desde el lado del front para poder orientarlo a DDD y hacer separación de funcionalidades por capas :) welcome a la comunidad !!
@joseaburt
@joseaburt Год назад
Me mola mucho el tema, desde que di con un libro sobre Evans me dediqué un tiempo a implementar DDD y por supuesto a predicarlo. Trataba de meterlo donde pudiera, incluso si tenía que ponerle lubricante para que pudiera entrar en el proyecto estaba dispuesto. Luego de un tiempo, de luchar con las complejidades que adquirimos al implementar DDD me di cuenta que estaba metiendo complejidad innecesaria en los proyectos (KISS), lo que luego de un tiempo me quede con solos conceptos y patrones que incluso hoy en dia me son útiles, pero tratar de meter un DDD en un proyecto mediano y más en un pequeno es de inicio la adquisición de una deuda técnica e incluso la entrada de muchos antipatrones. Incluso trate de incluir eso en react cuando me tocaba hacer frontend, pero en realidad estructurar las carpetas como: "domain", "infra" y "application" no convierte una proyecto en DDD, e incluso DDD es una mala idea para frontend, prefiero más apostar por mono repo. Por supuesto he tenido la oportunidad de colaborar en grandes proyectos donde hasta el cuerpo ya te pide un patrón así de forma natural. En resumen KISS buddy!
@fabiogomez4906
@fabiogomez4906 11 месяцев назад
Que sería monorepo?
@lucasceratto317
@lucasceratto317 16 дней назад
como me gustaria laburar en un proyecto tuyo, estoy podrido de participar en proyectos gigantes sin estructura, gracias a tus videos estoy aprendiendo mucho de arquitectura y espero con el tiempo poder aportar estos conocimientos en los proyectos de la empresa en la que estoy
@okgugadev
@okgugadev 11 месяцев назад
IMO redux no debería ir en la capa de dominio porque el dominio debe estar lo más desacoplado de terceros lo más que se pueda. Redux, React-Query, entre otros en realidad son adaptadores o parte de la capa de framework. La idea de la capa de dominio (entidades, repositorios y casos de uso) es que pueda mantenerse inmutable si es que más adelante se decide cambiar de stack.
@mateosantiagozapatamaldona226
@mateosantiagozapatamaldona226 2 месяца назад
Estoy muy de acuerdo contigo.
@falvarador
@falvarador 2 года назад
Muy interesante el vídeo, siempre he sido un desarrollador backend y estos últimos meses he estado estudiando y documentándome mas de lleno sobre el frontend, me gusta mucho React JS, me recuerda mucho a Blazor de .NET, también el tema de los web components con librerías como Atomico JS, son geniales, en general tu contenido me ha servido mucho, pero siento que hay un pequeño detalle en este vídeo que no me termina de ajustar y es el tema de la independencia de los frameworks, ese es un pilar importante dentro de las arquitecturas limpias, al igual que la regla de dependencia, en el caso de esta propuesta se rompe, al agregar Redux y Context dentro de Modelos/State (que representan el dominio) y eso hace que el Dominio quede amarrado al framework :/ Saludos y gracias por tus vídeos
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Hola Freddy ! Estoy con vos en lo que dices :) Como decía justo a otro comentario que me notificaba lo mismo, es que no es clean architecture de un proyecto completo o en su total expresión sino el cómo implementar sus conceptos principales desde el lado del front para poder orientarlo a DDD y hacer separación de funcionalidades por capas. La idea principal era de tomar los conceptos de clean architecture, sumarles mi experiencia y con esto obtener una buena estructura para un project de Front :)
@zackysh_
@zackysh_ 2 года назад
​@@GentlemanProgramming Me imagino que sería posible abstraer un poco más y hacer las carpetas de "redux" y "styled-components", por ejemplo. El miedo al cambio siempre estará ahí en caso de acoplar la arquitectura de la app a una librería en concreto, por lo que en proyectos a largo plazo este podría ser un tema a debatir sin duda alguna.
@gabrielpanebianco6542
@gabrielpanebianco6542 2 года назад
me gusto mucho lo del adapters, es una capita más en la ui que te ayuda a como vos decis a no hacer el cambio en toda la app .. en el proyecto donde estoy no lo estamos utlizando
@GentlemanProgramming
@GentlemanProgramming 2 года назад
No te preocupes ! No muchos lo hacen, pero yo una vez que lo aprendí no pude dejar de ver su importancia. Unos cuantos devs me han dicho que luego de este vídeo ven adapters everywhere hahha
@gabrielpanebianco6542
@gabrielpanebianco6542 2 года назад
@@GentlemanProgramming te ganaste un suscriptor :D
@videloco84
@videloco84 2 года назад
Super lo de las capas, podrías compartirnos un repo para ver su implementación porfa
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Prometo en un futuro vídeo !
@rodrigosolari8103
@rodrigosolari8103 Год назад
Se agradece el material y esta muy bueno, pero deberias pensar en desacoplar el core/dominio de la app, de redux/context y moverlos hacia una capa exterior. En su lugar se podrian usar clases e interfaces, ya que ahi aplicarias mejor el concepto de que el dominio no dependa de librerias o frameworks. El grueso del trabajo ya lo hiciste pero podes seguir puliendo la estructura para brindarnos y brindarte mejores practicas (mas alla de que en la practica se puedan modificar), lo cual se agradeceria muchisimo. Exitos!
@GentlemanProgramming
@GentlemanProgramming Год назад
Gracias por el feedback !
@cejaramillof
@cejaramillof Год назад
¿Te refieres a usar el redux atraves de abstracciones para no acoplar la app a esta tecnología? O ¿cómo lo desacolparias? Gracias
@rodrigosolari8103
@rodrigosolari8103 Год назад
@@cejaramillof muy recientemente empecé con la idea de usar clean architecture con react (más precisamente next.js y typescript). Por lo que entiendo podrías generar interfaces y clases para representar el dominio de la aplicación, que en general coincidiría con el estado. Esa capa central desarrollada sólo en js o ts, sería importada como dependencia en la capa externa, por lo cual para el dominio ya es totalmente desconocido si en el proyecto se usa con react, vue, angular o js vanilla. Lo ideal sería que tanto los componentes de react como las llamadas al exterior (apis, blockchains) queden en la capa más externa, pero bueno como te digo todavía es una idea que no pude poner en práctica, me falta madurada más aun.
@cejaramillof
@cejaramillof Год назад
@@rodrigosolari8103 no me queda muy claro, de casualidad tienes algún ejemplo en github o algo así? Gracias
@rodrigosolari8103
@rodrigosolari8103 Год назад
@@cejaramillof no, nada por el momento
@leninvalen123
@leninvalen123 2 года назад
Buena Gentleman
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Gracias Lenin !!!
@joseluispereira281
@joseluispereira281 2 года назад
Excelente contenido y muy buena forma de explicar la clean architecture, además de react y angular, es totalmente aplicable a Vue que es algo que hacemos en el trabajo. Lo que te quería consultar es acerca de la utilización de funciones factory para crear objetos, no vi algún directorio para eso en el ejemplo. Lo haces por medio de los adaptadores también? Saludos y muchas gracias por lo que haces para la comunidad
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Buena pregunta ! En mi caso lo hago dentro de models ya que se encargan de crear objetos nuevos siguiendo una estructura que los representa (por ejemplo la class que está creada para los observables en el vídeo, es una factory de un solo tipo de objeto por el momento). Muchas gracias por tu mensaje !!
@isnopitag
@isnopitag 2 года назад
Incluso en services pudiera separarse un poco mas la instancia de Axios en otro archivo y ahi tener las base url, no pasarla, si no tener esa estructura para tener varios archivos de varias instancias de Axios para conexiones de otras API y que cada una pudiera tener alguna cosa extra en los headers (Por decir algo), algo asi yo lo separaba en usando Vue + Vuex y es la estructura que recomendaba Evan You
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Yes ! Es una buena forma de hacerlo. En mi caso generalmente tengo las base url en los archivos env, ya que cambian según el environment que utilicemos y luego podemos tener bien como tu dices ficheros que manejen las diferentes rutas. Todo depende de que tanto necesites :)
@andreidanciu4313
@andreidanciu4313 2 года назад
más videos de react please
@GentlemanProgramming
@GentlemanProgramming 2 года назад
A tus órdenes !
@JuanAndres07
@JuanAndres07 2 года назад
Hola Amigo, videazo!! Me encantan tus lentes jajaj podrias decirme que modelo de lente es?
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Hola Juan ! Son unos Rayban new aviator optics de lectura, por suerte los pude conseguir de descuento !!
@jaqp911
@jaqp911 2 года назад
Muy muy buen video, tengo una cónsulas si uso nextJs como hago con las tarjetas pages, es mas con componentes que se usarían solo en una page en particular , saludos
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Es la misma lógica ! Si es algo que solo afecta a una sola vista, irá dentro de la misma, en caso contrario irá en una carpeta en el root :)
@diegocraftxx_gd9214
@diegocraftxx_gd9214 3 месяца назад
Amigo Gentleman amo tus videos, pequeña pregunta, cual es el tema que usas en el VS? Un saludazo, segui haciendo contenido
@GentlemanProgramming
@GentlemanProgramming 3 месяца назад
Creo que Catppuccin mocha aunque ahora uso Kanagawa Dragón 🐉
@sidokudesu
@sidokudesu 2 года назад
¡Buenísimo el video! Messirve. Una pregunta que me quedo, yo en los proyectos a las interfaces de un componente lo dejo en el mismo archivo, si necesito la misma interfaz en otro componente lo pongo en ts/types.ts Ahora no sé si sería ahí o en la carpeta models/
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Hola ! yo siempre recomiendo ponerlo en otro archivo, en este caso en la carpeta models para tener todo en el mismo lugar y respetar la capa "domain" :)
@polcaltieri
@polcaltieri 2 года назад
Una consulta, supongo que los adapters los usas dentro de los services, ya que a los componentes le interesaría trabajar sobre el modelo del frontend no con el del backend. Pregunto xq en tu ejemplo del service retorna lo que devuelve el backend directamente. Por lo demás, muy buen video!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Depende ! Puede ser que un componente requiera de un formato diferente de la misma información por lo que usar el adapter en el componente mismo también es buena idea. Por ejemplo en mi caso me ha pasado que la misma información de usuario se adapta de diferente manera acorde al componente que la utilice :)
@sarasalas537
@sarasalas537 2 года назад
:)
@GentlemanProgramming
@GentlemanProgramming 2 года назад
😃
@yagorodi
@yagorodi 2 года назад
Que buen video, voy a probar creando unos pequeños proyectos y aplicando esta estructura de carpetas! Gracias genio! PD: tenemos repo de esto? :O
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Si y no jaja en mi nuevo vídeo sobre custom hooks tienes un project basado en esta arq :)
@paulsotelo4010
@paulsotelo4010 Месяц назад
:( y yo años sin saber que esto era así carajo
@SebastianVidal-kd1ti
@SebastianVidal-kd1ti Месяц назад
Buenas! Excelente Video. Una consulta eso si. Las funciones mas genericas que se utilicen en toda la app (algo como por ejemplo, validar un string) irian en la carpeta de utilities cierto ? Saludos !
@GentlemanProgramming
@GentlemanProgramming Месяц назад
Eeeeso mismo :)
@paolorossi3259
@paolorossi3259 2 года назад
Video asombroso!!! Me quedo una duda, donde llamarías a los interceptors como PublicPrivateInterceptor del ejemplo? Muchas gracias!
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Estos se llaman en el app module, o si eres más ordenado dentro del core module que luego se importa en el primero nombrado. :D
@braco0000
@braco0000 2 года назад
Y bueno, al parecer no veré más contenido de Angular... La razón por la cual me suscribí :( ... Igual el dueño del canal es tremendo profe
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Va a seguir habiendo contenido de Angular como también de otros frameworks, es que al trabajar a veces 12 horas al día no me da tiempo a crear todo el contenido que me gustaría y voy por partes satisfaciendo a todos los que pueda :(
@braco0000
@braco0000 2 года назад
@@GentlemanProgramming No hay problema profe. Se hace lo que se puede... Y aparte contaste hace algunos videos que estabas trabajando con React en tu trabajo y la gente lo pide, así que valga para que yo también aprenda React - Sigo recomendando tu canal a todo el que puedo.
@jsalazarv
@jsalazarv Год назад
¿Esto se puede aplicar de la misma forma con Next? Sería bueno ver un video sobre esto con Next ya qué han sacado de la documentación el create-react-app y ahora recomiendan el uso de otras herramientas como Next o Gatsby
@GentlemanProgramming
@GentlemanProgramming Год назад
Ya lo tienes en mi playlist de next ! Esta todo explicado cómo estructurar el project usando las mejores prácticas :)
@agushaven
@agushaven 2 года назад
Genioo!! Muy buen video, pregunta...dentro de la estructura de carpetas no entran los helpers? estoy mirando un curso y usan esa carpeta, saludos.
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Yo creo que dentro del front es lo que yo llamo utils :)
@juanignacio383
@juanignacio383 2 года назад
muy bueno, estaría bueno acceso a un repo en git
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Hola ! ya lo tienes en el nuevo vídeo de Clean Architecture junto con un repositorio :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XEcZaKK38fg.html
@juanignacio383
@juanignacio383 2 года назад
@@GentlemanProgramming Excelenteee!!!
@Deus-lo-Vuilt
@Deus-lo-Vuilt Год назад
Alan , aparte de los 2 videos de Clean , tienes alguno otro que tambien pueda servirme de ejemplo para mi organizacion de carpetas y creacion de componentes y demas bien organizado?
@GentlemanProgramming
@GentlemanProgramming Год назад
Yes ! Fíjate la playlist de React ! Tienes de todo ahí :)
@Deus-lo-Vuilt
@Deus-lo-Vuilt Год назад
@@GentlemanProgramming Yes , me la estoy viendo en orden voy un poco más de la mitad, solo queria saber si habia algo asi especifico a eso de las carpetas , pero seguiré el orden de los videos , gracias Alan
@camiloorellana6219
@camiloorellana6219 2 года назад
Excelente video, tailwind lo recomiendas para react ?
@GentlemanProgramming
@GentlemanProgramming 2 года назад
Hola ! Esta muy bueno ! En mi caso me gusta styled componentes porque trabajamos con un design system implementado :)
@irving7653
@irving7653 Год назад
¿Los interceptors son como middlewares en react?
@jesusm3910
@jesusm3910 2 года назад
Primer que nada sos un genio todo muy clarooo Después, 2 preguntas: 1: puedo aprender react con hooks sin ver la manera tradicional sin hooks? 2: de que parte de la argentina sos ?? Jajaja
@GentlemanProgramming
@GentlemanProgramming 2 года назад
1- si que puedes ! Pero conocer la forma original puede abrirte bastante la mente a cómo funciona React. 2- soy de la ciudad de Mar del Plata en Buenos Aires !!
Далее
КАКОЙ У ТЕБЯ ЛЮБИМЫЙ МАРМЕЛАД?
00:40
Applying clean architecture to my Next.js project
20:15
Hexagonal Architecture VS Clean Architecture 🥷
16:25
Ruta para Aprender React en 2024 (React Roadmap)
17:43
When you have 32GB RAM in your PC
0:12
Просмотров 177 тыс.