How To Make Sign In & Sign Up Form Using React JS | ReactJS Login & Registration Form

hi guys welcome back to another video of great stack today in this video we are going to create the sign up analoging form here on my computer screen you can see one signup form with the name input field then email ID and password and here we have two button one is sign up and the second button is login if I click on the login button you can see we will come to the login form where you have only two input fields which is email and password and if we will go for signup form they will have to enter name also if you will move to the login form this name field will be hidden and if we will move to the signup form then it will be displayed the name input field we will create this login and sign up form using react.js so keep watching this video before starting this video please hit the like button and subscribe to Great stack now let's start the video let's create our react project first we will create a new folder login sign up now we will open this folder in vs code editor now we will open integrated terminal we will now create the react project using npx create react app login sign up we had created our project let's go to Project directory CD login sign up now we will run our react project to do so we have to write npm start command as you can see our react project is running now we will clear this default react project we have to go to SRC app.js here we will remove the header tag and the class name also Ctrl s now our project is cleared now we will rename the project name from HTML file as you can see here is the react tab written so we will go to public folder index.html here you can see the Titan is reactor we will rename it to login sign up we will save it now our title has been updated now let's create the folder structure for this project we will create a new folder in SRC we will limit components in components folder we will create a assets folder where we will keep our all the assets we will create one more folder in components folder this is our login sign up component in login signup folder we will create a new file login now we will convert this jsx file into component using rafc now we will create a CSS file for this component now we will import this CSS file into this jsx file import dot slash login signup.css now our CSS is imported in this component let's Mount this component on this screen we will point app.js opening Arrow login sign up slash closing Arrow now our component is mounted let's design our component let's insert imagine the assets folder and import these images in our login signup component assets folder reveal in File Explorer here are our icons we will copy it in our assets folder as you can see our icons are inserted into assets folder now let's import these images now I had inserted all the images from the asset folder to our component now let's create the HTML code of our component first we will provide this div a class name of container we will create a div with class name header inside this header we will create a div with class name text in this text we will write sign up we will create a deep with class name underline now we will create a div with inputs class name inside the inputs we will create a div with class name input inside this div I will create a image tag and a input tag now we will create the input div ES first one is for the name second one is for the even so we will type input type is equal to email third one is for password so we will write input type is equal to password let's insert the images in the images tag here we will write user icon in this image tag we will provide email icon in this image tag we will provide password icon now we will save it as we can see we got three input text 1 4 the name second one is for email third one is for password now we will create the sign up and login button now we will create a div with class name submit container inside the submit container we will create a div with class name submit here we will right side up we will create a copy of this day and name it log it now we will also need a forget password button so here we will create Dev with class name forgot password here we will write lost password we will insert S Pen tag inside span tag we will write click here now we will save it now let's add some CSS properties first of all we will give background a linear gradient to do so we have to go in index.css here I had added height 100 VH anmount linear gradients and provided two colors we will save it as you can see our background has been changed let's go to our CSS file now we will give style to The Container class nib I had given display Flex Flex Direction column margin Auto to align the container at the center of the body and given margin from the top 200 pixels background white padding from bottom 30 pixels now we will give some properties to header class name I had given display Flex Flex Direction column aligned item Center to Center the content in the header tag and give him gap of 9 pixels between header text and header underline width of hundred percent margin from top 30 pixels now we will give a style to the text class name I had given color increase the font size to 48 pixels increase the font weight to 700. now we will give a style to underline class name I had given widths of 61 pixel height of 6 pixel background border radius of 9 pixels now we will give a style to inputs class name I had given margin top of 55 pixels display Flex Flex Direction column and the gap of 25 pixels now we will give a style to input class name I had given display Flex align item Center margin Auto to align the content at the center width of 480 pixels height of 80 pixels background and Border radius of 6 pixels now I will give some style to icons I had given margin 0 from top and down and 30 pixels from left and right now we will give style to input fields I had given height of 50 pixels width of 400 pixels background transparent border none outline none color font size increased to 19 pixels as you can see our input Fields get hidden because we had given border none and outline also none now we will give placeholder to input stack in this input we will give placeholder to names in this input field we will give placeholder email ID in this input field we will give placeholder password now we will save it as you can see placeholder are visible in this page now we will give a style to forgot password class name I had given padding left 62 pixels margin top 27 pixels color font size increased to 18 pixels we will add width 600 in container class name now let's give property to forgot password span tag ayat give it color cursor pointer so our click here will be look purple and if we hover on this then it will show pointer cursor now we will give a style to submit container I had given display Flex Gap 30 pixels margin 60 pixels from up and down and auto from left and right now we will provide style to submit class name I had given display Flex justify content Center align item Center so our buttons get at the center and inside the button text also get Center because we have justify content Center we will give width of 220 pixels height of 59 pixels to each button we had given color to the text which is white background is purple border radius 50 pixels font size increased to 19 pixels font weight 700 and cursor is pointer so if we hover on this button it will show pointer cursor now we will save it now we will add some functionalities to our component using JavaScript so we will move to login signup.jsx now we are going to give personality to this sign up form first we will create a used State variable to do so we have to write const or variable name and the function name is equal to use state signed up now what is use State use state is a reactor which provide us a variable and a function to set data on this variable and here we are initializing the variable with this data so whenever the variable get updated our front end also get updates so first we will remove this sign up and here we will action now we will save it so here sign up is coming from this action variable now we will give Dynamic class names to these buttons using this Action News state so here we have to dynamically provide the class name to do so we have to use ternary operator so we will write if x n is equal to logins then our class name for this button submit and gray if our action is not equal to login then class name will be only submit here also we are using ternary operator if XR equals sign up then our class name will be submit and gray else only submit we will save it and now we are going to give properties to this gray class name so we have to move to login signup.css here I had given background and color to this gray class name now we will save this file as you can see currently our action is sign up so sign up button is in purple if we like to login here now our login button is purple and here you can see the text get changed because we are using this action variable inside our div now let's add personality to this buttons if we click on this button nothing is happening on clicking on this button we have to change this state so to change the state we are going to add odd click personality on click here we will pass an arrow function inside this Arrow function we will write set action sign up and here we will provide on click passing an arrow function inside the arrow function we will write set XL login now we will save it if we click on sign up now sign up button will be purple and here text also gets changed because our state gets updated if we click on login our login button get purple now we have to hide this from the sign up form and hide the name input field from the login form to do so we will add one ternary operator if x n is equals to login then we will return a empty div if action is not equal to login then we will return this dip so we will cut it from here and we will paste it here and we will save it as you can see from our login form the name inputs will get hidden and in our signup form the name form is there so we will also hide lost password from the side of fog to do so we have to go to here we'll start a ternary operator if x n is equal to sign up that we will return an empty div if action is not equals to sign up then we will return this div so we will cut it from here and paste it here now we will save it as you can see the lost password get hidden from the sign up page and when we click on the login then the last password is again visible thanks for watching this video in our next video we will create more projects like this

Channel: GreatStack

Views: 176,116

Keywords: registration form using react js, react js form, login form using react, login form using react js, login form in react js, login and registration form in react js, registration form in react js, login and registration form using react js, sign up form using react js, react js tutorial, react js, react js project

Id: 8QgQKRcAUvM

Length: 21min 3sec (1263 seconds)

Published: Mon Aug 14 2023