How to Install Material UI in React

guys in this video we are going to look at how to install material UI into your react applications so I'm going to create a new react application and then we are going to see how to install material UI and start using all the components from Material UI into your fresh react application so to create a new react application I'll run a command npx create react app and we are going to name this app as test app so this will create a new react application into our folder so our fresh react application is created in our folder now I'm going to open that folder where I created my react application and we are going to open this folder in Visual Studio code so here I'm going to open a new terminal back again and we are going to run this app by npm start so guys our react application is running on our Local Host 3000 now so the next step we are going to do in this react application is to install material UI and see what commands we need to run run to install material UI and then we are going to try and import some components from Material UI and try to use it in our application to test it so for that I'll go to a new tab and I'll type material UI install and here on the first link I'm going to find a command to install material UI into my react application here is a button to copy this command I'll just copy it from here and go back to my code which is my test app so it already running on Local Host 3000 I'm going to open a new terminal and paste the command that I copied from the browser and press enter so now material UI has been installed into this application but there are some additional steps that we need to do to make sure all the installations are complete before we start using material UI so we'll go back to that link again where we found the command to install material UI so sometimes in the react applications we also used styled components so we are going to copy and run this command as well just to make sure we have everything in our react application we need to start building with material UI so I'm going to install it by pressing enter so we got material UI installed and we also have styled components let's go back to the link again and see if we are missing something so I'm going to scroll a little bit down and here is a command to install icons because many times while building with material UI we will also be using material UI icons so this is the third command that we need to run uh to complete the installation and this is going to be the last one so I'm going to run this command here and press enter now we have successfully installed all the modules from Material UI that we are going to need and we can go to package.json and expand it a little bit and see in the the dependencies we should be able to see all the packages that we have installed related to material Ur So all the installations are done now so now we just have to test if everything is working fine in this application and we should be able to use material UI now so to test this um I'm going to go to my app.js I'll delete all the default code here and say hello world and save it and we'll go back to the browser and see a react application with the hello world running on Local Host 3000 so to test material UI installation I'm going to go to the same Link in the components and let's try and import any of the component from this material UI library and if we are able to successfully import it there that means it's working fine so we are going to pick a button that we are going to import into our application so here you can see that they have some code code where we can use these three kinds of buttons I'm going to expand this code and what I'll do is I'll just copy this entire thing from here go back to my application and under the source I'm going to create a new file that is material ui. JS I'm going to paste it here so we have some imports here that is some buttons coming from Material UI now we are going to use this component and try to use it in our app by importing it here I'm going to import basic buttons from Material UI and I'm going to replace this hello world with basic buttons with a self closing tag I'm going to save it let's go back to the browser and see if we are able to see this basic buttons on our browser so here in the react tab you can see that we have all the buttons imported from Material UI that means our installation is working fine so that's it for this video thanks for watching see you in the next video

Channel: Mitter - Your Tech Mate

Views: 1,685

Keywords: material ui, material ui react, react, material ui tutorial, react js tutorial, reactjs tutorial for beginners, material ui installation, material ui install react, material ui in react js, react js for beginners

Id: JWZvN8oUUgE

Length: 4min 59sec (299 seconds)

Published: Wed Jan 10 2024