Description
To follow along and create the above repository, please see the companion tutorial video. However, if you prefer tutorials in an article format you can find a companion tutorial article here.
This application is a showcase of connecting a React application to an Algorand testnet using Reach and the Algosigner extension. It features connecting to a test wallet and then funding that test wallet with fake funds for use in testing contracts. I kept it rather simple to serve as a bite-sized introduction to dapp development by way of a feature common across many dapps during development.
Setup Instructions
- clone the repository
- open a terminal to the
reach-react-testfolder - from there run the command
yarn install - once that has completed run
cd src - (if on Windows) run the
wslcommand to switch over to linux - run the
curl https://raw.githubusercontent.com/reach-sh/reach-lang/master/reach -o reach ; chmod +x reachcommand to download reach into the src folder - run the
./reach versioncommand to ensure it installed - run the
REACH_CONNECTOR_MODE=ALGO ./reach devnetcommand to start the testnet - start up a new terminal and navigate to the
reach-react-testfolder - now run the
yarn startcommand to run the applications frontend - navigate to the localhost link given by the above command to view the application
Further Reading & Challenges
If you are just getting started with dapp development, I highly recommend the Reach tutorial. It will show you the foundation of contract creation using Reach and go from contract interaction through the cli back here to the frontend by the end of the tutorial.
If after that you’d like a bit of a challenge, Reach has a ton of dapp examples that haven’t been turned into web applications yet; taking the time to transcribe them instead of just copy and pasting them will increase your familiarity with the Reach contract language while connecting those contracts to the frontend will increase your familiarity with the workflow of dapp development.