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.
@@PatrickRams 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 UA-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 UA-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!
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.
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!
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!
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!!!
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'
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.
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 } }) }
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...
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!
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.
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.
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.
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).
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
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
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??
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?
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!
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?
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();
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 new to React. But I prefer function components. Is there any drawbacks of using only function components? Because, writing class components is little more complex. And, I think function components is much more conciseness and readability. As also, I can see that this video was released on 2018, before react 16.8 happened. Any suggestions to me guys please :)
Hi Brad. My comment is not even about ReactJS, but I thought it would have great chances to be answered. I have a request if you don't mind. In my opinion, Laravel's official documentation is not clear enough for beginners and lacks example codes. Many times I got stuck and I couldn't even find the answers to my questions on Google because I didn't even know what I was looking for. I believe the same happens to many other people. It can be quite time consuming and really frustrating for beginners. I recommend you would create a solid introductory series where people could at least name all the technologies involved in Laravel and what exactly are they used for. Also all the alternatives we have and why should we should choose one over another depending on the situation. For example, I believe we have at least three different ways to access the database: raw SQL, Query Builder and Eloquent. It's really hard to learn a framework because all that fancy names they come up with, and when you think you learned something they come up with a bunch more. I think that just makes the learning curve steeper. In my example I just mentioned the database part, but these strange names are everywhere in Laravel and every time I read the manuals or watch videos about the subject, I feel like I have more questions than answers. I think that a good way to introduce the subject would be by telling us how you learned everything you know about Laravel, what were your misconceptions, so people wouldn't make the same mistakes if any. Sorry if my comment is a bit lengthy, but I believe my request is valid and would encourage learners. Thanks a lot in sharing your knowledge with us.
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 ???
Thank You so much Brad for your productions every your film help me so much. I have a little question why you are using material v20.3 not 3.4? for me v20.3 is better and "easier" to but have u got any other reasons?
That would be v 0.20.3, which is deprecated. I agree it's easier but that makes it all the more disappointing the video didn't use the current/future version. Also a pity the Confirm component didn't "loop" through the prop "values" rather than relying on cut/paste
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...
@@PatrickRams 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 UA-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 UA-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 ua-cam.com/video/dzOrUmK4Qyw/v-deo.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.
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.
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!
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
I wish this guy is my teacher where I study now. Perfect!
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
One of the best UA-cam tutor I have ever seen. Your videos on almost all technologies are awesome. Thanks a lot
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!
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!!!
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
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.
you can't imagine how I am grateful for such tutorials man you are god sent.
Traversy is actually the best teacher on the UA-cam, God bless your hard work in Jesus name.
I put my resume as " Trained by @Traversy Media" and get all JOBS. Thank you, sir...
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.
Man this is soooo helpful, just put into use for my current work! Thank you so much!!
I'm developer from Central América (El Salvador) i'm student too, thank you very much for this video is gold.
Your Video and Synology both are awesome, i am using synology from long time and its awesome, never had an issue with it.
Hello Brad, love from Afghanistan, you made web development very easy and simple for me. you are genius. thanks a lot.
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
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
}
})
}
It's been lots of fun ....can't wait for the back-end installation tutorial - thanks!
Mate I'm so glad I found you on UA-cam . Thousand thanks !
Commands used in this video:
npx create-react-app .
npm i material-ui
npm start
It's really useful. In one of my story, not exactly like this but this kind of approach is required. Thanks a lot 😊👍.
Brad you are one of the best and coolest tutors and guys ever!!!
I learn so much from all your videos. Appreciate all your dedication and hard work! Thanks!
Thanks for this video Brad! Hope you could make an update video using arrow functions.
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...
This is insane how clear this video is
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!
Great work Brad
damilare emmanuel thanks 😊
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.
Awesome videos. You are the best. In this video, some sections seem not to work the same as 4 years ago.
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.
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.
Quick, Simple, and very practical. Thanks a lot.
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).
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
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
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
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
ua-cam.com/video/-j8s0RNOZ8U/v-deo.html
I feel very energetic whenever i came across brad's new video
Thanks, I had not tried Material UI with React, its clean tutorial.
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
ua-cam.com/video/-j8s0RNOZ8U/v-deo.html
Very clear and well presented. Thank you.
Hi genius. Thanks for helping all of us.
Quick Question. Do you use windows in your everyday work? or linux?
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
ua-cam.com/video/-j8s0RNOZ8U/v-deo.html
Add a video about react class based and function based, when and why to use either of them
Materialize looks much nicer than Bootstrap imo.
It would be nice if you create same app with Vue.js and make a comparison) Will wait! Thanks for great tutorials!
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
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!
That's really amazing and great.
Please upload the video where the details saves in DB
Really thanks for the tutorial, Also can please some help how we use the radio and checkboxes here
Specially multiple checkbox
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?
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
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
So glad your using a material-ui structure :)
Brand thax a lot, I'm watching you since your JS fundamentals course, one more tme Thank You
Your videos are great, thanks for sharing your ideas with us.
Which theme are you using please ?? I will be grateful a lot 👏
Worked like a charm 👍
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();
Thanks Brad. Your videos are amazing. I've learned a lot.
Another GREAT VIDEO!!! Thank you Brad, looking forward to the next one!!!
Thanks! Nice and handy little project.
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...
Thanks for new videos brad Sir.....
another awesome thing to learn . Thanks Bred
Its simply awesome .Thankyou so much .
This is exactly what I was looking for. Thanks a ton..
Thank you, Brad!
I am new to React. But I prefer function components. Is there any drawbacks of using only function components? Because, writing class components is little more complex. And, I think function components is much more conciseness and readability.
As also, I can see that this video was released on 2018, before react 16.8 happened.
Any suggestions to me guys please :)
look for newer videos that cover the new version of ract
Great Video :). Helped a lot to design code for form
Thank you for the lesson
Thanks Brad ...! Learning a lot from your videos ...!
Your video saved me once again. Thank you so much this!
This was amazing! thanks Brad
Thank you for this, Brad!
how to align the form at the center? Should i use styles? But why Brad's form is aligned to the center then,hmm
It aligned to the left in my case
Hi Brad. My comment is not even about ReactJS, but I thought it would have great chances to be answered. I have a request if you don't mind. In my opinion, Laravel's official documentation is not clear enough for beginners and lacks example codes. Many times I got stuck and I couldn't even find the answers to my questions on Google because I didn't even know what I was looking for. I believe the same happens to many other people. It can be quite time consuming and really frustrating for beginners. I recommend you would create a solid introductory series where people could at least name all the technologies involved in Laravel and what exactly are they used for. Also all the alternatives we have and why should we should choose one over another depending on the situation. For example, I believe we have at least three different ways to access the database: raw SQL, Query Builder and Eloquent. It's really hard to learn a framework because all that fancy names they come up with, and when you think you learned something they come up with a bunch more. I think that just makes the learning curve steeper. In my example I just mentioned the database part, but these strange names are everywhere in Laravel and every time I read the manuals or watch videos about the subject, I feel like I have more questions than answers. I think that a good way to introduce the subject would be by telling us how you learned everything you know about Laravel, what were your misconceptions, so people wouldn't make the same mistakes if any. Sorry if my comment is a bit lengthy, but I believe my request is valid and would encourage learners. Thanks a lot in sharing your knowledge with us.
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 ???
Speaking of 2021 what changes do I have to do to make something like that? I can see the way you declare the states is different and so on...
Awesome and very cool explanation.
Thanks so much for keep sharing valuable ideas :) you are the best really enjoy every video you make
If the number of fields are too many, is it a good idea to use mobx instead of having states in the parent component ?
Tq finally im understanding react
at 18:38 now you have to use "import AppBar from 'material-ui/core/AppBar" .. notice the "core/" extra..
Awesome! Thanks 😎
Thanks "Brad" !
wich is better for the UI ? bootstrap or material ?
Would you say this example is using the "react hooks approach"?
Great video, a video going over email authentication form in react native for mobile would be great. Using a wamp server and mysql
This is awesome brad. Would you mind doing a udemy course on microservice architecture using node and docker
Thank You so much Brad for your productions every your film help me so much. I have a little question why you are using material v20.3 not 3.4? for me v20.3 is better and "easier" to but have u got any other reasons?
That would be v 0.20.3, which is deprecated. I agree it's easier but that makes it all the more disappointing the video didn't use the current/future version. Also a pity the Confirm component didn't "loop" through the prop "values" rather than relying on cut/paste
Excellent demo
Awesome!! Thank you for sharing. Something nice would be a next one but adding animations effects. Just a thought 😁