So thoroughly explained, the communication and teaching quality here really stands out in comparison to other youTube tutorials. This channel is gonna get big.
Hey everytime i have a question and check youtube , your videos are the ones that actually help me solve my issues... thank you so much made a huge difference in my life....
Thank you very much! I'm an Industrial Engineer, but this is my first time working as a Developer. I've been working as Backend Developer (Node JS, Express JS) for the past 6 months. Backend came naturally to me , while Frontend is challenging. So far, your tutorials are the best for me! It's direct to the point and covers much all the basic and necessary concepts needed especially for newbies like me. Thank you ~ from Philippines! :)
You are awesome. This is the only playlist with in-depth component exploration of Material-UI. Keep up the work and soon you'll be growing exponentially on RU-vid.
Thank you so much for this video, and thank you again for all your videos.!!! From Argentina with low level of english... but I understod every thing. You are awesome!!!
Wonderful explanation! I was really struggling with how to use React Router and the drawer Material UI component and I came across your video. Please keep making content like this on how to implement Material UI with functionality. Thank you so much!
I am lucky enough to come across this video #Anthony to fix one issue while iterating over a list of icons (18:56). I spent couple of hours fixing this. Thank you #Anthony for an amazing series on MUI.
This is a really great video, you explain react Router better than any other channel on RU-vid, if it is possible can you please cover the topic of floating action buttons, especially about the scroll to the top button. Thank you I hope you can see this comment.
Liked and subscribing, that is awesome and you sir are awesome as well, I've been trying to figure out why drawer is not showing up and had my aaaaah moment when you've set the "open prop" and video contains quite a lot of useful material, thank you.
If someone gets an error "Invariant Violation: You should not use outside a ", then do it like this //your routes here import the 'BrowseRouter' from same library i.e "react-router-dom"
What if we get this same error but with the withRouter(Drawer) when we try to get the history props into Drawer.jsx? "Invariant failed: You should not use outside a "
@@user-zp1dv4yh5e If you wrap the withRouter() or the export default in browserRouter it won't export anything. Instead my workaround was to remove withRouter from the export and remove the usage of props, and instead of using history in my onClick functions, I've used: window.location.href = "./"
Great Content Anthony !. I just had one doubt why have u wrapped Drawer component in withRouter HOC ? In the earlier videos you were passing history object directly to the Router wrapper Is withRouter HOC another way to get history object ?
the withRoute option was worth making all this video... instead of passing props i just can wrap it with withRouter and thats it.. i didn't know about this option
I built a project with multiples components to divide the logic of the Drawer, the Navbar and the ListItem , even I am using context. the navigation with the reac-router, works too, the only thing, is the animation o the list , the animation works , but when I add the the code history.push('/yourRoute'). , the animation of the List , doesn't seem correctly
Cool idea! I spend a lot of time coding MUI projects outside of youtube actually - most of them are for consulting clients / my own sites... maybe I should do a demo of one once it's built :)
hey Anthony can you make a video about how to do conditional css depending on the screen size in material ui? i thought i saw you do something similar with the breakpoints but cant find it
I want to create a persistant drawer in materials UI where I want to fix the drawer header. The body of the drawer should be scrollable and will contain a large list. I am unable to figure out on how to implement this
hi, I have a question, withRrouter() is not working ERROR: export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom', please help
Can you also do advanced stying in JSS? like nesting pseudo elements.. I'm getting a hard time on this UI framework. I'm glad i found your channel and good tutorials. THANK YOU.. 👍
Hi! Thanks to your series I managed to incorporate MUI in some of my projects, and now I'm quite comfortable with it. Glad I found your channel! The only thing I'm concerned is bundle size: even with all careful optimizations suggested in MUI documentation it costs bundle about 100 KB (parsed, that is, minimized but not gzipped). With React it's above recommended 244 KB so webpack gives me a warning. Is that okay? Or do I miss anything?
Hello Anthony, need a help here.. I am trying level hard to bring a sign in and signout page which does not have drawer in it, but not sure how to structure in app.js. any tips?
Thanks a lot! I have a question. Couldn't you use react hooks instead of withRouter? I don't like HOCs and I'm always looking for an alternative way using hooks.
Hey, I am having an error to import Switch. I was googling and found Switch has been removed from react-router-dom. Do you have the same example using Hooks?
Anyone else having issues with the { withRouter } part? The current Drawer components from material ui - material-ui.com/components/drawers/#drawer - export like this: export default function MiniDrawer() {}. If you write this - export default function withRouter (MiniDrawer) {} - the console will not error, but when you reload your localhost, you will see this: "Identifier 'withRouter' has already been declared (92:24)". I have changed my importing to this - import { withRouter as withRouter1 } from "react-router-dom"; - however, it keeps throwing errors: "Identifier 'withRouter1' has already been declared (92:24)". The only difference I see from the video and the code provided by material is the "function" keyword. I am still new to React, but any guidance would help. Thank you.
I think react-router-dom has gotten updated since this video and now we're getting errors saying we can't use Switches or withRouter outside a . For the first issue this can be easily fixed by importing and wrapping the Switches in However, I'm struggling to find a solution for withRouter, since if I wrap "export default withRouter(Drawer)" in BrowserRouter, it doesn't export anything anymore. Does anyone know the solution to this?
To answer my own question, what I did to solve this was to remove withRouter from the export and remove the usage of props, and instead of using history in my onClick functions, I've used: window.location.href = "./"
Just testing, I'm trying to render /login but the component is been rendered in the same space as contact,about and home. How could I have my login page rendered without having the drawer aside ? I've got this example github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in I've figured out that is been rendered at first for every component inside pasteboard.co/JbYPzRN.png You could do an extension to this video just explaining that. Your tut is a start for a bunch of people and implementing login would help us to get the ball rolling. Thanks!
If your drawer is rendered in App.js alongside with the rest of the page routes (including Login), then it will show up on the side regardless of the page it's in. To have it not show up, either the login component has to be rendered somewhere that the Drawer isnt, or you could make a custom wrapper that adds drawer to all the other components, or the fastest way (but maybe not the best long term) is to get the location.path from react router props, and conditionally render the drawer only if the current path isn't login. I.e { location.pathname !== '/login' && } I think
