Learn Material UI in One Hour - React Material UI Project Tutorial [2022]
Вставка
- Опубліковано 4 січ 2025
- Are you new to Material UI? Have you heard about it but never actually tried it out? Maybe you dived into it but it felt overwhelming? It's easy to learn if you know where to start! This video will help you to get started quickly, welcome to a one-hour Material UI Crash Course.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UA-cam discount code is automatically applied!
⭐ Taskade - www.taskade.com
Contact - support@taskade.com
📚 Materials/References:
Material UI - material-ui.com
💼 Business Inquiries: javascriptmatery00@gmail.com
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmas... 🔥
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
JavaScript Mastery PRO launching soon! Be the first one to find out about it - javascriptmastery.eo.page 🔥
record part 2. This video has reached 5k likes.
it's 7k now
it says "Sorry, an unknown error has occurred. Please try again later."
@@zee_designs2:41 2:44
I'm one of those guys who requested material-ui. thanks a lot, you really care about your subscriber desire.
Definitely, enjoy!
I think most of us did :)
yes same here big up my man
Hi sir thanks for your tutorials
But how can I find you out of UA-cam
Hello Sir, I just want to thank you for all of your amazing videos. I went from a high school kid who knows a bit of Javascript and Python to a U of Waterloo CS Student with Full-Stack web dev experience through your videos. All of your videos are spot-on and well-organized, and I have learned tremendously through them. I hope I can meet you in the future and buy you a drink! :)
I liked how you show us how to explore and read the documentations and apply that stuffs to your source code. This is very vital activity that every programmer should know. I appreciate what you did. Keep it up!
Thank you!
Yes it's like teaching how to fish and not fishing for them. I like tutorial that really teach how to use documentations.
Thank you! This was a great video. I loved how you kept it short, simple and actually started the project FROM THE BEGINNING of creating a react app.
You are so welcome!
At this point, I'm just marathoning your entire catalog and making personalized adjustments here or there. Hands down the greatest guided tutorials I've come across, and you aren't even asking any money! Easy subscribe and like to every video :)
One of the best tutorials i've seen so far. First video that I see on this channel, and it is already subscribed!
What an absolutely amazing tutorial i am noob on react and this has blown my mind love it , you reduced the learning curve for me by a magnitude of 20. Thanks so much and keep smashing in your videos
Keep it up! The clearest description Ive ever seen in a tutorial, thank you so much :)
Yesterday I finished up the "Alan AI news reader " project and really wanted to learn about Material UI and this video got uploaded :D
It's here now! 🙌
He did it again boys and girls. He did it again. Thank you so much!
No, thank you!
You are a great teacher. I really appreciate your balance of simple explanations with enough depth and references to documentation for deeper understanding. I have "used" material-ui a couple times before from other tutorial vids but this is the first time I have truly learned and appreciate its beauty and it's all thanks to you! Really appreciated and subscribed for life!
That's amazing David, thanks!
I love your comment! May I use it as a testimonial for my upcoming course platform? :)
@@javascriptmastery yes, of course!
@@AverageCho I'm so glad to hear that! Would you please share your email with me so that I can reach you? :)
This is great. I also love how you go into detail of where to look and how to look through the documentation. That's something that most teachers don't do but I think its important to do so.
I love your comment! May I use it as a testimonial for my upcoming course platform? :)
@@javascriptmastery of course. I dont mind.
@@rezkin7946 could you please reach out to me to javascriptmastery00@gmail.com
Turoials like this are always so hit and miss but you explained this really well and I think everyone appreciates how you explain where things are in the documentation and how to utilise it. Thanks a lot!
You're so freakin amazing and I can't wait to see that sub count keep rising. Keep up the amazing tutorials! You really carry yourself well and the format of your lessons, while fast, make it easy to follow along.
Just found your channel and am really impressed with your tutorials. I noticed that this one is 3 year old and could use an update to how Material UI is installed now. Cheers
I wrote to you 3 days ago and asked about material ui, and you add such video, i'm so happy
I'm glad! 😊
As a begginer, i'm learning a lot of all your videos. Thanks for share your knowledge, master!
Thank you Adriano!
This is the most needed video I have watched on youtube this year on my react UI feature
Wow! Exactly today I designed a todo app layout and wanted to start impelenting it in material-ui tomorrow. What a timing!
That's awesome!
This is the first great Material UI tutorial where a tutor is trying to teach how to get freedom in material UI by helping us understand the documentation so that we can ourselves become the boss, unlike those thousands of youtubers who try to tell us that how great they are using material ui. Thank you sir for helping us learn.
That was the point, thanks! 😊
I love your comment! May I use it as a testimonial for my upcoming course platform? :)
@@javascriptmastery sure
@@radeonblue1816 awesome thanks, please reach out to me at javascriptmastery00@gmail.com
I m Glad Someone is showing how to make whole project without copy pasting the source code which lot others do
Thank For being Original
I was just surfing on the web today thinking about learning Material UI. You sure can read my mind!
Haha, seems so, enjoy!
Im really not that kind of person who likes or comment. Im more like a quiet viewer, but this has to be the greatest Tutorial I ever saw. Thank you so, so much.
The Best Material ui course on UA-cam and I want more material ui lectures.
Thanks a lot for quality and timely content as always. Waiting for part 2. This channel is still underrated, but I know soon it's gonna be up there. Thanks
Thank you Stanley!
I'm working on a small personal project with Material UI. This video is extremely informative and very easy to understand. Thanks!
Thanks Dean!
You are sooooo great...it's a blessing to come across this channel.. Gonna share this with all my friends.. that a lot man. Another video on material ui would be great on themes and all.
Just noticed this channel, two videos in and I'm liking it quite a lot, not too fast not too slow
I am so glad that I found this channel. Amazing! content!
One feature I would have liked to see is a full screen pop up of a selected image using MaterialUI.
Fantastic tutorial; clear and concise!
Just finishing the MERN part 3 and I really wanted this to fully grasp all the ui stuff we did in that tutorial. Thanks a ton bro.
Thanks!
@@javascriptmastery Just finished. It was a great tutorial, hopefully you can do part 2 !!!
Wow, this was really really accessible to a noob like myself. Thank you so much for your detailed explanations. So many tutorials just breeze through things and forget we're here to actually learn them. I'm looking forward to more of these. Thanks!
Glad it was helpful!
Great video JSMastery, however a few things have changed from 2022 that I must bring to the notice of new viewers so that they don't struggle as much.
So at the time of writing (Feb 2023) the brand name is changed from "material-ui" to "mui" in V5
1. as a result of the change of name of the hook, the import shown in the video doesn't work, the new import statement is shown on the homepage of mui site.
2. @material-ui/core doesn't work, now it is @mui/material
3. thus import {Typography} from '@mui/material' instead of import {Typography} from '@material-ui/core'
4. @material-ui/icons is @mui/icons-material (and that means npm i @mui/icons-material)
5. thus the correct import of PhotoCameraIcon is import {PhotoCameraIcon} from '@mui/icons-material'
6. they have dropped the support for mui/material/styles (imported as material-ui/core/styles in the video) and moved useStyles, makeStyles to @mui/styles however that doesn't work either.
eish.....it makes this video hard to learn from
You have any idea how to use makeStyles with react18 now ?
@@ImranKhan-ft7ns MUI has discontinued makeStyles so you can't use it now
the useStyles, makeStyles work properly with the new version of mui. But you have to ensure the "makeStyles" has been properly imported.
Instead of import makeStyles from '@mui/styles', simply add curly braces on makeStyles. So it becomes import { makeStyles } from '@mui/styles'. This way, it will run
your super cool. i love how you made me realise that looking into things is neccesary and needed if i want to evolve. thank you.
This kind of documentation walkthrough is very helpful. I don't see it very often on other channels. You should do it for other libraries and frameworks also(if you haven't already in your older videos), great stuff.
Thanks so much, most comprehensive and short tutorial which I could find online to get me going.
I'm glad to hear that Karl!
I am the one who is in severe need of a material UI course. And here is your video. THANKYOUUUU. BTW I am your regular student
Thank you!
It was so awesome. Thanks a lot!
Thanks for the video..came from after watching the Authentication part in Social media mern web app 7hrs video...Thanks again Man for ur contribution in Tech
Thanks for the video! I’m trying to crash-course my self into developing a web app from scratch. I found your video and this UI library to be very helpful
Thank you!
literally what I was looking for the other day. thank you ❤️
Thank you! ❤️
Those who dislike this great content are really something. with only this video I am good to go with material ui. thank you so much. And I have sure subscribe to your channel. thanks a lot
Thank you so much!
contacted taskade and they hooked me up, even one month later. Thanks guys!
My Favorite React UI library also!! Yeah Let's go in depth with it. Also Request a Next.js version!
Thanks for the idea!
Mui v5 with next would be great!
Right on time ya man. My employers want me to write some cards tomorrow. You made my Sunday awesome.
Enjoy the rest of your Sunday!
Hey are you into web development ?
@@66_vaibhavvarunkar60 ha Bhai
@@slmshady539 where I mean in which company ?
@@66_vaibhavvarunkar60 Bangalore sorry can't name it. Working as Reactjs Redux developer
This is so cool! I'm currently grinding to get my first job (self-thought) and this was super clean, clear and concise! Love it from Ireland bro.
Thank you Caolan. Greetings to Ireland!
the same here bro. Good luck on your interviews
this helps a lot. I watched the full 3 part series going over full stack web development and it was extremely helpful for learning how to setup the website but material UI was glossed over so fast in that video, especially the JS CSS stuff which was copy pasted. Helps a lot seeing that explored further.
Thank you so much for this video. It has helped me get started with MUI
Thank you for this video, Actually I just started your full stack MERN project series, and I was little bit confused about material UI but now I got clarity, thank you and your full stack series also incredible, Thank you 😊😊
Thank you so much!
By far my favourite channel to learn slightly above beginner level javascript. I appreciate you for taking your time to create these content. DON'T STOP!
Thank you! 🙌
You are the best in any web development tutorial for me man, keep up!
It's always a good day when you drop something new
Thank you!
Best tutorial I have seen so far.
You explain so nicely.
Thank you 🎉
Thank you 🙂One of my favorite UA-cam channels.
I made a second account to like + subscribe. No way i'll miss your videos now. Thanks so much!
I'm one of the guys who requested material-ui too please make more material-ui tutorials. 🥺🥺🥺 Thank you very much !!!
You are Inspiration to me ... just because of your videos I started learning reactjs..! #GOAT....Waiting for your second video on this.....
Keep it up
WOW.... you are the best in the world for me.... thanks a lot for such a nice lecturer on MatUi... Kudos ...
Wow! Realy nice tutorial. Thank you!
And i definitely need the cool shotcuts that you used around 40:35.
Awesome. You get a big like and an abbo :)
This is one of the best tutorial videos i've ever watched, thank you for doing this, great job !
oh man!
You are a live saver!
Love you a lot!❤️
I was trying to learn material ui by myself!
But i was stuck.
Hope this helps!
I read "you are a live server" damn LOL
Great Timing, I too had a request long back....Loved it..
Part 2 - please....ooo my demands..But I m damn sure everyone loved watching it....much love sir
Great tutorial, it was so easy to follow you and I`ve learnt a lot! Definitely would like to see the part 2! Is it already available?
I can't believe this is free content, thanks a lot. I am studying react and I like your videos. Thank you so much!
As I have said in 2 different accounts this guy is super talented sincere generous and gifted teacher.
Pls keep on with material ui sockets mern memories extensions
One of two best UA-cam channels
Thanks!
hey man, first of all, congrats on the channel, ive been learning a lot, thank you for that!
Just want to point a new video sugestion, what about some in depth video about MongoDB and express? Those are really helpful tools, we could learn a lot more from you!
Thanks!
Great idea Fred
Thank you! I really enjoyed the clear step by step process. Your video helped quickly grasp the basic organization of Material UI and how all the parts fit together.
3:46 👈 Start Here
Thanks mate i have been waiting for this big time
It's finally here!
Thank you so much. I wanted to learn the past version with a new version coming out this time. It has helped a lot and has been well applied to the current project.
Thank you very much man ! This video definitely helps us ❤️🔥🙏
I'm glad!
A great teacher who teaches how to read..You are great man
Thank you!
Whaat
I was juste thinking i need a course to learn material ui
First thing i find on youtube this video
Thanks a loot
Awesome!
Grid layout for cards is at 43:45 for anyone looking for this
This is an awesome tutorial, material-ui really makes ui good looking and easy. I will definitely give it a try, yeah please make advanced tutorial on material-ui, thank you so much !!!
Will do!
It's so helpful video about material Ui . I learnt so much, I am now starting to explore more in material Ui. Thanks
Oh boy, the timing! I'm creating a website for a customer and I'm using Material UI for the first time on it! Hope it comes out well. This video will definitely help me with that! Thank you 🙏
Good luck!
Hey! Adrian! How are you? I'm the crazy fan that how you care about us! I'm heartily request you to cover the second part of this video. Plz keep us more crazy and learnable!
part 2 of the material ui tutorial please, thank you so much, just to give a little bit back i always like and watch your videos
This guy is our man...He is our hero !! He uses windows...he uses VS Code...he uploads tutorial in JS framework/library...yes we want more complex MUI design !!
Explained Very Well! You are a great TEACHER.
I would love to see a part two! Excellent video, thanks!
Thanks Mark!
Awesome video...learnt a lot, Thank you very much. Yes, pls make a second part of it.
Helpful content. Especially about difference between component and component api docs. I learned very much thank you.
Great video dude, i find your channel and i love it
The Like to Dislike ratio says that all! Very Nice tutorial!
Thank you!
Thank you for creating this video. It inspired me to signup for your JavaScript Mastery course. I hope you create more videos on Material UI and React. I am working on some projects and this would be super helpful. I really appreciate your training.
Thank you Paul, enjoy the course!
Thanks for the video dude! Looking for the complex parts videos as well. Please upload soon!!!! Thanks again.
I liked how you changed the title to say 2022 even though this was made in the beginning of 2021
Yes, gotta do it for the SEO :)
@@javascriptmastery kinda greasy but i suppose you gotta do what you gotta do! could always just make an updated version so it's not as fake, but honestly i am nobody to tell you how to run your youtube channel
MUI v5 project coming soon :)
@@javascriptmastery Looking forward to it!
@@TheJason118511 I feel the same man. I have noticed this channel is churning 'the latest' tutorials out but when you come to learning it, dependencies are out of date and just one big head ache for a learner. Unsubbed because of that!
Amazing tutorial, thanks so much for putting this together!
Wow it's a great video making me understand well how to use Material UI and read the docs
I'm glad it helps! 😊
This is the best free software Ive seen. Respect.
Yes plz....make a vdo regarding complex MUI based..
Might do it if this one goes well!
23k views already 🌝
I love Material UI and it's dynamic range in customization. A video on theming would be awesome!!!
looking for the complex mui video🤩. Thanks a lot!
Thanks!
Im from Brazil, and u save me ❤️
Thank you so much for the amount of free content and impeccable quality.
Thank you!
Full quality content. Thanks for this tutorial.
Glad you like it!
@@javascriptmastery Also waiting for part 2
Thanks 😌 buddy for this nice course.
Keep it up 🚀