It's always been difficult to learn Material UI off the docs because there is so much to learn at once. Thank you so much for your help. Such a big help.
This is a MUI tutorial, of course, but the explanation on react states for handling the errors at the end was absolutely fantastic. So concise and clear at the same time! You don't know me, but I am an admirer of your teaching for quite some time now!
This is a pretty solid course, I like the way Shaun handle form submission, implement it from scratch. For one thing Shaun forgot to bind the input value to title and details to make the form input works properly, but we can fix it by adding or ; Anyhow this is a great tutorial, thank you Shaun walking us through with step by step instructions and explanations, It is a lot of fun learning building user interface quicky and easily with popular and powrful CSS library / framework; but if you have a figma design, vanilla css is still your best friend !!!
So far so good mate. I'm following all your tutorials. I will know all about material UI at the end. Fingers crossed. I know how to customize the default theme as well thanks to you. Thank you so much for all the tutorials. With love from Sri Lanka.
I would like to see Shaun create Nextjs + Prisma tutorial, Prisma seems a pretty solid and works pretty with all sorts of maintream frameworks such as Nexjts and it uses postgres (sq) as database, and it has visual cms that allows admins to enter data to the form input and making save easily, there are tons of cms database nowadays besides firebase and mongodb and they work seamlesly with Nextjs, prisma is one of them and we can learn postql which is another type of database. Hopefully Shaun consider create a tutorial series on this topic !!!
i've question, if we change the background color into black the textfield can't be seen. Any suggestion for change the color for the border of the textfield
What about using ternary operator like so: title === ' ' ? setTitleError(true) : setTitleError(false); details === ' ' ? setDetailsError(true) : setDetailsError(false); That also handles the issue.
I learned tailwind from you one years ago and now material ui. but i wish this tutorial being update to the last version of the mui (v5.14.5). that would be great !
Actually there is no need to learn Angular, because React and Vue dominates job markets these days, if you check angular github repo, the downloading info reveals its popularity is decreasing because of its complexity and typescript binding, so I suggest you cancel this idea and embracing the mainstream frameworks which is React/Next and Vue/Nuxt, and they make your life so much easy and making developing apps a lot of fun !!!
variant is like different state, e.g. an anchor tag can have hover, foucs, active, visited states / variants, typography components has six states / variants~h1, h2, h3, h4, h5, h6, etc.
@@maskman4821 Yeah but the typography component doesnt change anything except it gives them a different HTML tags in the console where as the variant prop ACTUALLY changed the font. The question imposed is: what is the use of changing the HTML tags by the component tag? Is it for CSS styling?
@@VS257 It is there to respect semantic html. For instance, suppose you want a heading to "look" like how "h5" looks in material UI default theme, but you need "h1" in your html just because it is heading and all of your other headings on the page are "h1". so in this case you would define your "variant" prop to be "h5" and your "component" prop to be "h1". as a result, your heading will now look like h5 but it will be rendered as h1 tag. so this way you get the style you want without breaking your (semantic) html
We don't need mern stack at all, people nowadays buid fullstack app with nextjs, check out Shaun's Nextjs tutorial series~ ua-cam.com/play/PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw.html
that is off topic, if you want to learn unity game development, there are tons of tutorials out there in youtube, I don't think Shaun would create such a tutorial series because it is not demanding, dude, get real 😂😂😂
We don't need mern stack at all, people nowadays buid fullstack app with nextjs, check out Shaun's Nextjs tutorial series~ ua-cam.com/play/PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw.html
@@KodiLearn definitely yes, Nextjs api route is one of the powerful feature, it lets you create backend easily, and we can deploy our nextjs fullstack app to a single server, this is the best part !!!
yeah, me either, I have watched plenty of material-ui tutorials before Shaun releases this series and to be honest I actually don't understand what they are talking about !!! 😅😅😅
This is like 10% of what text fields do. How about numbers? I haven't seen anyone make a tutorial on how to handle number inputs and that information is severely lacking.
Shaun is not only a Ninja Master, but in real life he is a terrific teacher, and that's why people loves his tutorials because he knows how to teach !!! 🤩🤩🤩
When a single component from a library is better than all your previous hard-coded input fields.. This is amazing, thank you so much shawn
It's always been difficult to learn Material UI off the docs because there is so much to learn at once. Thank you so much for your help. Such a big help.
This is a MUI tutorial, of course, but the explanation on react states for handling the errors at the end was absolutely fantastic. So concise and clear at the same time! You don't know me, but I am an admirer of your teaching for quite some time now!
Happy to hear that Arthur, and thank you for the kind words :)
Wow, what a relief! I've struggled for two days before watching this.. Appreciate your help a lot!!
This is a pretty solid course, I like the way Shaun handle form submission, implement it from scratch. For one thing Shaun forgot to bind the input value to title and details to make the form input works properly, but we can fix it by adding or ; Anyhow this is a great tutorial, thank you Shaun walking us through with step by step instructions and explanations, It is a lot of fun learning building user interface quicky and easily with popular and powrful CSS library / framework; but if you have a figma design, vanilla css is still your best friend !!!
I love the way you explain things.
Buddy, your course motivates me to learn English.
And your voice is so friendly, thank you
Great video! , just a small thing, rows is deprecated, is better to use minRows={4} in this case. Thanks for your great content!
for the bit at the end with setting the errors, a super concise way is to just use two lines:
setTitleError(!title);
setDetailsError(!details);
Sadly not
You can just do error={!title} and for details error={!details}. No need to create new states and if statements.
So far so good mate. I'm following all your tutorials. I will know all about material UI at the end. Fingers crossed. I know how to customize the default theme as well thanks to you. Thank you so much for all the tutorials. With love from Sri Lanka.
Best UA-cam channel to learn web developement, step by step
The best teacher in the world 😆
Definitely, I am pretty sure Master Ninja Shaun Pelling is No.1 teacher in planet earth without a doubt !!! 🥰🥰🥰
true
I would like to see Shaun create Nextjs + Prisma tutorial, Prisma seems a pretty solid and works pretty with all sorts of maintream frameworks such as Nexjts and it uses postgres (sq) as database, and it has visual cms that allows admins to enter data to the form input and making save easily, there are tons of cms database nowadays besides firebase and mongodb and they work seamlesly with Nextjs, prisma is one of them and we can learn postql which is another type of database. Hopefully Shaun consider create a tutorial series on this topic !!!
You are explaining really well! Great job!
Thank u men, I was lost, I sent you a hug from mexico!
i've question, if we change the background color into black the textfield can't be seen.
Any suggestion for change the color for the border of the textfield
Ey, you're amazing! Thank you so much, I'm learning SO MUCH
the Net Ninja is just the best
Hey guys, this video is slightly out of date as the makeStyles functionality was dropped in Material UI 5. Just heads up
What about using ternary operator like so:
title === ' ' ? setTitleError(true) : setTitleError(false);
details === ' ' ? setDetailsError(true) : setDetailsError(false);
That also handles the issue.
this works for me
title === " " ? setTitleError(false) : setTitleError(true);
I learned tailwind from you one years ago and now material ui.
but i wish this tutorial being update to the last version of the mui (v5.14.5). that would be great !
I watched your videos, very professional and very helpful.
You are a master !!
Thank you for sharing
Wow with you, material ui is easy to learn, could you teach how use with react-router-dom?
Informative and straight to the point! :)
You have a great voice!!!! Thanks for the video
Thank you!!
Thanks For your awesome tutorial series.
wow First comment
Always like before watching
Thank you so much 😀
Looking forward to next series.
Can you please make tutorial of Angular after this Material UI tutorial?
Actually there is no need to learn Angular, because React and Vue dominates job markets these days, if you check angular github repo, the downloading info reveals its popularity is decreasing because of its complexity and typescript binding, so I suggest you cancel this idea and embracing the mainstream frameworks which is React/Next and Vue/Nuxt, and they make your life so much easy and making developing apps a lot of fun !!!
In the typography section, I was not able to understand what is the use of variant and component. What is the exact use case there?
variant is like different state, e.g. an anchor tag can have hover, foucs, active, visited states / variants, typography components has six states / variants~h1, h2, h3, h4, h5, h6, etc.
@@maskman4821 Yeah but the typography component doesnt change anything except it gives them a different HTML tags in the console where as the variant prop ACTUALLY changed the font. The question imposed is: what is the use of changing the HTML tags by the component tag? Is it for CSS styling?
@@VS257 yeah, you are right, component only assigns html tag different name and does nothing which I don't understand why 😂😂😂
@@VS257 It is there to respect semantic html. For instance, suppose you want a heading to "look" like how "h5" looks in material UI default theme, but you need "h1" in your html just because it is heading and all of your other headings on the page are "h1". so in this case you would define your "variant" prop to be "h5" and your "component" prop to be "h1". as a result, your heading will now look like h5 but it will be rendered as h1 tag. so this way you get the style you want without breaking your (semantic) html
awesome content,awesome tutor
I'm trying to use an button click event and display certain logs on a textbox
Is it possible? I am relatively new to this
Thanks for this playlist. Just a question , why not just setTitleError( title == '' ) / setDetailsError ( details == '' ) ?
Isn't it better to use a variable for storing errors instead of storing this in state? It looks to be an easier solution for me.
so will we be creating error state for each textfield???
what if i want to add helperText to this? What will the condition for helperText be
Have you used electron bruv??
if needed to set helperText inside TextField in mui, helperText={emailError?"invalid input email":null}
Why you don't put semicolons in the import rows ?
man, why my error prop not giving red border effect ? how about yours ? always hard to replicate, even tho its so simple. where did I fuck up?
for just margin, why do we need to create a separate class??
Please Make Series of MERN Stack.
We don't need mern stack at all, people nowadays buid fullstack app with nextjs, check out Shaun's Nextjs tutorial series~ ua-cam.com/play/PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw.html
@@maskman4821 Thank You so much
Please, can you do a tutorial on how to make a vs code extension like emmet. please.
Thank you sensei ! Please make playlist next for Kotlin or C# sharp
that is off topic, if you want to learn unity game development, there are tons of tutorials out there in youtube, I don't think Shaun would create such a tutorial series because it is not demanding, dude, get real 😂😂😂
hi. can u exaplain how to customize in class component
Iam, I'm getting errors using @mui/styles, because I've installed Material-ui V.5. Can you help-me with this please?
import { styled } from '@mui/material/styles'
const MyField = styled(TextField)({
marginTop: 20,
marginBottom: 20,
display: 'block',
})
make sure you have it installed if not use
npm install @mui/styles
Can you please make MernStack course soon?
We don't need mern stack at all, people nowadays buid fullstack app with nextjs, check out Shaun's Nextjs tutorial series~ ua-cam.com/play/PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw.html
@@maskman4821 Can we create Rest Api in Next Js?
@@KodiLearn definitely yes, Nextjs api route is one of the powerful feature, it lets you create backend easily, and we can deploy our nextjs fullstack app to a single server, this is the best part !!!
@@maskman4821 oh thanks for helping. I will look into that
how to change placeholder color?
useref don't work on mui components
Many thanks :)
Please make a pdo course
Thank you so much
nice teacher
Material UI + Formik.... Please :)
Thanks Man...
thank you!!!
Next.js E-commerce with mongo
Think you!
setTitleError(title === '') should be enough
I don’t like material ui ... before these tutorials
yeah, me either, I have watched plenty of material-ui tutorials before Shaun releases this series and to be honest I actually don't understand what they are talking about !!! 😅😅😅
Best
Love from pakistan
This is like 10% of what text fields do. How about numbers? I haven't seen anyone make a tutorial on how to handle number inputs and that information is severely lacking.
ty
Supb
first xD
I watched your videos, very professional and very helpful.
You are a master !!
Thank you for sharing
Shaun is not only a Ninja Master, but in real life he is a terrific teacher, and that's why people loves his tutorials because he knows how to teach !!! 🤩🤩🤩
ty
thx