Create basic login forms using react.js hooks and bootstrap

Saurabh Mhatre
CodeClassifiers
Published in
6 min readApr 19, 2020

--

So today I would like to cover how you can create login forms in react.js using hooks and bootstrap from scratch. In the end, you will have a UI like this one below:

User login and registration forms

So let’s begin the journey…

Some prerequisites for the project are that you need to have node.js and an editor like Vscode installed on your system. Optionally you can also install the yarn package manager. Now the first thing we need to do set up a new react.js project, so open up your cmd/terminal and run the below commands to create a new project using the create-react-app module and start your project:-

npx create-react-app loginforms
cd loginforms
npm start

If everything goes well you should get the below screen:-

Default react.js app screen

Now open the loginforms folder in vscode and you will find mainly two folders viz src and public. Open index.html in the public folder and make the following edits:-

We are going to use bootstrap 4 in our project so head over to there official docs page here and add CSS and js links from the page to index.html as follows:-

--

--

Saurabh Mhatre
CodeClassifiers

Senior Frontend Developer with 9+ years industry experience. Content creator on Youtube and Medium. LinkedIn/Twitter/Instagram: @SaurabhNative