Material UI React Tutorial

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

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

  • @CognitivePrimate
    @CognitivePrimate 3 года назад +36

    I've watched multiple tutorials on this and they've all been really difficult to follow but you did a phenomenal job here. Thank you so much. I finally feel like I have a basic understanding of MUI now.

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

    I thought material ui is boring but your explanation made me reconsider it in my next project

  • @tonisihvola71
    @tonisihvola71 4 года назад +48

    I really appreciate the fact, that we get a detailed guide like this for free, truly amazing. Thank you! :)

  • @muneebzubair5069
    @muneebzubair5069 3 года назад +2

    Very nice tutorial. Super simple and to the point. keep it up.
    My advice. Main things to learn or to keep in mind in any platform in any programming language any device.
    How to:
    1. input data
    2. output data
    detailed:
    input: single value, multiple values, lists, checkboxes, buttons, images, videos
    output: single value, multiple values, lists, checkboxes, buttons, images, videos
    get some details of any single comonent and how to change it...

  • @jacobwwarner
    @jacobwwarner 2 года назад +2

    Crystal clear video and audio quality. While doing the crash course, he wasn't jumping all over the place. It was really smooth. He kept the same speed and did everything in a linear fashion. I feel like watching this video was able to get me ready-enough to watch project tutorials which features Material UI. Thanks for featuring it :)

  • @EnLaMitad
    @EnLaMitad 4 года назад +139

    Just in time. Exactly what I was looking for.

  • @starvinmarvin3381
    @starvinmarvin3381 4 года назад +10

    Really nice tutorial. Started learning React about a month ago. I have to say, material UI makes a lot of things sooo easy. For example, I spent a lot of time manually animating my inputs to look as sleek as MUI ones just to find out Material UI already includes them. Thank you for this tutorial ;)

    • @AdrianTwarog
      @AdrianTwarog 4 года назад +1

      Awesome to hear

    • @cutyoursoul4398
      @cutyoursoul4398 4 года назад

      Material UI is really awesome when you are starting to learn React. It helps

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

      Wait till you pay for Pro 🚀

  • @ridz4912
    @ridz4912 4 года назад +14

    What an amazing tutorial ! One of the first videos I have watched in which the explanation is so crystal clear. Learned tonnes of stuff. Keep up with the good content Adrian !

  • @paul8683
    @paul8683 4 года назад +9

    The way the react symbol rotates behind his head around 27:00 looks like kpop cat ears and I can't unsee it every time it rotates. Edit: Watched right to the end and when you asked if you should make more, yes. Your explanations are right to the point and give enough to get started while giving away just enough to make me want to look into certain things more. I also liked how you showed the header bar last. I came here looking for that one in particular and having it last made me watch the whole thing.

    • @MKdaChamp
      @MKdaChamp 3 года назад

      I'm glad I wasn't the only one who saw that🤣🤣🤣

  • @midhatahir8104
    @midhatahir8104 4 года назад +1

    I always think that there should've good , small and precise materialUi tutorial on youtube. And this tutorial is the best and finest of all tutorials out there. Thanks Brad and Adrian 🔥

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

    truly you made me up and running with material very fast when i felt bootstrap is not enough for my app and the deadline was close:)thanks

  • @SamirMamude
    @SamirMamude 4 года назад +3

    You can use the library styled-components and override the default components, works very well.

  • @AlejandroLZuvic
    @AlejandroLZuvic 3 года назад +3

    Struggling with my first project using Material, this was so helpful! Thanks!

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

    Adrian is now rocking on RUclips 🔥
    Brad you explore lots of great mentor's with great content.
    Thank you.

  • @Sindoku
    @Sindoku 3 года назад +1

    Material UI + NextJS equals heaven

  • @Turkeywings65
    @Turkeywings65 3 года назад

    You're honestly a God. I'm taking a technical final for my interview and they suggested Material UI. and wow. such a time saver!

  • @bosscoding3999
    @bosscoding3999 4 года назад

    I was learning from you a lot but I am a grade 8 students and I was learning in the Corna time and the school has started and I should focus on my school thank you for you and don't stop this channel I will back after 1 year and see you I accept a lot

  • @thesirion
    @thesirion 3 года назад +5

    This video answered all the questions I was having with Material UI! Thank you!

  • @SankarKumar-on8tn
    @SankarKumar-on8tn 4 года назад

    NO ONE CAN BEAT THIS CHANNEL EVER

  • @ahayder
    @ahayder 3 года назад +2

    Fast, Precise, and Easy to grasp. One of the best tutorials I've ever encountered.

  • @Anandhanedom
    @Anandhanedom 4 года назад +3

    What a timing. Was about to search this resource. Thanks!

    • @Pietruszkaaa123
      @Pietruszkaaa123 4 года назад +1

      same!!

    • @sauravjain6135
      @sauravjain6135 4 года назад +1

      Haan bhai, jo tum sochte ho wahi upload ho jata hai😂😂😂

    • @trojanofficial5380
      @trojanofficial5380 4 года назад +1

      I was about to begin my project using Bulma Framework, then this dropped..!

  • @PedroTechnologies
    @PedroTechnologies 4 года назад

    I use Material UI primarily for the Icons, but it is an Awesome Library!

    • @viraj_singh
      @viraj_singh 4 года назад

      I use it primarily for Grids, and Hidden component.

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

    The best and only mui tutorial I will ever need. Thanks

  • @brians7894
    @brians7894 3 года назад +1

    Excellent intro to Material UI, was easy to follow the steps. Also, excellent video editing, I like that code, results, and speaker camera all visible at the same time.

  • @jeffsegovia00
    @jeffsegovia00 4 года назад +3

    Finally! Thanks Brad and Adrian!

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

    Really Great Video Adrian ! Many times I start learning about Material Design but Most tutorials confuse me From where I can start But after this I'm able to use this one in my project. Thank!

  • @muhawenimanajanvier6280
    @muhawenimanajanvier6280 4 года назад +4

    Thanks,
    I'm waiting for the part 2 of this video,
    Where we will create a full functional website 😀

    • @AdrianTwarog
      @AdrianTwarog 4 года назад +1

      Cool! Thanks for letting me know

  • @jr-hp7er
    @jr-hp7er 4 года назад +12

    I am 200% sure, I will require the advanced videos on the same. Damn, you made my life so simpler, Thanks, Brad & Adrian. A complete Udemy course will be perfect for sure :) I don't know why I never put more time to learn material, its so useful and Adrian made it easy... :) Awesome Content creators

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

    So useful and only in 40 minutes, thank you so much, really appreciate it.

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

    This was a great introduction to Material UI, thank you Adrian.

  • @AlGuhry
    @AlGuhry 3 года назад

    It is the easiest and simplest explanation of the material
    Thanks and Greetings 🇪🇬

  • @A1996ARP2075
    @A1996ARP2075 4 года назад +16

    Thanks Brad you understand what web developer needs and update your channel with great content really love this channel

  • @SilentAsShadow
    @SilentAsShadow 4 года назад

    Trying to watch significantly less and code, code, code a lot more so as to not remain in tutorial hell. I've decided to keep this channel, however. Quality content that feels up to date and relevant.

  • @tejas8417
    @tejas8417 4 года назад +12

    Awesome video! Helped me a lot! I am just trying to up my game in React and here it comes! Thnx a lot Adrian and Brad. Love the channel

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

    I have been waiting for this for so long.

  • @SashrikaWaidyarathna
    @SashrikaWaidyarathna 4 года назад +4

    One suggestion. It is more convenient to use another ToolBar component just below the AppBar, to get the appropriate marginTop. Manually setting the marginTop leads to many inconsistencies there.
    Overall I learned few new things here. (Y) Thanks for this video!

  • @swierad
    @swierad 3 года назад

    One of the best tutorials on RUclips. Many thanks.

  • @saivivekravi4979
    @saivivekravi4979 4 года назад +1

    Please make more videos on material ui your teaching is awesome ❤️

    • @AdrianTwarog
      @AdrianTwarog 4 года назад

      Okay cheers for the support, may do!

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

    Thanks a lot. I did a HUGE step in UI develoipment

  • @architdutt
    @architdutt 4 года назад +1

    Nice little crash course thanks

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

    I like the way, the React logo is spinning on top of his head.

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

    Awesome video , really helped me alot , thanks 🤘

    • @AdrianTwarog
      @AdrianTwarog 4 года назад

      Great to hear!

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

      @@AdrianTwarog Was watching your other video now and you replied , thanks man 👍🏻

  • @stepanostapuk4120
    @stepanostapuk4120 3 года назад

    Thank you! It is a good video to getting a common point of view on how to use Material UI and what is it.

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

    Wow, this video was as clean and easy to use as one could hope. Fantastic job sir.

  • @milosleng1175
    @milosleng1175 3 года назад

    It is great you are collaborating with other artists and give them chance to present themselves at your hub!

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

    I know react, I mainly watched because I wanted to see what all the fuss is about and soak up the core concepts quickly. But I must say, that library is SCHWEET!!!

  • @hardworkerbig
    @hardworkerbig 3 года назад

    Need more videos on this...Looks much clean and helpful

  • @aayushkumar2736
    @aayushkumar2736 4 года назад +1

    Wow , was lookin this for weeks thnx for providing man

  • @prashanttanwar3261
    @prashanttanwar3261 4 года назад +1

    He is the finest guest creator on this channel ❤️❤️

  • @Elator11777
    @Elator11777 4 года назад +1

    Excellent Video! Highly useful!

  • @ajithmenon9235
    @ajithmenon9235 4 года назад

    Very useful and crisp video on Material UI + React.

  • @donovan8031
    @donovan8031 4 года назад +1

    Ayyye! Adrain is back on the channel!

  • @noname1999x
    @noname1999x 4 года назад +1

    Nice tutorial! Wanna see more videos about material ui for react 👍

    • @AdrianTwarog
      @AdrianTwarog 4 года назад +1

      Cool might do some more the.

    • @noname1999x
      @noname1999x 4 года назад

      @@AdrianTwarog thanks you ❤️

  • @hasnainmalick8888
    @hasnainmalick8888 3 года назад +2

    Your teaching style is so impressive but if you use individual files for each topic It will help us to understand more easily.

  • @RobsonAlvesJJ
    @RobsonAlvesJJ 3 года назад

    helped me a lot in my new job, I'm a beginner thanks, a hello from Brazil

  • @MaxProgramming
    @MaxProgramming 4 года назад +9

    Adrian is back again!!! For the 3rd time! You look so good Adrian and you are awesome! Thanks for all of your tutorials and tips 😊

  • @dexkode5558
    @dexkode5558 4 года назад +1

    I was just thinking of building my portfolio, this will come in handy .

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

    I was looking for a great video that was short and sweet so I could jump into playing around with mui and this was great! I liked being able to see how easy it makes mobile responsiveness! I have a lot of fun doing that myself but I like how it simplified the process if I ever wanted the shortcut. I'd like to see more to build a responsive app if you did more videos on mui.

  • @victormog
    @victormog 3 года назад +2

    Thank you, very much!
    Perfect start to estimate and use material-ui!

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

    That's it. Thats all I wanted. You are a Legend. Thanks mate!

  • @cloudybrains
    @cloudybrains 3 года назад

    Damn this is going to make my portfolio apps look 10x better thank you so much!

  • @after_alec
    @after_alec 4 года назад +110

    I see you have auto formatting disabled in your VS Code settings. I, too, like to live dangerously.

    • @webstylepress
      @webstylepress 4 года назад +5

      Auto formatting does not work properly in all cases if you switch languages/technologies.

    • @TraversyMedia
      @TraversyMedia  4 года назад +12

      @@webstylepress I hate it in Python. I use it with JS though

    • @webstylepress
      @webstylepress 4 года назад +5

      @@TraversyMedia With JS, auto formatting and linting is absolutely necessary - very helpful.

    • @rahulsriram6295
      @rahulsriram6295 4 года назад +1

      @@TraversyMedia
      Use flake8 as linter and autopep8 as formatteer, by installing them as global modules.
      "python.linting.enabled": true,
      "python.linting.flake8Enabled": true,
      "python.linting.flake8Path": "/usr/local/bin/flake8",
      "python.formatting.provider": "autopep8",
      "python.formatting.autopep8Path": "/usr/local/bin/autopep8",
      And enable save on format. Works like a charm.

    • @caleblovell
      @caleblovell 3 года назад +1

      Watching him ineffectively try to manually realign blocks of code is make me very uncomfortable! Glad I’m not alone

  • @jayathissaaral2598
    @jayathissaaral2598 3 года назад +1

    I've watched 42 minutes thank you very much 💪💪💪💪

  • @travel_worldwide_365
    @travel_worldwide_365 3 года назад

    Best tutorial for me in YT on React-MUI. Great !!!!!!

  • @vishalyadav8789
    @vishalyadav8789 4 года назад +1

    🔥 needs more videos on Material UI

  • @rizwanmustafa0000
    @rizwanmustafa0000 3 года назад

    Material UI is such a life saver. Thanks for the amazing tutorial!

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

    this is great! I got inspired by you, got my MUI series in the process. Thanks!

  • @TheGreatManipulation
    @TheGreatManipulation 4 года назад +1

    Thank you! This is exactly what I needed in the app I am creating

  • @leelonghui
    @leelonghui 4 года назад +5

    Definitely, I want more MUI tutorial from you.

  • @emreaka3965
    @emreaka3965 3 года назад +1

    I used semantic ui but material ui really looks cool. ^^ And thanks for the video.

  • @RD-jr8nv
    @RD-jr8nv 3 года назад

    This was excellent, exactly what I needed. STRAYT TO THA BLAADY POINT MAATE! Not long back from a year in 'Straya', had an amazing time! Much love from Scotland bro, Liked and subbed to your chanel!

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

    This is an amazing video! I have watched at all to have an overview of the library and now I know what I can do. Of course is an obligation to look at the oficial documentation as well. In adition, english is not my native language, but I could understand you perfectly withouth subtitles, in 1.25 speed! drinking mate since Argentina!!! thanks you very much!

  • @bhanujamwal4052
    @bhanujamwal4052 3 года назад

    Perfect for crash course vedio to start with :)

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

    Nice toturial with nice deep bass-baritone voice

  • @technotambo2
    @technotambo2 3 года назад

    Hhaha! am surprised Adrian suddenly showed up, I thought something was wrong? You rock Adrian! Thanks to Traversy Media! He rocks!

  • @MuhammadBilal-hq3xn
    @MuhammadBilal-hq3xn 3 года назад

    The best tutorial I have seen so far.

  • @JameelAhmad-ik5wy
    @JameelAhmad-ik5wy 4 года назад +1

    Thanks for bringing brilliant content.

  • @CodestarTechnologies
    @CodestarTechnologies 4 года назад +1

    Cool stuff on this channel

  • @Euquila
    @Euquila 4 года назад

    You are the Bob Ross of mui.

  • @shivanshsrivastava5009
    @shivanshsrivastava5009 4 года назад +1

    was waiting for this thank you so much

  • @friedrichgordon9986
    @friedrichgordon9986 3 года назад +1

    appreciate the effort. not to knock on the speaker but imo you can learn a UI library faster by just referring to the official documentation. integrating material-ui isn't nearly as complex as setting up O-auth or setting up an express server

    • @gamerzero6085
      @gamerzero6085 3 года назад

      in my opinion, setting up O-auth and express was intuitive enough and didn't require any guide. I've watched half of this thing just to get a glance at what Material UI is cause I didn't know anything about it before.

  • @davidgonzalez965
    @davidgonzalez965 3 года назад

    You guys must have been sent from up above! Can't thank you enough.

  • @andreaso.1549
    @andreaso.1549 2 года назад +1

    Would have been nice with some explanations of what's going on behind the scenes - what element are the components made up of? What does the different attributes do precisely? Didn't learn much from this.

  • @stevens.3343
    @stevens.3343 3 года назад

    Fast, Loud, and Clear ! Perfecto ! It is auto subscribed haha..

  • @fernandotrovao4093
    @fernandotrovao4093 3 года назад

    Helped me with my job in Canada!

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

    Great video! It would be great if you could do an example website design with Header, Footer, Sidebar, AppBar using Material UI! Thank You!

    • @AdrianTwarog
      @AdrianTwarog 4 года назад

      Good idea!

    • @jaychandran24
      @jaychandran24 4 года назад

      @@AdrianTwarog Thank you! Look forward to that!

    • @jaychandran24
      @jaychandran24 4 года назад

      @@AdrianTwarog also along with the login/logout screen.

  • @mortonialan
    @mortonialan 3 года назад

    There are more nice things to talk about material UI than ctrl + c and ctrl + v the documentation.

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

    I have to do a presentation on Material UI to my team. This is going to help tremendously! Thank you! lol

  • @kushalkulkarni9073
    @kushalkulkarni9073 3 года назад

    Thanks you Kimi Räikkönen!!!

  • @ceralguy85
    @ceralguy85 4 года назад +1

    Great video please i would be great to have more videos related with Material UI

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

    wow thank you! now I can play with those to learn more

  • @niharikaguptao2264
    @niharikaguptao2264 3 года назад

    Thank you for this. So much to learn in such a short video

  • @carlosdelgado5632
    @carlosdelgado5632 4 года назад

    I've really enjoyed this video thanks Brad and Adrian for this good piece of content!!

  • @anmollipase2056
    @anmollipase2056 4 года назад

    when i saw thumbnail...for a moment ...i thought OH MY GOD!!! brad went to gym and transformed....you guys are looking similiar...by the way video is good.love it.

  • @erad4910
    @erad4910 4 года назад +1

    Great video mate!
    just FYI instead of adding marginBottom to the AppBar you could just pass position='static' as a prop :)

  • @qonxi
    @qonxi 3 года назад

    Excellent video! I appreciate the simplicity and the emphasis in the documentation :)

  • @babinio7458
    @babinio7458 3 года назад

    2:25 yarn didnt work for me so i installed the mui by adding ''npm install @material-ui/core --save'' , course is awesome i subscribed to this channel!

  • @edi353
    @edi353 3 года назад

    Thank for this video. I would learn more about mui with the docs

  • @mahendranath2504
    @mahendranath2504 4 года назад +1

    Nice THANK U and Traversy media , where we learn so many things about your career

  • @swiftrtgamingfitness3698
    @swiftrtgamingfitness3698 3 года назад

    This video was great! Definitely going to use Material UI a lot more.