Add support for JS frameworks

[samajammin]

Summary

All our templates currently use jQuery, which is verbose, limits the functionality of the frontend applications & can be difficult to read with the all the DOM selectors/manipulation muddled within the web3 logic.

Let's explore adding the ability for users to select npm packages / JS frameworks to use & updating the templates to use these (e.g. starting by updating all templates to use React).

Motivation

The goal of Studio is to showcase the Ethereum stack in a potential real-world project but with zero configuration. In the majority of cases, developers would want to create a project using a major JS framework (React, Vue, Angular, Ember, etc.)

Feedback from our recent dev survey echoed this sentiment. The current jQuery implementation is particularly problematic in the CryptoPizza template: the code is all in a single JavaScript file which is larger than previous ones, and it conflates blockchain and UI responsibilities, making it difficult to find what one's looking for. A more modern UI library would help reduce much of the UI boilerplate code.

Describe alternatives you've considered

• Do nothing

Additional context

• A potential way to verify this demand could be to scrape a list of repos from the recent ETHGlobal hackathon to see tech stacks are most used across projects
• Before committing to this we should try to gain an understanding of how large of an undertaking this would be

[javier-tarazaga]

Yeap, this is something we wanted to do for a long time but of course, will require a bit of time to actually do. Codesanbox or Stackblitz are great examples of how this could be done and could be used as inspiration for developing this feature.

[samajammin]

As another example, https://playground.substrate.dev/ uses React (though their app template is quite complex).