Material UI React Tutorial

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

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

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

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

  • @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.

  • @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 :)

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

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

  • @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🤣🤣🤣

  • @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 🚀

  • @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...

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

    Just in time. Exactly what I was looking for.

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

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

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

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

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

    NO ONE CAN BEAT THIS CHANNEL EVER

  • @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 🔥

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

    Material UI + NextJS equals heaven

  • @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 !

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

    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

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

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

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

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

  • @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!

  • @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 4 года назад +1

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

  • @brians7894
    @brians7894 4 года назад +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.

  • @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 🇪🇬

  • @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 3 года назад

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

  • @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!

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

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

  • @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..!

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

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

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

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

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

    One of the best tutorials on RUclips. Many thanks.

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

    Very useful and crisp video on Material UI + React.

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

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

  • @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

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

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

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

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

  • @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.

  • @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

  • @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!!!

  • @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!

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

    Nice toturial with nice deep bass-baritone voice

  • @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!

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

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

  • @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 😊

  • @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.

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

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

  • @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.

  • @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!

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

    He is the finest guest creator on this 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 ❤️

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

    Material UI is being used more and more with React as compared to other UI libraries.

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

    Definitely, I want more MUI tutorial from you.

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

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

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

    Nice little crash course thanks

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

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

  • @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.

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

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

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

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

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

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

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

    Perfect for crash course vedio to start with :)

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

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

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

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

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

    🔥 needs more videos on Material UI

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

    Helped me with my job in Canada!

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

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

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

    "so we've got the day day ,month month, and year year" ~El comrade @ 18:43

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

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

  • @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.

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

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

  • @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

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

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

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

    Excellent Video! Highly useful!

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

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

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

    This was great. Please do more! thank you!

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

    Pls more of this 😢, material ui is awesome 😀

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

    Wow , was lookin this for weeks thnx for providing man

  • @soumyashreepatra6224
    @soumyashreepatra6224 4 года назад +15

    Hey, could you do the other videos on Material-ui that you said you would do

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

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

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

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

  • @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 👍🏻

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

    As someone who has turned in assignment etc... at school on actual floppy disk, I find it hilarious that in 2022 it is STILL recognized as some near-universal symbol for "save stuff", even though fewer and fewer people have actually ever used one.

  • @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.

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

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

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

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

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

    great. Yes more MUI tutorials please

  • @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!

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

    You are the Bob Ross of mui.

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

    Finally! Thanks Brad and Adrian!

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

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

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

    Did not know we could do topography in material ui

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

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

  • @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!

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

    Thanks for bringing brilliant content.

  • @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!

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

    Great video but at 23:11, instead of creating another function ButtonStyled, passing the const classes, and returning the button... it would be easier to just delete lines 25-28 and go to line 31 and create a new line const classes = useStyles();
    Then inside of the button in the React code, just give it a className={classes.button}.
    My way is much more simple and you don't need a function for each style. Just throw all the styling under the useStyles block and then put className={classes.xxxxxxx} for each individual component.

    • @mohamedel-bachirzahaf4290
      @mohamedel-bachirzahaf4290 2 года назад

      hi sir, i'm following this vid and i'm stuck on this point, when i made the useStyles it made a blank page, even tho i copied the same code as him, would you like to tell me if you had this problem before?

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

      @@mohamedel-bachirzahaf4290 well have to figured it out?

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

    Best intro for Material-UI!

  • @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.

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

    Nice video Brad plz make tutorial on django 3hrs project course

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

    it was a greate and comprehensive toturial I really enjoyed!

  • @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.