Most of the user interfaces for blockchain applications are programmed using React and there are many React component libraries that you can reuse from the community to perform common tasks like logging with an Ethereum wallet, switching networks, and also so-called React hooks libraries (i.e. eth-hooks) which let you fetch different data like balance, block number, prices and more.
I believe that React is best learned from the official documentation, but there are also other resources for people that learn better with video content. Here is a list of React learning resources that I recommend:
- React in 100 Seconds - Fireship
- React roadmap
- Official React documentation
- awesome-react - This GitHub repository aggregates many useful resources for React developers, it has tutorials, tooling, component libraries, frameworks, design patterns, guidelines, and much more. It is a good place to look for inspiration and resources when using React.
- If you want a paid video course I can recommend either ZTM’s React course or Maximilian Schwarzmuller’s React course. On Udemy there are sales periods every once in a while which allow you to buy courses for
$200, so wait for one of those, never buy for the full price.
- freeCodeCamp React course on YT
After you feel like you’ve understood how React works, you have learned about lifecycle methods, hooks, how to pass down data through props, how to use the Context API, etc. I recommend trying to build the front end of a web3 app like Uniswap or an NFT marketplace like OpenSea. To rapidly prototype the design I recommend using tailwind.css and Chrome browser developer tooling to inspect the styles of the site you’re trying to recreate. Also, don’t forget to use CSS flexbox/grid where necessary. Try to simulate the data inside of these apps using hardcoded JSON objects.