I am a dev from South Africa and my career would not be where it is today if I have never found this channel. I relate with you more than most youTubers. Thanks for all your hard work and dedication to your viewer and follwers. Great things are still coming your way.
@@ispatza i have been learning for like 4 months now, i did a github finder lesson following the tutorial, now i have been doing another one on my own, trying to find a community of react developers in S. A as well, to get help on some things, because i get stuck some places and it takes sooo long to get a solution. How about you?
@@sefean I started learning react late November 2019.i bought a course on Udemy by traverse Media and I'm also using a combination of TH-cam, stack overflow,freecode-camp, GitHub for when I get stuck...it took little more time for me to grab it's syntax..to see how it really works...l think I will be creating my first app this week...though challenging I'm enjoying react...... I think I like it more than javasript in a way.... Man,you can say it again learning this stuff on your own can be really challenging and frustrating... sometimes you get stuck on one problem for a days with no one to help you and you feel like giving up.....though not enough stark overflow and just googling, freecode-camp and some TH-cam has been very helpful... And I'm also isolated because I stay in Limpopo but i will be moving to Pretoria between next month an March......
you could also make your handleChange function so that it doesn't have to take an input paramtere change = e => { this.setState({ [e.target.name]: e.target.value }); } so then in your TextFields you'd have name='email' onChange={handleChange} for all of them, no need to be explicit about what text field gets changed, as the name prop already states that (this works for normal elements, probs should work for the material ui TextField too)
Wish I would've seen this (comment) before, lol. I took about 2 days to learn what a Curried Function was, that he was using for handleChange (the double arrow function, or Curried Function). But hell, I learned something new!
Even before the 4 minute mark, i was very impressed on how you explained this as well as show it visually in the component tree along with listing the methods being used. Seeing this visually makes a world of difference when it comes to seeing how this all works, bravo sir!
Just want to say that I so appreciate your channel! I started out not knowing anything about web development and began teaching myself at the beginning of the year. Most of my learning process I've been watching your videos and doing my own side projects. It feels so good to be at the point where I can learn React. Thanks for all you do & I look forward to learning more and growing my budding freelancing career.
That's the biggest coincidence I had! I just finished building my API to do one user registration using one multi-step form, and now I was building my frontend with React and MaterialUI, and then I received this notification. Just amazing!!!
Thanks to you, my comprehension to Material UI with ReactJS has fulfiled, now I am able to build ReactJS Projects with beautiful design quickly. Thank you so much Brad
Thanks! You saved my life, You helped me to understant the logic between Parent and child, so I could finish the project using your logic and the Material UI Stepper
Thank you so much. I followed all the steps and the project ran really well. You have helped me a lot. You're awesome. Keep up this good work for tutoring. Have a lovely day!
For this tutorial it's fine, but if you're going to go out on your own and build something, you may find trouble with the material-ui installed in this tutorial. Don't do the command 'npm install material-ui' when first installing material-ui. Instead do 'npm install npm install @material-ui/core'. The reason is that when you download just the regular material-ui, it gives you the beta version, which means some things don't work. When I tried to build a starter app, I wasn't able to get a basic AppBar imported with the regular material-ui, but when I went to change to the core version, I was able to. Here was what what helped me in my decision-making, from the error I got: github.com/babel/babel/issues/9026.
i did as you recommended and I keep getting this error no matter what I've tried.The error reads: >>Module not found: Can't resolve '@material-ui/AppBar'
Note that the version of Material UI used is extremely old. Not only do most of the props of the Material UI components in the new versions are very different but the components themselves as well (e.g. instead of RaisedButton).
you sir are a gentleman and a scholar....absolutely brilliant mate....its a shame you can only like the video once,i wud b pressing it the whole day....cant wait for the next Vid...
Yes, break/rebreak! I kept putting code in the wrong form. I also got burned by some of the auto-complete features of Visual Studio. I waited until I finished watching this video before disabling them.
Hello Travis, I appreciate you providing this walkthrough. At time stamp 36:35 you walk us through creating the listItems.I found it easier to turn values into an array with variable = Object.entries(values). From there I used destructuring to iterate through the values with the following variable.map(([ field, value]) => ( )). How do you feel about the approach I recommended?
Great tutorial, a lot of the things have changed because that's how code works. But still a good guide for someone to familiarize themselves. Some of the components don't work anymore since Material-ui updated a lot of their components. Importing them in a different way should work and reading the new documentation.
Loved it; even though I had to restart the project several times (over anxious!) I kept putting code in the wrong form. I also got burned by some of the auto-complete features of Visual Studio. I waited until I completed the project (Success!) before disabling them. Thank you very much.
my solution for handle input, storing the value in a variable and referencing it..... worked just fine handleChange = input => (e) => { const numValue = e.target.value this.setState((prevState, props) => { return { [input]:numValue } }) }
Hi Brad, I don't know where to post this but I would like to see the comparison between different deployment platforms. For example, it would be great to know the difference between DigitalOcean , Heroku or even Amazon Elastic Beanstalk. I tried searching but can't quite understand about their pricing, how they actually works and so on. It would be great if you make this kind of video for beginners. It would be beneficial to learn from an experienced one like you. Thanks for reading!
Wouldnt it be better to maintain a set of separate states on each component for onChange and only update the Parent State on Continue and Back , So that the whole form component does not re-render on every single change?
it was really good , i always used to watch your video tutorials ,because you do all things practically not on slides and mockups ,Can you please one series on react-native redux and firebase a full fledge app
Thank You Brad for this Video... Really got a lot from this. I am trying to Capture the Value for Radio input in Class Component. Finding it Difficult.
Thank you for interesting video👍 Small points, when you change state based on current state , like yout prevStep, nextStep methods, better solution is pass callback to setsState instead of object
ERROR: The prop `theme` is marked as required in `ThemeProvider`, but its value is `undefined` FIX: import { ThemeProvider as MuiThemeProvider, createMuiTheme, } from "@material-ui/core/styles"; const theme = createMuiTheme();
Pro tip: double click on a word to select all of the text (stops at spaces, full stops etc). Also, surely having a Header component for the top bar which takes a title prop rather than having the AppBar included in every component??
at 9:40 it's recommended to use the callback version of setState this.setState(prevState => ({step: prevState.step+1})) reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
Awesome video, Brad! It would be awesome if you'd make a Material UI tutorial. Everytime I try to use it I get stuck especially with creating a navigation bar, so if you have time, please make a tutorial for it. Thanks!
What extension enabled the "imp tab" shortcut to import the module name, from the module @18:01...it isn't the ES7/React/Redux/GraphQL/React-Native snippets that we installed in the beginning because I couldn't use the same shortcut he did even though I have that extension above installed....does anyone know? Thanks.
I'm fairly green when it comes to programming and had to watch his video on setting up Visual Studio Code before following along with this video. He goes through a bunch of helpful extensions on that video and one of them enabled imp tab.
11:05 Can you explain my what happend? anyone? handleChange = input => { console.log(input); return e => { this.setState({ [input]: e.target.value }); } }; what is going here? I don't understand . Why here is function inside function and have these values.
i recently admitted into CSE, in a local university, i'm planing to spend 4 year for only to study a language deeply , from first to last ,,, if i want to get a great job in future ,,, what programming language u suggest me sir ??? JS vs Python ???
Do i need to install redux in order to get this to work? I'm stuck wih an error at the bottom of the UserForm.js file where it says "export default UserForm; ". The error on the browser reads: "Parsing error: Unexpected Token "(on that line i specified)
Can someone break down this code for me I don't quite get it. handleChange = input => e => { this.setState({ [input]: e.target.value }); }; The double arrow is confusing me perhaps write it out with no refactoring?
Thanks Brad, great video, as always, I've learned a lot. I would highly recommend a 'connect to backend'-video with Laravel, but thats just my favourite backend, ok, Django is cool, too...
I am a dev from South Africa and my career would not be where it is today if I have never found this channel. I relate with you more than most youTubers. Thanks for all your hard work and dedication to your viewer and follwers. Great things are still coming your way.
Hi im also from SA! hahaha
Hey, i am also a dev from S.A well beginning, mostly in react. Hoping to get the most out of this channel as well
@@sefean how far are you now, learning React...
@@ispatza i have been learning for like 4 months now, i did a github finder lesson following the tutorial, now i have been doing another one on my own, trying to find a community of react developers in S. A as well, to get help on some things, because i get stuck some places and it takes sooo long to get a solution. How about you?
@@sefean I started learning react late November 2019.i bought a course on Udemy by traverse Media and I'm also using a combination of TH-cam, stack overflow,freecode-camp, GitHub for when I get stuck...it took little more time for me to grab it's syntax..to see how it really works...l think I will be creating my first app this week...though challenging I'm enjoying react...... I think I like it more than javasript in a way....
Man,you can say it again learning this stuff on your own can be really challenging and frustrating...
sometimes you get stuck on one problem for a days with no one to help you and you feel like giving up.....though not enough stark overflow and just googling, freecode-camp and some TH-cam has been very helpful...
And I'm also isolated because I stay in Limpopo but i will be moving to Pretoria between next month an March......
you could also make your handleChange function so that it doesn't have to take an input paramtere
change = e => {
this.setState({
[e.target.name]: e.target.value
});
}
so then in your TextFields
you'd have
name='email'
onChange={handleChange}
for all of them, no need to be explicit about what text field gets changed, as the name prop already states that
(this works for normal elements, probs should work for the material ui TextField too)
awesome
I saw this before here in this video of Brad's th-cam.com/video/dzOrUmK4Qyw/w-d-xo.html
I like your suggestion. [e.target.name] makes usages of [ ] far less confusing.
Wish I would've seen this (comment) before, lol. I took about 2 days to learn what a Curried Function was, that he was using for handleChange (the double arrow function, or Curried Function). But hell, I learned something new!
@@Colstonewall Bummer! And I thought that curried function is the one written by an H1B.
Even before the 4 minute mark, i was very impressed on how you explained this as well as show it visually in the component tree along with listing the methods being used. Seeing this visually makes a world of difference when it comes to seeing how this all works, bravo sir!
Just want to say that I so appreciate your channel! I started out not knowing anything about web development and began teaching myself at the beginning of the year. Most of my learning process I've been watching your videos and doing my own side projects. It feels so good to be at the point where I can learn React. Thanks for all you do & I look forward to learning more and growing my budding freelancing career.
That's the biggest coincidence I had! I just finished building my API to do one user registration using one multi-step form, and now I was building my frontend with React and MaterialUI, and then I received this notification. Just amazing!!!
I have watched your react crash course (amazing tutorial) and now I am just watching everyone of your react videos in the React Projects playlist
same here!😀
Thanks to you, my comprehension to Material UI with ReactJS has fulfiled, now I am able to build ReactJS Projects with beautiful design quickly. Thank you so much Brad
One of the best TH-cam tutor I have ever seen. Your videos on almost all technologies are awesome. Thanks a lot
Thanks! You saved my life, You helped me to understant the logic between Parent and child, so I could finish the project using your logic and the Material UI Stepper
I wish this guy is my teacher where I study now. Perfect!
I'm developer from Central América (El Salvador) i'm student too, thank you very much for this video is gold.
Thank you so much. I followed all the steps and the project ran really well. You have helped me a lot. You're awesome. Keep up this good work for tutoring.
Have a lovely day!
Traversy is actually the best teacher on the TH-cam, God bless your hard work in Jesus name.
you can't imagine how I am grateful for such tutorials man you are god sent.
I put my resume as " Trained by @Traversy Media" and get all JOBS. Thank you, sir...
Mate I'm so glad I found you on TH-cam . Thousand thanks !
Brad you are one of the best and coolest tutors and guys ever!!!
For this tutorial it's fine, but if you're going to go out on your own and build something, you may find trouble with the material-ui installed in this tutorial.
Don't do the command 'npm install material-ui' when first installing material-ui. Instead do 'npm install npm install @material-ui/core'. The reason is that when you download just the regular material-ui, it gives you the beta version, which means some things don't work. When I tried to build a starter app, I wasn't able to get a basic AppBar imported with the regular material-ui, but when I went to change to the core version, I was able to. Here was what what helped me in my decision-making, from the error I got: github.com/babel/babel/issues/9026.
i did as you recommended and I keep getting this error no matter what I've tried.The error reads: >>Module not found: Can't resolve '@material-ui/AppBar'
@@jessejulian9069 I can't get past this error either, it's super annoying
Haven't even watched it yet but I still smashed that like button cause I know its gonna be awesome!!
Same!
Same here
This is what I also do every time xD
Watched it all. Can confirm: is awesome
Note that the version of Material UI used is extremely old. Not only do most of the props of the Material UI components in the new versions are very different but the components themselves as well (e.g. instead of RaisedButton).
Your Video and Synology both are awesome, i am using synology from long time and its awesome, never had an issue with it.
you sir are a gentleman and a scholar....absolutely brilliant mate....its a shame you can only like the video once,i wud b pressing it the whole day....cant wait for the next Vid...
Awesome simple example! So great that you started by showing the end result so I know whether or not this video was what I was looking for.
Great work Brad
damilare emmanuel thanks 😊
Hello Brad, love from Afghanistan, you made web development very easy and simple for me. you are genius. thanks a lot.
It's been lots of fun ....can't wait for the back-end installation tutorial - thanks!
Awesome video! Congarts, you have helped me a lot. It really took me a long time to find a practical solution / tutorial for a mutli-step form.
hey did you by any chance use material ui@4.11.2? because I can not get it to work
Man this is soooo helpful, just put into use for my current work! Thank you so much!!
I learn so much from all your videos. Appreciate all your dedication and hard work! Thanks!
This is insane how clear this video is
Thanks Brad, looking forward for the back end piece, i am going through the react course now and this was fun to break/rebreak and figure it out
Yes, break/rebreak! I kept putting code in the wrong form. I also got burned by some of the auto-complete features of Visual Studio. I waited until I finished watching this video before disabling them.
It's really useful. In one of my story, not exactly like this but this kind of approach is required. Thanks a lot 😊👍.
Hello Travis, I appreciate you providing this walkthrough. At time stamp 36:35 you walk us through creating the listItems.I found it easier to turn values into an array with variable = Object.entries(values). From there I used destructuring to iterate through the values with the following variable.map(([ field, value]) => ( )). How do you feel about the approach I recommended?
yes we can
Another GREAT VIDEO!!! Thank you Brad, looking forward to the next one!!!
I feel very energetic whenever i came across brad's new video
Thanks for sharing such a valuable content Sir.
vijay kumar you’re welcome
Hi! I want to share some advance way of working with multi step form
th-cam.com/video/-j8s0RNOZ8U/w-d-xo.html
Quick, Simple, and very practical. Thanks a lot.
at 18:38 now you have to use "import AppBar from 'material-ui/core/AppBar" .. notice the "core/" extra..
Great tutorial, a lot of the things have changed because that's how code works. But still a good guide for someone to familiarize themselves. Some of the components don't work anymore since Material-ui updated a lot of their components. Importing them in a different way should work and reading the new documentation.
Really great video. I was able to implement this in my project, Way to go Brad!
Hi! I want to share some advance way of working with multi step form
th-cam.com/video/-j8s0RNOZ8U/w-d-xo.html
Loved it; even though I had to restart the project several times (over anxious!) I kept putting code in the wrong form. I also got burned by some of the auto-complete features of Visual Studio. I waited until I completed the project (Success!) before disabling them. Thank you very much.
my solution for handle input, storing the value in a variable and referencing it.....
worked just fine
handleChange = input => (e) => {
const numValue = e.target.value
this.setState((prevState, props) => {
return {
[input]:numValue
}
})
}
Thank you Brad for all these free videos! I love your content and they helped me so much i had to buy 3 of your courses on Udemy!! thanks for all this
Hi Brad, I don't know where to post this but I would like to see the comparison between different deployment platforms. For example, it would be great to know the difference between DigitalOcean , Heroku or even Amazon Elastic Beanstalk. I tried searching but can't quite understand about their pricing, how they actually works and so on. It would be great if you make this kind of video for beginners. It would be beneficial to learn from an experienced one like you. Thanks for reading!
So glad your using a material-ui structure :)
I was struggling to understand the concept of React (and also new js frameworks) Thanks Brad you made one more time everythin very easy to understand.
Hi! I want to share some advance way of working with multi step form
th-cam.com/video/-j8s0RNOZ8U/w-d-xo.html
Wouldnt it be better to maintain a set of separate states on each component for onChange and only update the Parent State on Continue and Back , So that the whole form component does not re-render on every single change?
Brand thax a lot, I'm watching you since your JS fundamentals course, one more tme Thank You
Very clear and well presented. Thank you.
Thanks, I had not tried Material UI with React, its clean tutorial.
Thanks for new videos brad Sir.....
Thanks for this video Brad! Hope you could make an update video using arrow functions.
it was really good , i always used to watch your video tutorials ,because you do all things practically not on slides and mockups ,Can you please one series on react-native redux and firebase a full fledge app
Awesome videos. You are the best. In this video, some sections seem not to work the same as 4 years ago.
Thanks Brad ...! Learning a lot from your videos ...!
Thank You Brad for this Video... Really got a lot from this.
I am trying to Capture the Value for Radio input in Class Component. Finding it Difficult.
Thank you for interesting video👍 Small points, when you change state based on current state , like yout prevStep, nextStep methods, better solution is pass callback to setsState instead of object
Someone should comment or do an update on the outdated Material-ui dependency becuae it no longer works and this project is based on it working
ERROR: The prop `theme` is marked as required in `ThemeProvider`, but its value is `undefined`
FIX:
import {
ThemeProvider as MuiThemeProvider,
createMuiTheme,
} from "@material-ui/core/styles";
const theme = createMuiTheme();
Worked like a charm 👍
another awesome thing to learn . Thanks Bred
Its simply awesome .Thankyou so much .
Thanks! Nice and handy little project.
Awesome and very cool explanation.
Thanks Brad. Your videos are amazing. I've learned a lot.
Great video. It was very helpful. Good job!
This is exactly what I was looking for. Thanks a ton..
Your videos are great, thanks for sharing your ideas with us.
Thank you for this, Brad!
Your video saved me once again. Thank you so much this!
Commands used in this video:
npx create-react-app .
npm i material-ui
npm start
This was amazing! thanks Brad
Thanks so much for keep sharing valuable ideas :) you are the best really enjoy every video you make
Pro tip: double click on a word to select all of the text (stops at spaces, full stops etc). Also, surely having a Header component for the top bar which takes a title prop rather than having the AppBar included in every component??
I agree totally. A "Stepper" would have been nice too so the user knows how many steps are coming
Thanks Brad . Always great tutorials :)
at 9:40 it's recommended to use the callback version of setState
this.setState(prevState => ({step: prevState.step+1}))
reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
It would be nice if you create same app with Vue.js and make a comparison) Will wait! Thanks for great tutorials!
Awesome video, Brad!
It would be awesome if you'd make a Material UI tutorial. Everytime I try to use it I get stuck especially with creating a navigation bar, so if you have time, please make a tutorial for it.
Thanks!
Great Video :). Helped a lot to design code for form
What extension enabled the "imp tab" shortcut to import the module name, from the module @18:01...it isn't the ES7/React/Redux/GraphQL/React-Native snippets that we installed in the beginning because I couldn't use the same shortcut he did even though I have that extension above installed....does anyone know? Thanks.
I'm fairly green when it comes to programming and had to watch his video on setting up Visual Studio Code before following along with this video. He goes through a bunch of helpful extensions on that video and one of them enabled imp tab.
@@technicalogical5681 I did install them but that shortcut didn't work for me.
Add a video about react class based and function based, when and why to use either of them
That's really amazing and great.
Please upload the video where the details saves in DB
Finally OUUUF thank god , another priceless gold content again..... :)
11:05 Can you explain my what happend? anyone?
handleChange = input => {
console.log(input);
return e => {
this.setState({ [input]: e.target.value });
}
};
what is going here? I don't understand . Why here is function inside function and have these values.
Hi genius. Thanks for helping all of us.
Quick Question. Do you use windows in your everyday work? or linux?
great tutorial thank you..saved me lots of time
Really thanks for the tutorial, Also can please some help how we use the radio and checkboxes here
Specially multiple checkbox
i recently admitted into CSE, in a local university, i'm planing to spend 4 year for only to study a language deeply , from first to last ,,, if i want to get a great job in future ,,, what programming language u suggest me sir ??? JS vs Python ???
How to remove the hamburger menu in the top left corner? It belongs to AppBar, but I have not found a way to remove it.
Brad thank you! This is helpful!
Awesome! Thanks 😎
Do i need to install redux in order to get this to work? I'm stuck wih an error at the bottom of the UserForm.js file where it says "export default UserForm; ". The error on the browser reads: "Parsing error: Unexpected Token "(on that line i specified)
Thank you, Brad!
Can someone break down this code for me I don't quite get it.
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
The double arrow is confusing me perhaps write it out with no refactoring?
Thanks Brad, great video, as always, I've learned a lot. I would highly recommend a 'connect to backend'-video with Laravel, but thats just my favourite backend, ok, Django is cool, too...
If the number of fields are too many, is it a good idea to use mobx instead of having states in the parent component ?
Great tutorial thank you very much
Well explained. Thanks !
Great video. Helped a lot.
Great!! Go Ahead Bro.
Awesome video, I just started teaching react js on my channel