Agregar CSS a REACT 🔵 CSS MODULES vs GLOBAL vs STYLE 🎁 SCSS y SASS 😎 Curso de React desde cero #7

Поделиться
HTML-код
  • Опубликовано: 11 дек 2024

Комментарии • 111

  • @alexmendoza8351
    @alexmendoza8351 Год назад +11

    Lo mejor que he visto de React, aprender Frameworks no es solo saber codificar, es tambien saber sobre orden porque asi funciona el mundo laboral. Muchas gracias es justo lo que buscaba.

  • @abeltrece
    @abeltrece 2 года назад +18

    En mi opinión el mejor curso de React que he visto, a seguir creciendo que os lo merecéis, gracias por vuestro contenido!

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Nos alegra mucho escuchar eso. Vamos a por todo!

    • @AdriaFabrega
      @AdriaFabrega 2 года назад

      @@DesarrolloUtil Opino lo mismo que Abel, muchas gracias y felicitaciones!

  • @cristianrojas7155
    @cristianrojas7155 Год назад

    Sin duda alguna el mejor curso de React, Explicación con calma y pausado al momento de hablar, siempre he pensado que cuando tengamos que explicar algo, lo hagamos como si los demás fuesen retrasados, Gracias por tu Curso.

  • @emmanuelaraujo
    @emmanuelaraujo 7 месяцев назад

    Mejor explicado imposible! Gracias loco!

  • @MarioGonzalezTejada
    @MarioGonzalezTejada 4 месяца назад

    Excelente hermano, te mereces un nobel a la enseñanza 👍

  • @lourdesrodriguezsanchezdel2691
    @lourdesrodriguezsanchezdel2691 5 месяцев назад

    Crack! Justo lo que necesitaba

  • @qillqa
    @qillqa Год назад

    Excelente tutorial, aprendí mucho, gracias.

  • @gabrielmaguna9146
    @gabrielmaguna9146 2 года назад

    Excelente video! Muchas gracias!

  • @vivianaespinoza7254
    @vivianaespinoza7254 Год назад

    Me encantó , el video . Muy claro todo. Después de tanto pude entender.
    Gracias

  • @joseramon3159
    @joseramon3159 2 года назад

    Encantado. Como siempre. Gracias.

  • @rogercardona4160
    @rogercardona4160 2 года назад

    Que crack, nunca nadie me habia explicado eso, y justamente estaba luchando porque mi background del login se estaba visualizando en toda la aplicacion! Gracias amigo!

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Gracias a ti por el feedback, nos alegra saber que te sirvió 👌

  • @atorremedia6799
    @atorremedia6799 Год назад

    Super bien explicado. Gracias!

  • @hipolitosanchez6401
    @hipolitosanchez6401 Год назад

    Me estaba complicando la vida, gracias a tu video se aclaro todo, muchas gracias

  • @lidoazul
    @lidoazul 3 месяца назад

    Mejor explicado no puede estar.😁

  • @paracomentar2703
    @paracomentar2703 Год назад

    que genio, justo estaba pensando si era posible hacer esto y que golazo poder hacerlo con sass

  • @reynierfernandezrodriguez2688
    @reynierfernandezrodriguez2688 2 года назад

    Explicación simple en un tema tan complejo, vaya que mi amigo principiante entendio a la primera, felicidades sigan con ese buen trabajo

  • @marcoalayn3633
    @marcoalayn3633 2 года назад

    Mas claro ni el agua!, muchas gracias.

  • @briandagabrielaherrerapala4272

    Muchas gracias, me fue de mucha utilidad :)

  • @clondonom1
    @clondonom1 2 года назад

    videazo, lo he repasado un par de veces y ya lo estoy aplicando en mis proyectos, excelente forma de aplicar css en react de forma sencilla, muchisimas gracias crack!!

  • @davidgallego1216
    @davidgallego1216 Год назад

    Muchas gracias por esta explicación tan clara.

  • @JoseLuisRodriguez-vy3ch
    @JoseLuisRodriguez-vy3ch Год назад

    Excelentes videos de REACT!! muy bien explicados y contenido de calidad, Felicitaciones y Gracias!👏

  • @jordinodejs3291
    @jordinodejs3291 2 года назад +1

    Con vosotros se aprende que da gusto y todo. Qué grandes que sois! 🐋

  • @juansanchez1616
    @juansanchez1616 2 года назад

    Muy bien explicado!

  • @rogeclash2631
    @rogeclash2631 2 года назад

    joder Pablo, que video mas guapo y tan bien explicado, de nuevo un pedazo de video , gracias

  • @KYDarshan
    @KYDarshan Год назад

    Muy bien explicado todo.

  • @facucorona
    @facucorona 2 года назад +1

    buen video, muchas gracias!

  • @joseluisdelacruz2814
    @joseluisdelacruz2814 2 года назад

    El vídeo que esperaba para complementar a los componentes... estuvo genial, felicidades!!!

  • @marcosMartinez-wm7bd
    @marcosMartinez-wm7bd 2 года назад

    Muy buen video!

  • @danielcano7410
    @danielcano7410 Год назад

    Excelente vídeo, el contenido en inglés nada tiene que envidiarle a este, de hecho lo he encontrado superior por tener el nivel perfecto de complejidad técnica. Gracias!

  • @outletshelssy
    @outletshelssy Год назад

    Excelente video.

  • @jungus5022
    @jungus5022 Год назад

    Gracias crack , me salvaste

  • @karola9045
    @karola9045 Год назад

    Gracias Pablo, te amo babesito ❤

  • @mr.fabian8471
    @mr.fabian8471 6 месяцев назад

    Gracias !!

  • @miguelfasanella6042
    @miguelfasanella6042 2 года назад +1

    Tremendo video, hacía falta refrescar algunos conceptos de los estilos

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

    Ojalá libereis el curso que hicisteis ya que chapó la escuela. Toda una lástima, sois unos cracks

  • @marcianoterricola
    @marcianoterricola 2 года назад

    Muy bueno Pablo, desde ya suscripto, explicas muy claro y al detalle

  • @octaviopicasso1529
    @octaviopicasso1529 2 года назад

    Gracias por esta información tan clara! Se valora y mucho!! Saludos desde Argentina :)

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Muchas gracias! Saludos para Argentina 💪

  • @nicobrch
    @nicobrch 2 года назад

    Gracias por la guia! Tenia problemas de colision y los arregle con el modules

  • @cesar-brandon
    @cesar-brandon 2 года назад

    Lo explicaste de una manera tan clara, gracias por hacer el video ❤

  • @devianhernandez6180
    @devianhernandez6180 2 года назад +1

    Gracias por el contenido de calidad!!

  • @AdriaFabrega
    @AdriaFabrega 2 года назад

    Gracias por no perder media hora en maquetar bonito cuando todos los que venimos aquí es a aprender React. Me encanta el RUclipsr "Fazt" pero algo que me cansa mucho de él es que no da nada por hecho y explica siempre todo de 0 completos principiantes incluso si es de una tecnología mas básica a la que está explicando. Me subscribo a tu canal, me parece contenido de muchísima calidad!! Gracias!!

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Tratamos siempre de acotar al máximo los ejemplos, para centrarlos en lo realmente importante. Muchas gracias!

    • @sdann5957
      @sdann5957 2 года назад

      Realmente yo valoro eso de Fazt lo que a ti te disgusta porque no siempre entro a ver algo que quiera aprender a full, a veces solo curosear. Obviamente se hace más largo el video pero ayuda muchisimo a la gente que no sabe o no se acuerda. Al final es cuestion de cada uno y para gustos colores al final.

  • @RingOfFaia
    @RingOfFaia 2 года назад

    Que buen video, quisiera ya llegar a la seccion de Provider y Context. Saludos Pablo y Jose

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      Muchas gracias! Ya va quedando menos 🙂

  • @jukes7269
    @jukes7269 Год назад

    Gracias. Soy nuevo en el front y siempre me cuesta armar un proyecto. Sobre todo como configurar el Index.css y el App.css. ya que abarcan todos los componentes

  • @carlosandresmosquerabarona2312

    que tema de visual utilizas? me gusto mucho!

  • @jotasoluciones2301
    @jotasoluciones2301 2 года назад

    Excelente información, gracias bro!

  • @diegosayago8130
    @diegosayago8130 Год назад

    Super interesante css modules... te hago una consulta( o quien quiera responderme XD), consideras que de una vez me habitue a usar css modules? porque aun estoy aprendiendo, y quizas seria bueno ya ir usandolo en mis practicas para habituarme... va eso opino yo, quizas alguien que tiene muchas experiencia pueda guiarme un poco, desde ya muchas gracias, sub y like obvio

  • @jmartinez4906
    @jmartinez4906 2 года назад

    Muy útil!! Muchas gracias.

  • @andysantisteban
    @andysantisteban 2 года назад

    Gracias brooooo!! buenardo

  • @eduardfgc
    @eduardfgc 2 года назад

    nice muito obrigado

  • @hack_crack
    @hack_crack 2 года назад

    Agregenlo a playlist jeje casi no lo encuentro, genial!!

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Agregado! Muchísimas gracias por avisar 🙂

  • @davidponc
    @davidponc 2 года назад

    Gran explicación 🔥

  • @Kickevnzla
    @Kickevnzla Год назад

    Que opinas de styled-components?

  • @ryan2000
    @ryan2000 2 года назад

    A mi al principio me gustaba usar sass, pero ahora prefiero usar styled components porque es mas potente. Gran video crack👍

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      Pues fíjate que yo ahí discrepo. Te animo a que te pases un día por un directo y te comentamos el por qué, a ver qué te parece!

    • @ryan2000
      @ryan2000 2 года назад

      @@DesarrolloUtil okey, lo hare. Gracias

  • @andrespodadera5874
    @andrespodadera5874 2 года назад

    Esto ya empieza a ser Pro-Mode. Si comparamos cuando se empieza en este mundillo, dando estilos "en-línea" al html con tener un css normalizado de uso general y otro .css, uno para componente pues "es que no hay color," nunca mejor dicho. ¿Entonces haciendo el @import el tema de herencia se respeta? ¿aunque el css este partido en trozos? Como hecho curioso, los componentes hay que exportarlos, pero el css asociado a ese componente no. Me estoy guardando esta serie videos de react incluso para cuando no tenga internet y quiera consultar algo. Muchísimas gracias chicos :)

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      A qué te refieres con la herencia? No entiendo muy bien
      La parte de que el CSS no haya que exportarlo, es porque los CSS modules no son un concepto propio del lenguaje CSS, sino que los "crea" el empaquetador. Si te fijas no usa ninguna característica de CSS, sino que simplemente crea clases con nombres aleatorios.
      Muchas gracias!

    • @andrespodadera5874
      @andrespodadera5874 2 года назад

      @@DesarrolloUtil Si me refiero al tema que cualquier elemento puede heredar propiedades css como el color o el tamaño de fuente de su elemento padre que lo contiene, ¿y si podría usar la palabra clave "inherit" para tal propósito? Gracias 🙏🏻 Saludos

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      Ese es el comportamiento por defecto de CSS, pero realmente ahí te recomendaría echar un vistazo a canales como el de DorianDesings, que explica mucho más en detalle CSS

  • @juanmartinmonti849
    @juanmartinmonti849 Год назад

    Pregunta: Si yo tengo un archivo de variables sass y este mismo, lo quiero poner a disposición de todo el proyecto(que yo pueda llamar a las variables sin importar el componente) y el proyecto esta hecho con vite, como hago? pq los metodos que eh usado no reconocen el archvio

  • @PuntodeVista0
    @PuntodeVista0 4 месяца назад

    Hola buenas recien estoy aprendiendo react con node.js, estoy bloqueado al aplicar el css global dado que solo comsigo aplicarlo si llamo a una pagina como si fuera un componente, en cambio si lo hago des de un link en otra pagina la pagina que llamo aparece sin estilos llevo mas de 2 dias y no soluciono nada, alguna ayuda?

  • @mderlich
    @mderlich 10 месяцев назад

    hola muy buen contenido.el canal va a seguir subiendo contenido?

  • @blancoblanco1160
    @blancoblanco1160 9 месяцев назад

    no me funciona correctamente cuando le coloco a los estilos el module siguen comportándose de una manera extraña

  • @Pool-Petter-Hijuela
    @Pool-Petter-Hijuela 2 года назад

    Gracias Pablo! Demoraste una "eternidad" con el curso de JS, pero valió la pena al igual que este de React.

  • @isaiascobogalindo
    @isaiascobogalindo 2 года назад

    Hola, como poner el componente Footer.jsx en el pie de página de la página principal. Se hace con CSS?. Gracias

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Tienes que pensar que al final, todo es HTML y CSS!

  • @jamj4199
    @jamj4199 2 года назад

    en lo que llevo aprendiendo react no he trabajando con css modules aun que ya sabia de su existencia por que me gusta mas trabajar con styled-components pero es una muy buena alternativa. Una cosa mas es una pregunta ¿ css modules es una dependencia que viene por defecto en react o es cosa de vite ? otra cosa es que creo que pudiste utilizar una ternaria en los de los segundos no se me parece mas cómodo pero es cosa de gustos y por ultimo las explicaciones que das en los videos son excelentes

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +4

      Es algo que se gestiona con el empaquetador, así que sí, es cosa de Vite. Muchas gracias!

  • @julian2908
    @julian2908 2 года назад

    Que cracks son, sin embargo me surge una duda con modules se puede pasar una prop que reemplace el classname después del style.classname ?

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      No se puede hacer eso, lo que puedes es elegir un className u otro en base a una prop.
      miProp ? style.clase1 : style.clase2, por ejemplo

    • @julian2908
      @julian2908 2 года назад

      @@DesarrolloUtil Al final lo logre recibiendo la prop de classname en una variable y enviandola al style. Estoy haciendo un mal uso de esto ?
      Así
      ```
      function Layout({
      children,
      className
      }) {

      console.log(className);
      const cssClassName = className;
      return (

      {children}

      )
      }
      ```

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      Si quieres pasa por el Discord y lo comentamos allí, así te puedo explicar mejor!

    • @julian2908
      @julian2908 2 года назад

      @@DesarrolloUtil Listo ya deje el comentario en React !! Gracias ! :3

  • @villalozpinaivan6620
    @villalozpinaivan6620 Год назад

    Hago lo de MODULES y aun así los estilos me los maneja globalmente

  • @AdriaFabrega
    @AdriaFabrega 2 года назад

    ¿Al usar css modules es mala practica usar snake case en lugar de kebab case y camel case?

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Es mejor utilizar camelCase, para poder tratarlo como un objeto normal

  • @JhonyHDV
    @JhonyHDV 2 года назад

    si quiero agregar clases que sea reutilizables como variables, etc? importaria esos archivos a mis compontentes?

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Si quieres usar clases reutilizables entre componentes, lo suyo es crearlas como CSS global, y dejar en el module sólo las específicas.
      El problema es que no hay una respuesta única para esto, depende mucho de la orientación que quieras darle

  • @josedevelop
    @josedevelop 2 года назад

    ¿Los módulos css funcionan solo con Vite o también con npx?

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      No entiendo a qué te refieres con npx

    • @MaydayMaydayMusic
      @MaydayMaydayMusic 2 года назад

      @@DesarrolloUtil creo que se refiere a create-react-app

  • @matrixcristian21
    @matrixcristian21 2 года назад

    Esa característica de módulos con Sass y Scss funcionaría de forma equivalente para el preprocesador css less?

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      Según su documentación, si, funcionaria también.
      Es algo que nunca me ha dado por utilizar, aunque intuyo que sería algo similar, cuestión de hacer una pequeña prueba!

    • @matrixcristian21
      @matrixcristian21 2 года назад

      @@DesarrolloUtil Si, funciona gracias. Estoy seguro de que este canal va a crecer rápido. 🤘🏽

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад

      Ojalá tengas razón! Muchas gracias 🙂

  • @faustopino6385
    @faustopino6385 2 года назад

    LIKE SI VINISTE POR EL LINK DEL PROFE WIEDERMANN

  • @JhonyHDV
    @JhonyHDV 2 года назад

    al metodo Bem de css no le gusta esto

    • @DesarrolloUtil
      @DesarrolloUtil  2 года назад +1

      Es como si usarás Bem y escribieras las clases con la cabeza 😂