The rest of the tutorial will go through making a React front-end with RenJS that interacts with the contract from part 1.
Use create-react-app to set-up a basic React site.
yarn create react-app tutorial-ui --template typescript
Install some additional dependencies which will be used through out the rest of the tutorial:
yarn add @renproject/ren @renproject/chains @renproject/utils
yarn add @craco/craco
yarn add async-button
Webpack, which is used internally by Create React App and React Scripts, no longer provides polyfills for node.js modules. We use Craco to re-enable this, because some of the dependencies imported by
@renproject/chains require this.
scripts to be:
"start": "craco start",
"build": "craco build",
"test": "craco test"
You can now test out the website by running:
You should now see it open in your browser. Any changes you make to the code will automatically show up in the browser.