Brad you must be the most prolific Educational channel on you tube. Not only prolific with the content, but also excelling with the quality of the content. You are a masterful developer. And us mere mortals can only watch in awe, and hopefully in the process learn something too. Great work yet again.
I just hate those who dislike these videos, considering it's free, goood stuffs on top of all, great explanations!!! "wanaboa saaanaaaa, kama vipi wapitilize tuuu si kuchafua" Oooohps that's swahili, Sooo upset. Keep it up Brad
Wow, you really help me out on this react stuff, from the basic now to may favorite css framework. you made me cry, i can't explain how important your channel is for those people like me who relies self studying.
Thank you so much for giving us more react content. And I was wondering about using Material UI and how it worked with react. Now I get to have it explained by the best 😎🔥
I never thought I would be so excited to get a notification about a youtube video about learning. Seriously man you are the best. Thank you for doing these.
Another great video Brad. Here's a small suggestion by the way :to clean up trash from your integrated terminal you can just type clear and it will be clean up clutter , that works for me. That works down for me.
I have just remake this sample application with the latest version of Material UI (3.6.2) with TypeScript, fetch vs Axios, and a number of improvements here and there. It was a challenge but definitely worth the effort.
Hi, thank you for your great tutorials! You already helped me a lot! With Material UI v4 everything changed, I've got a shit load of issues (a lot of imports, dependencies..stuff they don't list very clearly in their documentation). Don't know why they changed it so dramatically. I've been struggling for hours now. Do you happen to have an updated tutorial with the new version of Materialize? I keep looking but..nothing. Sorry, but there are so many guys out there who think that can make a tutorial when all they do is to code mechanically and admire themselves on the screen. For beginners this can be a hell. That's why I'm one of your subscribers...
Hey Brad! Thanks a lot for your great videos! I see that you use the shortcut "rcc" then move the export part to bottom. Instead if you type "rce" and use that snippet, it will export at bottom like you want.
Hi Brad! You can also use npx create-react-app "projectDirectory", which does the setup in one line without needing to configure the CLI :) Thanks for making this tutorial on Material UI!
I am getting an error at 18:28 index.js:2178 Warning: React does not recognize the `primaryText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `primarytext` instead. If you accidentally passed it from a parent component, remove it from the DOM element How do i fix it ?
If we use 'npx create-react-app app-name', we can use it without having installed create-react-app. Npm will download and run it from the npm registry (store of all the packages). This ensures you run the latest version of create-react-app.
Great tutorial, as always. The more I learn the more all of this makes sense. Would you say this is production ready? Is there anything you would do differently on a comercial website?
up until now, Ive trusted everything you've taught us but...safesearch='true' to exclude the good stuff?? How could you??!! haha, jk. Great vid, awesome functionality. Like everyone else says, endlessly thankful for this channel and a new upload is like a new Christmas present.
Thanks so much for the tutorial Brad! I've been trying to apply this to a slightly different design where the search input is in a sidebar and I'm wondering if you can give any examples of how I'd go about rendering the images outside of the search component?
At some point could you please do either an extension to this or just a full Styling Material-Ui video. The few times I have used Material-UI I found that part very confusing. For instance just to change the app bar background there was like 4 different ways and with each I felt like I was fighting the framework.
I noticed that the grid isn't responsive. Would we just have to create media queries in the app.css file rather than hardcode the ? Or is there a way to make it responsive without using app.css?
I am curious Brad how do you pick up these libraries so fast. I had a look at the documentation and to me its difficult to understand. Do you have another resource like a book you learn this from? For example themeProvider documentation was hard to find had to search for it.
What would be the best code to change the image results based upon the select list value. When I try with the state it refreshes based upon the previous state value for some reason.
Idk if you still need to know but the first parameter, e, is used in react to basically tell that function that what the event is. It could be a click, it could be a key press. In Brads, case, it's meant to tell react that the button he was pressing on is the actual event. Basically the e helps to tell the function what the event is (key press, mouse click) and to which element on the DOM to apply that event to.
You get three values back and in order to use the "value" output, he needs to put in "e" and "index" as a dummy variable so that he can extract the "value" variable. Does that make sense?
Should cover how to make multi filter search. Don't know if pixabay api has more ways to filter out searches besides a query string. I am looking to build a search feature with pagination, sorting, and multiple properties to filer by.
tnx alot man.this helped me alot to figure out how to fetch from api in react and how to manipulate that data for my project...Also i have one question: what u think about maping those images in parent component when u render child component, where props will be single img object?
I have two questions 1- Wouldn’t it be better if we have state object in App component instead of Search Bar ? 2- Wouldn’t it be better idea to store api key and url in separate file instead of storing them inside state object since it has nothing to do with state ?
Great tutorial! Thanks ! :D How do I get specific photos you can search on? And how can I make sure that when your at the page the pictures are already shown and you don't need to search it.
Hey, Amazing video! I just want to ask why do you need to chech propTypes for images, are you chacking if the object you passing is an array? Can anyone explain to me please? Thanks!
Brad, it's such a lame question, but how do you get this nice colorization of React Components (light turquoise color or )? Mine is just the same blue color, is it VS Code settings or do you need a special plugin to change that?
Maybe too late, but I noticed that every time you type a letter it shows you two arrays of images??? Is this expected? I think this is because you call setState() twice so it renders twice? But how can we prevent it from happening? By the way, I did this app on my own and same thing happens???
Sunil Kumar and someone would have said the opposite. I can not please everyone. I just do what i do. Not trying to be disrespectful im just sick of the “you should haves” because there is NEVER anything that is perfect. So for anyone else, it is fine to mention another tech but please don’t tell me i should have done this or that, its just discouraging. Not triggered or anything like that, just a note for the future
Traversy Media Yes it irks me when people tell you what to do and what you should've done. They can make their own tutorials if they aren't satisfied. Love your channel Brad!
Sorry I didn't mean that. You are right though. I was just curious about ant design so I just said. I'm kind of sick of that also but this time I just said. Sorry for that.
Hello Brad, nice tuto as usual. But my images are not rendered. I notice that hotlinking is forbidden but it works for you. How can I do to solve this issue?
Can you please give the name of plugin of module import hints? I cannot get it working properly with my VSCode configuration. Or even better, whole list of plugins you are using during particular tutorial (ss is enough). For a long time I was using Atom, but have some serious issues in buggy release and I had to switch to VSCode.
I was just thinking about starting React + Matetial UI project for practicing, and you post this video... Are facebook and google selling data about us to you? 😂
Very good! You're very nice teacher! But could you make a project on Php with modern framework and using API such as Cryptopay for Slack bot? If it's interesting for you, I'm very glad to see this tutorial from you in the near future. You'r best!
@lennz kravitz It’s like the same saying once you go black you never go back :D Once you turn to JS framework specially React you will hate all other frameworks.
i would use static components with materialize and dynamic components with material-ui. i see not much difference in these two. i will avoid using js api in life cycle method while i can do with material ui react components ( for example Drawer or sideBar in material UI which u have to use jquery or materiliaze M js in materializecss) .i think we can use componentwillmount or componentdidmount method and react "refs" for using external js api. the problem with materialize is overriding your original css styles while material-ui doesn't.
Great tutorial. But I am having a lot of trouble installing Axios and Material_UI. Keep getting error code ELIFECYCLE, errno 1. Please advise how to fix it. Thanks
my grid tile isnt showing and in console its giving me a bunch of errors like 1) react.development.js:315 Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead. 2) * Move code with side effects to componentDidMount, and set initial state in the constructor. * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder. Please update the following components: EnhancedButton, TextField etc
When I try to install the React App on my Mac, I get the error: shell-init: error retrieving current directory: getcwd: cannot access parent directories: Permission denied path.js:1167 Pls, anyone knows how to solve this? Tx!!!
Brad you must be the most prolific Educational channel on you tube. Not only prolific with the content, but also excelling with the quality of the content. You are a masterful developer. And us mere mortals can only watch in awe, and hopefully in the process learn something too. Great work yet again.
+1
even though i never use react and Material UI, i understood the whole video thanks to your way of teaching.
thank you, you're unique on youtube.
I love to hit the like button without even watching your videos because I am 100% sure your contents are the best...
Tech Nepal me 2
I also did that
I just hate those who dislike these videos, considering it's free, goood stuffs on top of all, great explanations!!!
"wanaboa saaanaaaa, kama vipi wapitilize tuuu si kuchafua" Oooohps that's swahili,
Sooo upset.
Keep it up Brad
Why do you feel the need to comment on 9 dislikes, that's 0.75% of 1200 (current likes).
Wow, you really help me out on this react stuff, from the basic now to may favorite css framework. you made me cry, i can't explain how important your channel is for those people like me who relies self studying.
Thank you so much for giving us more react content. And I was wondering about using Material UI and how it worked with react. Now I get to have it explained by the best 😎🔥
I never thought I would be so excited to get a notification about a youtube video about learning. Seriously man you are the best. Thank you for doing these.
Great thanks! If you like the “export default” to be at the end you can use “rce” instead of “rcc” 👍
It just amazes me that people could actually give this a thumbs down. Nice work, Brad!
Kloud9Creative thanks man. It happens. People do it before watching the video so it is impossible for me to make a video with 0 dislikes
Another great video Brad.
Here's a small suggestion by the way :to clean up trash from your integrated terminal you can just type clear and it will be clean up clutter , that works for me.
That works down for me.
It is speciric, very well structured and designed tutorial with room for more development which makes it ideal for a learning project. Great one man
I was with you all the way, finished my first react tut. Now on to the next tut, thanks man.
This guy makes best javascript tutorials!
It's actually fun to try to do it with the new version. Don't give up to this one!
I hope one day, you will shine some light on ML, machine learning
Me too, got some more to learn before I am ready
Traversy Media, hearing from you!! I can live with that preparing for it
I have just remake this sample application with the latest version of Material UI (3.6.2) with TypeScript, fetch vs Axios, and a number of improvements here and there. It was a challenge but definitely worth the effort.
Brad at 4:15: use what ever you want
Me: proceeds to use Microsoft Word as text editor
Hi, thank you for your great tutorials! You already helped me a lot! With Material UI v4 everything changed, I've got a shit load of issues (a lot of imports, dependencies..stuff they don't list very clearly in their documentation). Don't know why they changed it so dramatically. I've been struggling for hours now. Do you happen to have an updated tutorial with the new version of Materialize? I keep looking but..nothing. Sorry, but there are so many guys out there who think that can make a tutorial when all they do is to code mechanically and admire themselves on the screen. For beginners this can be a hell. That's why I'm one of your subscribers...
Hey Brad! Thanks a lot for your great videos! I see that you use the shortcut "rcc" then move the export part to bottom. Instead if you type "rce" and use that snippet, it will export at bottom like you want.
You seem to always know exactly what I need and you just put it up.
U r just awesome maan Respect for u.so so proud to be ur subscriber
Sailesh Patra please sub me
Agree with you
Cannot say more to thank you, really like your course, clear and useful. Really help me a lot!!! Thank you!
Finding it a little bit daunting getting my head around this material ui way of doing things!!!
Hi Brad!
You can also use npx create-react-app "projectDirectory", which does the setup in one line without needing to configure the CLI :)
Thanks for making this tutorial on Material UI!
Best in my subscribed list . You are my teacher
woow....i have been waiting for such video..Thanks very much Mr.Brad,Hope to see one on NEWS api if possible.GOD BLESS YOU
YESSS!! I was looking for a project like this! THANK YOU SIR BRAD!!
Wow , really salute your pace of producing tuts. nice tut :)
Thank you sooo much Brad!!. This is really what i wanted and got it at the right time. GOD bless you man
I am getting an error at 18:28
index.js:2178 Warning: React does not recognize the `primaryText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `primarytext` instead. If you accidentally passed it from a parent component, remove it from the DOM element
How do i fix it ?
This is a high-quality tutorial! Thanks man.
If we use 'npx create-react-app app-name', we can use it without having installed create-react-app. Npm will download and run it from the npm registry (store of all the packages). This ensures you run the latest version of create-react-app.
Great tutorial, as always. The more I learn the more all of this makes sense.
Would you say this is production ready? Is there anything you would do differently on a comercial website?
up until now, Ive trusted everything you've taught us but...safesearch='true' to exclude the good stuff?? How could you??!! haha, jk. Great vid, awesome functionality. Like everyone else says, endlessly thankful for this channel and a new upload is like a new Christmas present.
Great stuff. Very cool project. TQVM!!!
Thanks so much for the tutorial Brad! I've been trying to apply this to a slightly different design where the search input is in a sidebar and I'm wondering if you can give any examples of how I'd go about rendering the images outside of the search component?
Sir, you're the next 'The New Boston' :)
Thanks brad much love from Kenya
NIce to see my country mate here, where is the js community man? I'm surviving as a lone ranger here and would really appreciate the company
Another terrific video course. thank you
25:05 How can I link every array number to a different page.. How to pass array data to another page in React?
At some point could you please do either an extension to this or just a full Styling Material-Ui video. The few times I have used Material-UI I found that part very confusing. For instance just to change the app bar background there was like 4 different ways and with each I felt like I was fighting the framework.
I noticed that the grid isn't responsive. Would we just have to create media queries in the app.css file rather than hardcode the ? Or is there a way to make it responsive without using app.css?
Smash that like button before even watching. Thanks again Brad.
Brad You're GREAT!
im sorry but i don't really understand why you put index at 26:03 is anybody know the reason please teach me... i think only value is needed
@ 29:00 you use a class ImageResults definition instead of function..... why?
I am curious Brad how do you pick up these libraries so fast. I had a look at the documentation and to me its difficult to understand. Do you have another resource like a book you learn this from? For example themeProvider documentation was hard to find had to search for it.
Excellent tutorial! I really enjoyed working through it. My only question is, why did you set "modal" to "false?"
What would be the best code to change the image results based upon the select list value. When I try with the state it refreshes based upon the previous state value for some reason.
Congrats on 600k Subs Brad !
Thanks Brad, you're the best :)
26:00 can anyone explain why did he put 3 parameters to onAmountchange function cause im lost lool
Idk if you still need to know but the first parameter, e, is used in react to basically tell that function that what the event is. It could be a click, it could be a key press. In Brads, case, it's meant to tell react that the button he was pressing on is the actual event.
Basically the e helps to tell the function what the event is (key press, mouse click) and to which element on the DOM to apply that event to.
@@DanielLee-rr2qj I think that is not what Nail Fannane asks
You get three values back and in order to use the "value" output, he needs to put in "e" and "index" as a dummy variable so that he can extract the "value" variable. Does that make sense?
Should cover how to make multi filter search. Don't know if pixabay api has more ways to filter out searches besides a query string. I am looking to build a search feature with pagination, sorting, and multiple properties to filer by.
tnx alot man.this helped me alot to figure out how to fetch from api in react and how to manipulate that data for my project...Also i have one question: what u think about maping those images in parent component when u render child component, where props will be single img object?
Amazing! Thanks for this tutorial!
Nice! My best teacher!
I hit like no matter the video!!!! ALWAYS THUMBS UP!!! LOVE UR VIDEOS
superb tutorial.. thank you, God Bless you
You are the best. I admire you.
SUPERB as always. Thx Bro!
Amazing tutorial as always!!!!
26:00 Why there are 3 params?
This is great and perfect start.. Thanks :D
Can you give an Assignment Ideas to extend this application?
create download image option there
Excellent tutorial !! ..Brad..for when a tutorial preact js y mongodb ...😉
Could you please make a video about your VSCode plugins list? What beautifier on save do you use?
this tutorial is an intermediate stuff, but I will definitely follow up and complete it soon.
completed
I have two questions
1- Wouldn’t it be better if we have state object in App component instead of Search Bar ?
2- Wouldn’t it be better idea to store api key and url in separate file instead of storing them inside state object since it has nothing to do with state ?
Great tutorial! Thanks ! :D How do I get specific photos you can search on? And how can I make sure that when your at the page the pictures are already shown and you don't need to search it.
I need to know which plugin u r using to show icons of files in VSCode, I updated to latest version but I didn't see that update
Keep up with React tutorials, react is great.
When i import thing from material-ui i always get like "SelectFiled is dec
lared but its never read", what is the solution.?
Hey, Amazing video! I just want to ask why do you need to chech propTypes for images, are you chacking if the object you passing is an array? Can anyone explain to me please? Thanks!
Great tutorial! Thanks a lot!
Brad, it's such a lame question, but how do you get this nice colorization of React Components (light turquoise color or )? Mine is just the same blue color, is it VS Code settings or do you need a special plugin to change that?
Ok, nevermind, all I had to do is to change color theme of vscode to dark default.
Awesome Tutorial ! Can you please do a tutorial on Angular Material ?
Maybe too late, but I noticed that every time you type a letter it shows you two arrays of images??? Is this expected? I think this is because you call setState() twice so it renders twice? But how can we prevent it from happening?
By the way, I did this app on my own and same thing happens???
Awesome brad! But you should have used unsplash api, it's a way better than pixabay. And antd also instead of material ui.
Sunil Kumar and someone would have said the opposite. I can not please everyone. I just do what i do. Not trying to be disrespectful im just sick of the “you should haves” because there is NEVER anything that is perfect. So for anyone else, it is fine to mention another tech but please don’t tell me i should have done this or that, its just discouraging. Not triggered or anything like that, just a note for the future
Traversy Media Yes it irks me when people tell you what to do and what you should've done. They can make their own tutorials if they aren't satisfied. Love your channel Brad!
Sorry I didn't mean that. You are right though. I was just curious about ant design so I just said. I'm kind of sick of that also but this time I just said. Sorry for that.
Thanks for the excellent tutorials! Would you kindly provide us a crash course on patternfly and cockpit project?
Hello Brad, nice tuto as usual. But my images are not rendered. I notice that hotlinking is forbidden but it works for you. How can I do to solve this issue?
Thank you for amazing video mate :)
if you change the amount once you have done a search, the number of images doesn't change - is this correct?
Can you please give the name of plugin of module import hints? I cannot get it working properly with my VSCode configuration. Or even better, whole list of plugins you are using during particular tutorial (ss is enough). For a long time I was using Atom, but have some serious issues in buggy release and I had to switch to VSCode.
I was just thinking about starting React + Matetial UI project for practicing, and you post this video... Are facebook and google selling data about us to you? 😂
Hey Brad, one question why Axios and not Fetch?
thanks Brad!
SelectField source code is not in Material UI documentation
Very good! You're very nice teacher! But could you make a project on Php with modern framework and using API such as Cryptopay for Slack bot? If it's interesting for you, I'm very glad to see this tutorial from you in the near future. You'r best!
@lennz kravitz It’s like the same saying once you go black you never go back :D Once you turn to JS framework specially React you will hate all other frameworks.
xaxa, You're right!
or may be somebody knows how it's realizing?
any chance we could get a react.js and materialize css v1.0 sesh? curious how to implement the new js api with life cycle methods
i would use static components with materialize and dynamic components with material-ui. i see not much difference in these two. i will avoid using js api in life cycle method while i can do with material ui react components ( for example Drawer or sideBar in material UI which u have to use jquery or materiliaze M js in materializecss) .i think we can use componentwillmount or componentdidmount method and react "refs" for using external js api. the problem with materialize is overriding your original css styles while material-ui doesn't.
thank you Sir ,, very very fun lecture movie. thank you so much~,
Great tutorial. But I am having a lot of trouble installing Axios and Material_UI. Keep getting error code ELIFECYCLE, errno 1. Please advise how to fix it. Thanks
Hi Brad, can you please share some thoughts on learning techniques ? How to go through long udemy courses, retention etc.
Brad you are awesome!
my grid tile isnt showing and in console its giving me a bunch of errors like
1) react.development.js:315 Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.
2) * Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: EnhancedButton, TextField
etc
i dont understand why the onAmountChange method takes all those arguments
Great video! How and where would you deploy this to a website - digital ocean / heroku?
Either. Its a front end app so simply "npm run build" and push to Heroku would be simple. You could even upload to managed shared hosting
nice, just what i needed
How do i change the color of the top bar ?
Thank u for this awesome video
Thank you so much brad
Brad how can solve preflight error.
axios.get(url, { crossdomain: true })
When I try to install the React App on my Mac, I get the error:
shell-init: error retrieving current directory: getcwd: cannot access parent directories: Permission denied path.js:1167
Pls, anyone knows how to solve this? Tx!!!