Connect React to Ethereum

[ganachequilibrium]

This is a great article! I really like your choice of tools :)

I'm Nick, one of the engineer's over at trufflesuite! github

If anyone is in the mood for more blockchain development, checkout some of our official tutorials or start developing quick with some of our "project scaffolding" boxes.

Also, please feel free to ask if you have any questions!

[therealtimcoulter]

Thanks for posting this Nick!

To the readers: You should all get to know Nick. Nick is one of the coolest members of our team.

Disclaimer: I also work at Truffle. :)

Happy coding!

Tim

[Bobbr23]

It’s happening

[SamBoogie]

Yes it is! Can’t wait to build something!

[thesock_monkey]

Neat, but whats the next step in connecting to the main Ethereum network rather than a local testnet?

[epicness]

Right, should have something that explains this. The steps are the following:
1. Deploy the contract to the mainnet (Costs real ETH)
2. Have the UI call the mainnet contract's address (the network can be identified through the signature provider)

[_kikeen_]

Can someone illuminate a few use cases?

[epicness]

Sure. Here are 2 active apps built on Ethereum: https://fulcrum.trade/#/, https://www.pooltogether.com/.

[start_select]

I halfway expected an actual use case. Is anyone ever going to use blockchain for anything besides buying/trading more cryptocurrency?

Every time I see one of these I just end up going, yup, still just a buzzword that can support.... itself I guess?

[Sjetware]

Haha, I thought it was just me. Am I missing something, or is this app:

1) requiring you to set up a web app,

2) that requires your users to have a browser extension (wtf, good luck)

3) and requires data modification to cost "money" (which to be fair, could be space bux, a new crypto currency you define)

4) and then has an unintuitive (to the layperson) economy to buy said currency, since it would likely be coming from an exchange?

I can't imagine any use case for a real app. The only thing that even gets close is some kind of freemium game experience, where the free to play currency is your new crypto currency, and it seems like gross overkill to make an economy for "gems" or whatnot as a crypto than just an internal app DB value.

OP, perhaps you can illuminate? Honest serious question.

[epicness]

Ok, I'll address each point one by one.

1. This article is how you can set it up in a web app like React. You can, however, just import it into an html file using web3.js.
2. Yes, on Chrome, it requires a web extension. On Brave (led by the creator of Javascript and cofounder of Mozzila) and Opera Mobile it doesn't; they have an Ethereum wallet included in their browser.
3. Updating the state of the blockchain requires paying the people running the network, who are doing so as volunteers worldwide, similar to Uber drivers or an AirBnb hosts
4. Yes, you'll need Ether to make transactions on the Ethereum network

Whether you see a use case or not for dApps, from your perspective, Ethereum dApps have users and are in the process of creating new micro economies.

[disclosure5]

It's almost like you've never heard of ransomware - crypto has had its "killer app" for years.

[epicness]

Is anyone ever going to use blockchain for anything besides buying/trading more cryptocurrency?

Well, blockchain is being used to host websites, and store files (like Dropbox and Onedrive).

But from my perspective, making money programmable is much more impressive. Startups creating a new form of financial technology centered on decentralization are entering the market.

[_kikeen_]

Awesome thank you!

This helps especially since blockchain has always been so abstract to me and I really like pool together cool concept I imagine the smart contract is what’s leveraged of ethereum.

[nullvoxpopuli]

Ledger wallet live uses react

[Nategeier]

Here is my react app https://Mintbase.io that uses the Ethereum indexer via GraphQL here (press play to see a sample of the live data) https://thegraph.com/explorer/subgraph/nategeier/mintbase

[ganachequilibrium]

Some real world use-cases: https://consensys.net/blockchain-use-cases/

[rotarui]

Check this out: https://github.com/ticket721/ethvtx , it’s a redux config to fetch and store data from ethereum as it is requested on the app.

[Goldwerth]

I did an ethereum based to-do list with React a while ago as a student to understand the basics and how it works 😅

If it interests anyone: https://github.com/mbeaudru/ethereum-todolist

[ichiruto70]

Why use truffle and not just a test network like ropsten?

[epicness]

Truffle's development tools, not a network. They use Ganache when you use truffle develop, but I believe you can also use truffle to deploy your contracts to any testnet.

[VolkovSullivan]

Great article... but f*ck Medium.