Skip to main content

2. React Setup

Tutorial

The rest of the tutorial will go through making a React front-end with RenJS that interacts with the contract from part 1.

Install dependencies​

Use create-react-app to set-up a basic React site.

yarn create react-app tutorial-ui --template typescript
cd ./tutorial-ui

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

Craco config​

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.

Create craco.config.js:

craco.config.js
loading...

And in package.json update scripts to be:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
},

Running site​

You can now test out the website by running:

yarn start

You should now see it open in your browser. Any changes you make to the code will automatically show up in the browser.