How to create a web3 connection in react interface?

Question

I have created a simple login and register interface using react js and want to connected through web3 or any other method with a smart contract to stored the registered user's data on the blockchain and verify their login credentials to gain access. I'm using ganache and metamask to create an test environment for my application. Can someone help me or guide me to specific articles/tutorial to use the functions of the smart contract to store and get data ?

my smart contract is

pragma solidity ^0.5.0;

contract register {
    uint public userCount = 0;
    uint i=0;
    bool verUser = true;
    mapping(uint => user) public users;

    struct user {
        uint id;
        string username;
        string email;
        address useraddr;
        string password;
        bool loggedIn;
    }


    event userCreated(
      uint id,
      string username,
      string email,
      address useraddr,
      string password,
      bool loggedIn
    );
   event userLoggedIn(
       uint id,
      string username,
      address useraddr,
      string password,
      bool loggedIn
       );

function createuser(string memory _username, string memory _email, string memory _password) public
    verification(_username, _password, userCount) {
        require(bytes(_username).length > 0);
        userCount ++;
        users[userCount] = user(userCount, _username, _email, msg.sender, _password,false);
        emit userCreated(userCount, _username, _email, msg.sender, _password, false);
    }

 function loginuser(string memory _username,  string memory _password) public
    logInVerified(_username, _password, userCount) {

        emit userLoggedIn(userCount, _username,  msg.sender, _password, true);
    }

modifier verification(string memory _username,string memory _password, uint _userCount){

 user  memory p = users[i];
 for (i=0; i<userCount; i++)
    {
     if((keccak256(bytes(_username))) == keccak256(bytes(users[i].username)) ||
    (keccak256(bytes(_password))) == keccak256(bytes(users[i].password)) ){

        verUser = false;
    }
    else{
        verUser = true;
    }
}
require(verUser == true, 'username or password already exists, please try again');
_;
}
modifier logInVerified(string memory _username,string memory _password, uint _userCount){

 user  memory p = users[i];
 for (i=0; i<userCount; i++)
    {
     if((keccak256(bytes(_username))) == keccak256(bytes(users[i].username)) &&
    (keccak256(bytes(_password))) == keccak256(bytes(users[i].password)) ){

        verUser = true;
    }
    else{
        verUser = false;
    }
}
require(verUser == true, 'Wrong username or password');
_;
}
}