Principios SOLID en React.js (Buenas prácticas) con ejemplos prácticos

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 104

  • @gncfhcnvc
    @gncfhcnvc 2 роки тому +109

    Me encanta este tipo de contenido, por que hay muchos cursos que te enseñan las bases de algo, pero no profundizan en como hacerlo de una manera correcta, muchas gracias midu. 🤩

  • @letsgobowling7
    @letsgobowling7 2 роки тому +74

    00:23 ¿Qué es SOLID?
    01:16 S: Single responsibility principle o Principio de responsabilidad única
    15:34 O: Open/closed principle o Principio de abierto/cerrado
    30:03 L: Liskov substitution principle o Principio de sustitución de Liskov
    36:04 I: Interface segregation principle o Principio de segregación de la interfaz
    45:55 D: Dependency inversion principle o Principio de inversión de dependencia

    • @valp_co
      @valp_co Рік тому +1

      Necesitamos más comentarios como este, muchas gracias.

    • @Undead34
      @Undead34 Рік тому

  • @guillermo.dapaixao
    @guillermo.dapaixao Рік тому +6

    Midu tengo años programando, y sufri una etapa de bornout de la cual aun me estoy recuperando, la realdiad es que verte programar me recordo mi tiempo de supermotivacion, sigue asi hombre, gran trabajo

  • @aglowkeys
    @aglowkeys 2 роки тому +45

    Me vino super bien este video porque siempre quise entender SOLID pero me costaba. Verlo aplicado a React me sirvió un montón, gracias

  • @javiermiranda6316
    @javiermiranda6316 2 роки тому +5

    Estaba estudiando programación de manera autodidacta pero no dedicándole tanto tiempo, ahora le dedico más tiempo gracias a tus videos, tu vocación por enseñar y a la pasión que le pones, muchas gracias midu! Saludos desde Chile.

  • @danic8897
    @danic8897 Рік тому +1

    Impresionante el contenido de este canal. De lo mejor en Español!! Felicidades y sigue así!

  • @ITALO070495
    @ITALO070495 2 роки тому +2

    He aprendido mucho de programación con tua vídeos, gracias.

  • @cristiandavidescobarcastil8667
    @cristiandavidescobarcastil8667 2 роки тому +3

    En ningun otro lugar se encuentra algo con tanto nivel ... Muchas Gracias Midu

  • @samuelpalacios9661
    @samuelpalacios9661 2 роки тому +7

    Midu, qué crack, justo en estos días estaba buscandos buenas prácticas de React :)

    • @midulive
      @midulive  2 роки тому +2

      Pues aquí tienes 5 principios! 🤗

  • @itziarzamezagarcia966
    @itziarzamezagarcia966 Рік тому

    Siempre se encuentra lo que una necesita en un video de Midu!!! GRACIAS CRACK! Súper interesante! pasito más para esta desarrolladora gracias a ti!

  • @pablotachella3912
    @pablotachella3912 2 роки тому +1

    Todo este conocimiento que compartís es invaluable 🧡🧡 quedé fascinado con este contenido, aprecio mucho lo que hacés por la comunidad

  • @santiconte3350
    @santiconte3350 2 роки тому +1

    Este video debería tener muchas mas vistas! Excelente contenido midulive

  • @juanmanuelchico
    @juanmanuelchico 2 роки тому

    El de midu es el mejor contenido de los ultimos años!

  • @ignacioeifersucht9896
    @ignacioeifersucht9896 2 роки тому

    Me alegra mucho que hagas un video sobre este toma Midu, un placer siempre ver tus videos. Saludos desde Argentina!

  • @jholbertcaro6133
    @jholbertcaro6133 2 роки тому +6

    Buena Crack, en tu ultimo directo en inst preguntaba sobre buenas practicas y ya sacas el video ❤

    • @midulive
      @midulive  2 роки тому +4

      🤙 ¿Has visto? Esto sí que es nivel, eh :P

  • @JuanPerez-nx6hm
    @JuanPerez-nx6hm 11 місяців тому

    saludos hermano, admiro tu trabajo, Dios te siga bendiciendo a ti y tu familia, GRACIAS

  • @coolokox
    @coolokox 2 роки тому +4

    Gracias por el video. A la espera del curso de nextjs 12 por acá💟

  • @GusGabriel
    @GusGabriel 2 роки тому

    Muchas gracias por compartir, excelente como siempre. Saludos desde México.

  • @gaxrod
    @gaxrod 2 роки тому

    Excelente video!. De esos que seguro vale la pena ver varias veces en distintas oportunidades para siempre tenerlo fresco. Gracias miduuu!!!

  • @elkinmejia1593
    @elkinmejia1593 2 роки тому

    Hace unos días estaba leyendo ese mismo artículo que muestras en el video, lo entendí por completo y estoy empezando a tratar de mantener el código bajo esos mismos conceptos. Me parece increíble que estando justamente en estos momentos leyendo temas relacionados a SOLID encontrar este video con el mismo artículo. Qué buen contenido!:)

    • @elkinmejia1593
      @elkinmejia1593 2 роки тому

      @@Pepelui2460 JAJAJAJAJA uso navegadores sin rastreadores, tampoco soy de aceptar cookies por eso digo que me parece increíble, sigo a midu y estaba esperando que subiera algo relacionado:)

  • @freddy9292
    @freddy9292 10 місяців тому

    esta buernardo, hasta hoy creo que aplico tan solo (S,O,I) , igual supongo que porque no realizo proyectos grandes y no me senti que me faltara algo.
    gracias por la explicación

  • @matiasaramayo2122
    @matiasaramayo2122 Рік тому

    Que maravilla este video, cada segundo vale oro

  • @JoseLuis-yl8vs
    @JoseLuis-yl8vs Рік тому

    Se hizo canon lo de dedicarse solo a contenido , esperamos el video con test y solid

  • @vladyslavkuchmenko3940
    @vladyslavkuchmenko3940 2 роки тому

    El video tuyo que mas me ha gustado hasta el momento xD

  • @jeralsbarrera2119
    @jeralsbarrera2119 2 роки тому

    justo tenia 55:55 min libres para aprender algo nuevo. gracias midu

  • @martintorres5719
    @martintorres5719 2 роки тому

    Genial contenido como siempre miguel, un abrazo grande desde argentina!!

    • @midulive
      @midulive  2 роки тому +1

      Gracias! Saludos!!!

  • @crisanger
    @crisanger 2 роки тому

    Más videos de este tipo, con ejercicios prácticos. Se interiorizan mejor los conceptos

  • @MRN4CH
    @MRN4CH 2 роки тому

    Este video vale ORO!

  • @crowvampire
    @crowvampire Рік тому

    Excelente video, gracias por tu valioso tiempo en compartir esta joya de contenido. te ganaste un suscriptor. Estaría interesante que publicaras un video sobre Clean Code de Robert C. Martin, no sé si lo hayas leido

  • @kamens793
    @kamens793 2 роки тому +3

    Hahaha justo he estado intentando aprender SOLID, que grande Midu, cuando sea grande quiero ser como tú

    • @midulive
      @midulive  2 роки тому +2

      Perfect timing!!!! :)

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 роки тому

    Gracias midu , me sirve mucho tu material de js y react , un saludo

  • @nelsondavidmontanobarajas9199
    @nelsondavidmontanobarajas9199 2 роки тому

    llevo esperando como 6 meses este vídeo, traere palomitas.

  • @juanpatron7784
    @juanpatron7784 10 місяців тому

    Muchas gracias midu, una duda el github de ese proyecto estará disponible

  • @alexbo1942
    @alexbo1942 11 місяців тому +1

    eres un crack midu. Chevere

  • @jeanbayer
    @jeanbayer 2 роки тому

    Por mas videos como este!!!

  • @NicolasCavallin
    @NicolasCavallin 2 роки тому

    Que educador de la hostia, Midu!

  • @sanchez-cristian
    @sanchez-cristian 2 роки тому

    "El día que me dedique solo al contenido le darémos cañita..." LLEGÓ EL DÍA 😈

  • @jonathanshock1113
    @jonathanshock1113 10 місяців тому

    estuve mas de 5 horas. con un problema. hasta que encontre la buena practica a la hora de pasar props . soy muy noob . gracias

  • @luka4695
    @luka4695 Рік тому

    Genio, de los mejores para aprender a programar, crack saludos de arg

  • @theyagerprogramming5010
    @theyagerprogramming5010 2 роки тому +5

    Midu, te amo

    • @midulive
      @midulive  2 роки тому +3

      🤗 Y yo a tiiiiiiii

  • @AR7editing
    @AR7editing 2 роки тому +3

    Te quiero mucho midu

    • @midulive
      @midulive  2 роки тому +2

      🤗🤗🤗🤗

  • @JuanMunoz-po5fp
    @JuanMunoz-po5fp Рік тому

    Liskov viene siendo como la continua aplicación de HOCs?

  • @marcosMartinez-wm7bd
    @marcosMartinez-wm7bd 2 роки тому +1

    No me quedo del todo claro el segundo ejemplo, basicamente reducimos la cantidad de props y creamos componentes que pasamos como children? Para de esa forma tambien reducir las condicionales dentro de un componente?

  • @GersonMontenegro
    @GersonMontenegro 2 роки тому

    SRP: 1:14
    OCP: 15:34
    LSP: 30:07
    ISP: 36:09
    DIP: 45:55

  • @ManuelDiaz-bu4eu
    @ManuelDiaz-bu4eu Рік тому

    midu primeramente gracias por comportinos todo tu conocimiento, en relacion con estos 5 principios como recomendas relalizar los componenetes para un formaulario, yo tengo dos ideas de implementacion pero no se cual es la que se deba utlizar :
    1. Tener todos los componentes en un solo archivo y exportar uno a uno, es decir el input text, el input password, el input email, de esta forma segun lo que entendi estaria implmentando el principio de abierto/cerrado.
    2. Tener un archivo separado para cada componente aqui se aplicaria algo de este principio single responsibility principle.
    que nos recomendarias ?
    de nuevo muchas gracias

  • @SuichiMinamino
    @SuichiMinamino Рік тому +1

    Excelente midu!
    solo una aclaración en lo de Liskov sustitution, el reemplazo que se DEBE poder hacer es al reves de lo que se dice en el video.
    DEBERIAS PODER reemplazar cualquier instancia del Button (Superclase) por una instancia del RedButton (subclase) y que nada se rompa :D
    al reves no tiene tanto sentido, porque en la subclase siempre puede va a haber comportamientos que la superclase no conoce.

  • @1zeldalegend
    @1zeldalegend Рік тому

    Gracias Midu, en serio :)

  • @diegounanue
    @diegounanue Рік тому

    Tengo que hacer una entrevista, donde me dan tres ejercicios en react, donde te dan 20 min y tienes que hacer un code review: encontrando bugs, y performance issues. Seria super interesante porque muchas empresas estan dando como ejercicio, no desarrollar una app, imagino por la ia, sino te dan una app y tienes que completar el código. O hacer un code review. Soy bastante malo para hacer code review. Y estaria bueno como video, para aprender y de paso encontrar bugs y performance issues.

    • @midulive
      @midulive  Рік тому +1

      Puedes hacerlo en 10 minutos con ChatGPT 🤪

    • @diegounanue
      @diegounanue Рік тому

      @@midulive si, pero estaria bueno para aprender, de alguien como vos

  • @lautaroriveiro
    @lautaroriveiro Рік тому

    Gracias midu!

  • @cesarcf1476
    @cesarcf1476 2 роки тому

    Hola, en el principio 'Dependency Inversion' uno de los fetcher no cumple con el contrato... tendria que devolver una promesa en lugar de un array -> Promise.resolve([{},{},{}])
    por lo demas contenido top!! gracias crack!

  • @andresg9108
    @andresg9108 10 місяців тому

    Eres el mejor.

  • @RodrigoMorenoIngenieria
    @RodrigoMorenoIngenieria 2 роки тому

    Midu si seleccionas a una función o typo y le das control+. Y le das que lo separe a un nuevo archivo vscode hace el resto

  • @matiasmonasterio603
    @matiasmonasterio603 2 роки тому +2

    Oro puro

    • @midulive
      @midulive  2 роки тому +2

      Muchas gracias, Matias!!! 🤗

  • @MrJuanfil
    @MrJuanfil 2 роки тому

    Open close tambein podria ser con una render function? no?

  • @cesarsanchez350
    @cesarsanchez350 2 роки тому

    Hola excelente video
    Gracias x compartir tus conocimientos, un favor ….podrías usar letra mas grande ? Se difunta la visibilidad un poco , te agradeceremos mucho

  • @ivanavilaalmanza
    @ivanavilaalmanza 2 роки тому

    Muy buen video, muchas gracias! sería posible tener la url del repo?

  • @luismasuarezzz
    @luismasuarezzz 2 роки тому

    Hola me gustaria tener tu setup de vscode, podrias dejar una lista o algo para hacerlo??? Gracias

  • @jaimebaltodano7608
    @jaimebaltodano7608 2 роки тому

    👏👏👏👏👏👏👏

  • @yovaxox
    @yovaxox 10 місяців тому

    El código de este vídeo está en algún repositorio?

  • @juanpablogazzarri6874
    @juanpablogazzarri6874 5 місяців тому

    graciasss

  • @Daniel-jb5yp
    @Daniel-jb5yp 2 роки тому

    Midu tendrá cursos de javascript, typescript y react?

    • @midulive
      @midulive  2 роки тому +1

      En midu.link/bootcamp tienes todo ese contenido y más

  • @chidoloco5557
    @chidoloco5557 2 роки тому

    Me podrías decir tu theme de visual code? gracias

  • @kanfor
    @kanfor 2 роки тому

    Si la lógica de un componente es muy muy simple (que así debe ser, Back es quien debe complicarse la vida con la lógica) no compensa crear otro archivo y meterlo en otra carpeta con una tonelada de custom hooks. Creo que el principio KISS se debe imponer a todos los demás.

  • @ivanjosephgamboasanchez1158
    @ivanjosephgamboasanchez1158 2 роки тому

    Alguien sabe que fuente de letra usa midu en el vscode?

  • @nxx.p
    @nxx.p 2 роки тому +3

    Muy muy bueno. Fan de los videos de refactoring :)

    • @midulive
      @midulive  2 роки тому +1

      Muchas gracias!!!

  • @jaimebaltodano7608
    @jaimebaltodano7608 2 роки тому

    Midu, si la programacion fuera NBA , que jugador serias: Lebon James, Stephen Curry, Kevin Durant, Luka Doncic, Giannis Antetokounmpo?

  • @imsickboy9304
    @imsickboy9304 Рік тому

    Alguien sabe qué theme tiene midu en su vs?

  • @andresfelipearboledalondon268
    @andresfelipearboledalondon268 2 роки тому

    Crack!

  • @new_artiko
    @new_artiko 2 роки тому +1

    holaaaaa alguno tendra los links que revisaron de medium!?

  • @jormanbustos7877
    @jormanbustos7877 3 місяці тому

    En liskov substitution por transitividad el padre tambien deberia poder realizar las accciones del superPadre, no?
    es decir si tenemos SwimmingAnimal y WalkingAnimal heredando de Animal.... entonces ahi que? porque SwimingAnimal puede nadar pero Animal no necesariamente entonces se romperia el principio

  • @ricko13
    @ricko13 2 роки тому

    pauso el video y vuelvo luego, lo dejo en el min 8:00

  • @adranuz
    @adranuz Рік тому

    El ultimo ejercicio me fallo en esta linea
    creo que es por algo de la primera . algien tuvo el mismo error?
    ```ts
    export const useData = ({key, fetcher}: UseFetch): Response => {
    const { data, error, isValidating } = useSWR(key, fetcher);
    return { data, error, isValidating };
    };
    ```

  • @CarlosRodriguez-pn7fe
    @CarlosRodriguez-pn7fe 2 роки тому

    S
    *no aplica para vacantes de programadores.

  • @CarlosGutierrez-pn5fb
    @CarlosGutierrez-pn5fb 2 роки тому +1

    Es obvio que dominas el tema midu, pero SOLID es complejo, yo creo que te falto prepar un poco más tu discurso. No lo tomes a mal, está bien improvisar cuando se trata lo basico y fundamental pues de muchas formas ya se entiende, pero en lo avanzado hay que detenerse un poco más y no digresar tanto. Particularmente lo noté cuando explicas la sustitucion de Liskov y en la Inversión de dependencias.

    • @midulive
      @midulive  2 роки тому +2

      Estos vídeos son sacados de directos donde programamos sobre la marcha y vamos leyendo el chat. Te agradezco el feedback aunque creo que con los ejemplos prácticos de ambos quedaron bastante claros los conceptos.

  • @yeraldev
    @yeraldev 2 роки тому +1

    al final el principio siempre es el mismo: DEPENDE 🤣🤣

    • @midulive
      @midulive  2 роки тому +1

      Ese es el mejor principio de todos. 🤣

  • @andreagravano5146
    @andreagravano5146 Рік тому

    14:36 JoJo's reference

  • @julian_handpan
    @julian_handpan Рік тому

    Los mismos internals del lenguaje no permiten que exista SOLID en JS, mucho menos en React...

  • @patrickanthonylazocolque701
    @patrickanthonylazocolque701 2 роки тому

    otra cosita

  • @kmylodarkstar2253
    @kmylodarkstar2253 7 місяців тому

    apropcalipse

    • @kmylodarkstar2253
      @kmylodarkstar2253 7 місяців тому

      muy lindo video midu esto es la verdad de la milanesa como dicen acá en Argentina, me como todo el tiempo pensando esto y como hacer composición de componentes, etc. Despues lo mismo de como implementar los componentes de acuerdo con librerias de terceros, donde van los datos, el/los estados, etc

  • @arihantjain8347
    @arihantjain8347 2 роки тому

    What are you speaking? Gutka thook ke bolo

  • @santiagotrujillo7101
    @santiagotrujillo7101 2 роки тому

    sigues rompiendo los principios es mejor tener separado por archivos

    • @midulive
      @midulive  2 роки тому +1

      Los principios no tienen nada que ver con la separación en archivos. Lo explico en el vídeo.

  • @JuanPabloGazzarri
    @JuanPabloGazzarri 4 місяці тому

    graciasss