This Blog Post written by Nader Dabit gives an excellent overview and introduction to all the necessary tools for modern dApp development such as React, Hardhat, Ethers and The Graph.
Once you've worked through the tutorial you've learned how to integrate Metamask into your application, how to deploy and test Smart Contracts on Ethereum testnets, how to connect the dApp to a client frontend and how you write and compile contracts written in Solidity.
The code for the whole application can be found on this GitHub repository and if you're a visual learner you can check out the accompanying 1 hour long YouTube video.
- Nader Dabit