Day 26 and 27. I didn’t do much yesterday. Just was able to touch forms. But today, I covered a lot. There is still some grey area to which I will deal with tomorrow. I also needed to wind up my work early today because I need to ensure my presence at an important meeting. So without any further ado, let’s get started!

You see people! I am at that stage in my course where I have covered a lot. In my blogs, I had not penned down every single one of the things I learned in React. It would have been too complicated for me to explain. But now if I reflect upon where I was standing on my Day 1 and where I am now at my Day 26 and 27, I can say that there is a big difference. Sometimes, a pat on a back is all you need, even by yourself. 👏

📄 Login Form

I started out by creating a new component — LoginForm. I used one of the simple Bootstrap forms to save time. You can check them here.

In the form, whenever I hit the login button, all the resources of the app start loading again. So to prevent that, I set the onSubmit attribute of the form to {this.handleSubmit}. And then further in the body of onSubmit, I used preventDefault method to avoid the default behavior of the form. 🎩

📦 Then I created the state object. And inside it, added an account property. Then I assigned an object to the account property and introduced username and password properties in that object. It all sounds very confusing. So, let me show what I mean.

I did a lot of new things while making this nice, responsive login form. But I will not go into many details because I am not teaching you guys how to create forms. Although I will definitely show you what the login form looks like after I was done for today. 😎

vidly login form - msaaddev

If you want to take a look at the code, it’s on my GitHub.

🏗 Joi Package

I have only touched this package today. But as far as I know, it’s a perfect package for creating validation requirements. You can see in the above GIF that whenever I hit login without entering any credentials, I am subpoenaed with two warnings. For now, I have introduced this feature by code. Tomorrow, I will use Joi to make this happen.

🚀 To install this package, type the following in the terminal:

npm i joi-browser@version

joi package - msaaddev

📦 After this, type the following at the top of your JSX file to import Joi:

import Joi from "joi-browser";

 

You can then use this package in your code. For instance, if you want to set validations on your username and password, you can simply do this:

schema = {

    username: Joi.string().required(),

    password: Joi.string().required()

  };

 

And then you need to use Joi.validate method to implement these validations. I will write about them in tomorrow’s blog. But till then, cheerios. 🤞