React and Material UI Login Form Using Mightymeld Prefabs | React Future Dev Tool Tutorial

hey what's going on guys welcome back to another video so in this video I will show you a very powerful future dep tool which you can use in your next project to boost your react development you can build your application UI on the Fly by using a drag and drop feature and your code will be autogenerated we will build a simple login form using material UI and Mighty Med prefabs so if this sounds interesting then stick around also don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one so let's get [Music] started all right guys so I have already boosted my application using the npx create react app and the name of my application is react prefabs so let me give you a walkthrough of the code that I have so if I go to the source folder then you will see that in the source folder we have this appjs where I have removed all the boilerplate code and I just have a div with an app and and then we have all the pretty standard files like index.js index. CS apart from that I also have a folder for images where I have a background image and then you will also see that we have a prefabs folder so I'm going to give you a walk through what this prefabs folder is in a minute then if we go to the package Json file then we will see that in the package Json file I have installed the dependencies for material UI as we are going to use the material UI as a prefabs so if I go to the prefabs folder you will see that we have the mi mi ui. jsx so you can just install the material UI so if you want to install the material UI you can just follow the documentation and you can just use the npm install and this particular command which will just install the material UI into your project then we also have the dev dependencies so if I scroll down then you will see that we have a Dev dependency of Mighty Med runtime customize CRA and react app rewired so I'm going to give you a walk through on the setup of the Mighty Med but I have already covered how you set up the mighty in your project into my previous video so if you have missed that you can just click on the card above and jump to it directly or you can also find the link in the description of the video so that you can check it out later on now let's go and let me show you how you can just install the mate into your project so you can just follow this doc guide you will find the link in the description and then you can also watch this video and what we need to do is we just need to install the mimed runtime so you will use the npm install then you will just install the mimed runtime after that you just need to create a my te med. Json file and then you need to have a configuration options since we are using the create react app for bootstrapping our application we're going to use the plug-in setup for create react app where we will also need to install the customized CRA and react app rewired so these two which is you will see here that we have already installed the runtime customize C and react app rewi for the mtimet Json you will find that we have this configuration here and then we have this config override which we had the babble plugin so if you scroll down here you will see that we need to create this config override. JS where you can just add your Babble plug-in and then you will just update your Mighty Json file then if you want to have the mtimet configurations here you will see that all the configurations of the m. Json file so if I go to the Json file you will see the Run include web server URL which you will find all the details here or you can just also copy paste from my existing code and then just put it in your project and it should work fine then we have this prefabs so if I go to the prefabs directory then we have this prefabs directory and you will see that how you can set up the prefabs so you can also watch the video to add a prefabs into your project so it's very pretty simple you just need to have a prefab directory into your my teamate Json file so we have this prefab directory into our might Json file and we have this Source preab now we have just created a folder and inside the folder we have added the prefabs so if I go here and you will see that you need to add the prefabs file so you can find the prefabs file into the GitHub repository so here you will see that this is the GitHub rep for the prefabs developed by my teamed then you can just use any of the framework you want to build your CSS like Tailwind you can also use redx mui chakra UI for this project we are going to use the mui as we have already installed the material UI into our project now if we go back here we are going to have the server URL and then we will just have the Run script which will be the npm rum start Mighty Med and if we go to our package Json file then here you will see that we have added an additional script which is the start Mighty Med so this is the Mighty Med setup we need to do you can just follow the guide here and then you are good to go you won't be having any issues to set up this into your project now we have already have this in our project now what I will do is in order to run it we need to use the npx might Med and this is going to start our MIT Studio but before that you need to do one more thing you need to have the environment variable files so you will go to the environment files and then in the environment files you need to add the secrets so you will be having the mm instance ID and mm secret which you can get it from the mightet portal so this is the myet portal where you can just use a sign up and then you can create your instance and then you can download your secrets so we are going to have this npx m Studio but before that let's do an npm install so that we can install all our dependencies so I'm going to have the npm installed and this is going to install all my dependencies that I have in my packet Json file now let's give a try for the Mighty Med so let me have the Mighty Med and I'm going to hit enter and here you will see that it is starting my application and then it also gives the studio URL so if I go here then you will see that now it is loading and this is how the application looks like here you will see that we only have the app and then we have the different views for the tablate and then we have the different View for the mobiles all right and here you will see that we have the active browsers for the desktop tablet and the mobile view all right here you will see all the source of our project and then we have the prefabs so these are all our prefabs for the Mi UI which we can just use it for drag and drop so we are going to design a login page using the mtimet studio and I will show you that how you can design your react components using MIUI very easily just drag and drop and you will have all the props and properties into the studio itself so now let's go and let's do that so what we can do is first we will have a box so I'm going to drag a box here and now here you will see that we have a div and inside the div we have an app and then we have a box so for that what I will do is I'm going to just remove the app we don't want anything here and now this box is just a simple container so if we go to the documentation and if we search for a box then we should be able to see that we have this box in the material UI which is just a container which we are going to use so all right so now we have the box and to this box what we are going to do is we are going to add some inline properties so I'm going to have the add inline SX and to the inline SX what I will do is I'm going to add the background image so let me have the background image and I'm going to keep it none for now then we also going to have the height of this box so I'm going to give the height as 100 vertical height all right after that we will also need to have a color so let me give a color and I'm going to give the color as hash ffff so now we have this box container and inside the box container we will also need another box so for that what I will do is let's simply drag and drop so I'm going to drop it and we are going to have a different box here all right now this box is going to be the container for our login so what I will do is let's add a prop so I'm going to have a padding and let's give a padding of four and then I will also give some SX properties so I'm going to go here in line SX then we are going to have the ADD and I'm going to give the width to it so let me have a width as 100% all right I'm going to give a background so let me have a background and I'm going to give the background as rgba and then let's have the values of rgba so I will have the 0 0 0 and then I'm going to have the 0.75 now we have this box with the black color then what we will do is we will also have a Max width so let me have a Max width and I'm going to give the max width as 380 pixel so let me have the 380 pixel so we have this now the next thing what we need to do is as our box is on this side we want this box to be into the center so if I go back here then here we can add some more properties we can use the display so let me have the display as flex and then I'm going to give the justify so content which will be in the center all right then let's give the Align so I'm going to have the Align items which will also be in the center so now we have the box into the center now we also need to give a background image to it so for this we need to add the background image into our code first so what we will do is I'm going to click a right click and then I'm going just go to the open in the editor and this is going to take me exact to the same place where it is in my code so here it is in my code and let's add the background image so what I will do is I'm going to have the import I will have the movie BG and this movie BG will be coming from the do slash I'm going to have the Images slash movie background now we can just use it here so I'm going to use the back tick then we're going to have the URL and let's use the swing literal so I'm going to have the movie BG here now if we go back here then now we see that we have the background here and then we also have this I will also need to give the background size so if I go here let me have the background size so I'm going to select the background size from here so we have the background size or maybe I will change it to cover so let's have the background as cover we need to style our box so that we can have the sign in and the login information all right so now inside this I can use the typography to have a text so let me have a typography here now to this typography what we can do is we can just change the text so I'm going to change the text as sign up and then what I will do is for this typography I'm going to add the margin bottom all right and I'm going to give the margin bottom as three now we will also need to add a variance so I'm going to have use the Genera AI so add variant as H2 and this is going to add a variant as H2 and now next thing we need to add the font size so I'm going to have the font size and I will give the font size as 1.25 Ram all right so we have added the font size now the next thing we will do is we are going to add another box where we are going to use the input boxes so what I will do is I'm going to go and I will just drag a box here and now I will just drag this on top and we have a box box here now in this box what I will do is I need to have a prop so I'm going to have the prop as component and I'm going to give the value as form then we are going to use the SX property so let me have the SX property I'm going to go here and then add the inline style all right I'm going to add a property here and then I'm going to add the color so let me have the color so we need a color as white and then what we will do is now let's add an input base here so you can go here and you can check for the input base so I'm going to go here and I will have the input base API and this input base API is actually going to give us a input fill which we can just use it for the taking inputs from the user so I'm going to go here and let's have the input base so I will go and I will find for the input base and I will just drag the input base here then we're going to have the input base and to the input base uh what I will do is I'm going to add a prop as required then I will add the placeholder so let me have the placeholder and I'm going to add the placeholder as email address all right so we going to take email address from the user then I'm going to add a prop for the type and the type would be email so let me have the email all right then I'm going to give the full width so let me have the full width all right I'm going to give the full width as true and I'm going to use the required so we use the required but I forgot to give it the value so I'm going to have the required as true so we have this input box and now to this input box what we can do is uh we also have the email address but you will see that there is a problem with the color so what I will do is I'm going to use the SX and give some inline styles to this box so that we can have it a little bit nicer so I'm going to use the add inline style and to this inline style what I will do is uh I'm going to use the background as white so let's have a background white then what I will do is I'm going to use the padding so let me have the padding and the value of the padding in will be 5 pixel from top and bottom and then we're going to have the 10 pixel from left and right after that I'm going to give the font size so let me have the font size so I'm going to give the font size as 15 pixel so let me have the font size as 15 and then we just going to use the margin bottom so that we can have some extra space at the bottom and I'm going to give the margin bottom as two all right so now we see that we have this email address now we will also need a similar thing for our password so what I will do is we are just going to use and make it a duplicate so I'm going to have a duplicate and this is going to have this one so what I will do is I'm going to change the placeholder as password so let me change this as password I'm going to use the type as password so we will have the password and the rest everything will be the same all right so now next for the login form we will also need a checkbox for remember me so what I will do is for the checkbox I'm going to use the form control label so if we go to the material you Y and if we check for the form control label then this form control label is actually going to give us for the checkbox so if I go here and we need a checkbox something like this so we're going to use this form control label and then there will be a checkbox inside it so now what we will do is let's go here and let's add it in from the prefabs but in the prefabs you will see that we don't have any form control label so one thing you can do is you can actually add any of the component into your list of the prefabs so what I will do is let's go back to our editor and inside the editor if we go to our prefabs folder then we will need the form control label so I'm just going to import a form control label here so this is going to coming from the material UI so this you will see we have the material UI and just in the bottom what we will do is we are just going to copy this and I'm going to add it here and I'm going to just change this to form control label so let me have the form control label and I'm going to use a form control label here as well so in in this way you can just add it into your prefabs of MIUI and you will get the component into your studio so what I will do is I'm just going to cancel this and I'm going to rerun my mtimet studio all right so now we have this and if we go and see then in the bottom you should be able to see that we have this form control label here and we can just use a drag and drop but what I will do is I will just going to copy paste from here so I will just going to copy this all right I will go here and I'm going to paste it here all right so below this input I'm going to paste it here and we need to import the form control label so let's have the form control label and I'm going to have the checkbox I'm going to change the label so this label would be the remember me so I'm going to have the remember me I will save it now if we go back and if we see here then we see that we have this checkbox and we have this remember me so I'm going to click on the form control label component and I will also give the SX so that I can have the color as white so I'm going to use the inline SX I will give the color white so now this AI assist will just add the white color and now what we will do is we have some problem here you will see that if we uncheck this so I'm going to go to the drive mode and if we uncheck this then this is in a black color so we just need to change this so what we can do is we can just do an inspect element and just find out the class name so this is the input box and we can just use the mui checkbox rout and then we can just change the color of this SVG so we're going to add a fill property and this fill property will be white so this is going to change the color to the white so what I will do is I'm just going to add it into my code so I will go to the app and here I'm going to add the mui checkbox root and inside this we are going to have the mui SVG icon root and to this we are going to add a fill property and this fill property will be white color now if we go back here and then we see that we have this remember me and for this remember me also I'm going to add a so if I go and if I inspect this then for remember me I need to give a font weight so that we have the same color and the font weight would be 300 so let's give that as well so what I will do is so I'm going to copy this and I will go here and I'm going to add it here and I will just remove this so we are going to have a class here and then on this class I'm going to use the font weight and let's have a font weight 300 all right so the next thing we need is we need to have a button so that we can just click and submit the form so if we go back to the edit mode so I will go here and I will just drag the button all right so we have this button and now to this button what we are going to do is we are going to add some CSS so let's go to the button first and I'm going to change the inner text so this will be the sign in so I'm going to have the sign in this is going to change to sign in and now we will need to give some props so I'm going to have the variant first so let me have the variant as contained all right so we have the variant as contained then I'm going to give the full width so let me have the full width as true now we will also need to give the SX property so what I will do is I'm going to go here add inline SX and to the inline SX I will add the margin top so let me add the margin top so I'm going to have the margin top and the value would be two so we have this button and we will also have a type on the button so let me have the type and I'm going to name the type as submit so let me have the submit so we have this button as well and now we will just need to add two links which will be the forgot password and if you don't have an account then you can just do a sign up and I see that I have given a sign up here it should be sign in so I will go here and I'm going to change this to sign in now let's have a new box so I'm going to go here and then I'm going to add another box so I will have a box here all right so we have the box and now to this box what I will do is uh I'm going to have a typography inside this so that we can have a text so let me have the typography all right so we have this typography and on the typography what I will do is I'm going to add a link into it so let me go to an add a link all right so we have the typography we have the link and inside the link we have the text so let's change the text first so this text will be the forgot password so I'm going to have the forgot password and then to the link what I will do is uh on the link I'm going to give a HF as a prop so I'm going to have the HF all right I'm going to give the value of the hrf as hash and the next thing we need to add an underline prop so I will have the underline prop and the value would be over so let me add the hover so I'm going to have the color as white so it has added the color white now what we need to do is uh let's go to the typography and add some styling to it so I'm going to give the font weight here so let me have the font weight and I'm going to give the font weight as 300 and then I'm going to give the margin top so I will have the margin top so I will have the margin top and the margin top will be two okay so now we have the forgot and we will need to have a very similar for the other one as well so what I will do is I'm going to go here and I will have a duplicate and to this I'm going to change this to as don't have an count in that case we can just simply have a sign up so let's have a sign up so now you can see that we have built the login page and now if you want to see if we go to the drive mode then we can see that we have we can type here I'm going to have a test and then if I click on it it will give me that you cannot submit because it's a mandatory fill and it's not a valid so I'm going to have a test gmail.com then I'm going to have some password and then if I click on sign up then you will see that nothing is going to happen uh because we are not handling any of the form stuff so let's go and let's try to do that so what I will do is I'm going to click on edit I go open in the editor and inside the editor what I will do is the first thing I'm going to create a state variable for my email and the password so let me have a constant so I'm going to have a constant there I'm going to have the email and I will have the set email which is going to be equals to the use State all right I'm going to keep it as an empty then I'm going to have a constant I will have the password then I'm going to have the set password and this is also going to be equals to the use State now what we can do is we can go and add the value to it so first input base is this for the email so I'm going to go here I will have the value and I'm going to add the value as email I will also add the on change so that whenever a user type we just have to update our set email so this is going to be an arrow function where we are going to have an event and then we are just going to have the set email where we going to have the value Val as event. target. value we are going to copy and we're going to use a very similar for our password as well so if I go here and if we add it here then this should be changed to password and we're going to have this as set password all right so now what we need we need also need to submit the form so if I go to the box we see have a component as a form and we can just add the on submit here so let me have the on submit and then we can have the handle submit now we just need to have this handle submit function so what I will do is I'm going to go here and I'm going to have a constant I will have the handle submit and this is going to take an event so I will have the event and then we are going to have this Arrow function I'm going to use the event. prevent default so that when we click on the submit the page doesn't refresh so I'm going to have the event. event default all right and then I will simply have have the console.log and on the console.log I will just log the email all right this is going to have the dollar email and we have the password so let's have the password as I'm going to use the dollar and we're going to have the password and then once we log it we just need to clear our form so what I will do is I'm going to have the set email as empty and then I'm going to have the set password as empty so we have already set up now let's go and let's test it so if I go back here now you will also see that before we go we can also see that we have this in the different UI so this is a tablet view this is a phone View and we see that everything is responsive and we can see everything here and this is our jsx structure which we can see it and we can also change any of the properties from here itself so that's where this prefabs is very useful and it helps us to build the UI components faster as compared to the traditional method so now I will just go to my visual studio code and I'm going to close this and I'm simply going to use the npm start so this is going to start my application on the Locos 3000 this is how our form looks like so if I go here and if I hover it then you will see that we have this forgot password don't have an account if we click on it then we see that please fill the details because we have added a required flag now let's add the page atate gmail.com and I'm going to add a password here if I go and if I inspect it then if I go and into the console then if I click on the sign in then you will see that we have the email and then the password and then we can just use the user information to log to the user so that's all I have in this video and that is what I wanted to show you that how you can use prefabs and build your user interface faster with the mightet studio so I hope you like the video a thumbs up is appreciated you can also connect with me via Facebook or Instagram you can follow me on Twitter for latest updates and before you go don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 1,839

Keywords: react, react js, react login page, react material ui tutorial, react material ui login form, react devtools, react drag and drop tutorial, build react ui, material ui tutorial, create login form in reactjs, material ui components for react, form handling react js, material ui react project, react tutorial for beginners, react material ui input, material ui, react login form, checkbox material ui react, react form validation

Id: ARyp9xIESs0

Length: 25min 6sec (1506 seconds)

Published: Tue Dec 12 2023