React on the Blockchain - the Missing Getting Started Guide

Hi there, really excited to be here at React Summit. Today I'm going to talk about React on the blockchain, and I call this talk the missing get started guide because there are a lot of material scattered across the web, so I try to combine everything into one place that gives you some sort of reference if you want to get started developing on the blockchain using Solidity and React.

My name is Vladimir Novik, I'm owner of Vladimir Novik Labs, consultant, social architect, author, entrepreneur. I do consulting in a bunch of fields, so if you have something interesting, reach out to me, or just want to chat, reach out to me on my website or my Twitter. I'm also a leader architect at EventLoop, and at EventLoop we're creating a robust, performant, feature-rich online conference experience, so you can check out our website on eventloop.up or say hi on Twitter.

So let's talk about blockchain. So if I search for a blockchain in Wikipedia, I get this article speaking about a blockchain being a growing list of records called blocks and so on and so forth. So basically it's talking about Merkle trees, cryptography, transactions and blocks, right? So Merkle trees, also called Boehner hash trees and computer science cryptography, transactions and blocks, right? So what is a blockchain? In a sense it's a network, well not in a sense, it's a network of nodes. You have an address which is also called a wallet and you connect to a single node on the network and all these nodes are interconnected.

Blockchain is also some sort of storage, so distributed storage. So you can think of blockchain as a database in a sense because it stores information. So it's made up of transactions and any change is basically an immutable record. Transactions are grouped into bundles called blocks and all blocks group together and is called public ledger. Basically it means that it's a current state of the blockchain in history. Combined of all the transactions. So the state is derived by all the history of the blockchain.

So it's also a computer. Some blockchains support ways to run programs and that's what we'll be doing today. We'll be learning how to use smart contracts. Every node in the blockchain is a computer. So a node can run computation. We'll talk today about Ethereum. Ethereum is a general purpose blockchain that allows you to run your own programs. To use it, you need to have an account. Account has a public key and a private key. You can get your public key out of private key, but you cannot do vice-versa. The name of private key is pretty descriptive. You cannot share it with anyone. Public key is, in a sense, your username. You can treat that as username and password.

If you have an account and you want to interact with the blockchain, basically every node on the blockchain has EVM client, Ethereum virtual machine client. It has local blockchain copy. The state of the blockchain basically. There are multiple nodes, all these EVM clients, and the blockchain is copied between these nodes.

Minor nodes need to verify transactions that come into blockchain. If I want to do something on the blockchain, call a method on smart contract or do some change to the state of the blockchain, I basically need to submit a transaction. Now, when I submit a transaction, it costs me some Ethereum. It's called Gwaii. It's like a decimal place of Ethereum. It's also called gas. We'll talk about that in a bit.

You submit a transaction and all the nodes need to verify the transaction. They need to solve cryptographic puzzles, in a sense. Whenever they verify the transaction, the transaction is written into the blockchain and copied between all the nodes. Transaction validation, it's called the consensus mechanism. It's called also proof of work, this type of mechanism that I described. It's called proof of work. All nodes need to talk to each other, and they need to reach consensus about the transaction. If they don't reach consensus, the transaction is rolled back, basically, re-built.

How mining works? You submit transactions, you pay in GES. It's a small fee. Transaction submitted. Mining nodes try to guess the cryptopuzzles, and nodes that guessed these cryptopuzzles, they receive a reward for the proof of work. And then the transaction is considered completed. Everything is doing with hashes in the blockchain. Let's look at the transaction, for example. I have the test account here, and I can copy my account, which is a hash, and I can go to account two and say, okay, I want to send one Ether, paying some kind of fee, with abstract number, like gas price, let's say 10, and gas limit is $21,000. I will pay 21 Gwei. And then I confirm and I will see the transaction's pending, meaning it hasn't reached consensus. As you can see, it's reached consensus.

Transaction's approved. It was super fast because it's in the local blockchain. And yeah, that's it. So cryptography, it's everything to do in the blockchain, it's to do about hashes, we have the content with different sizes, it transfers cryptography function, and gets hashed. And as you can see, the hash is the same size.

So whenever you send a transaction, the transactions are grouped together and hashed, and then the hashes are hashed, and then these hashes are hashed, and then that's what is like merkle tree. So basically, these will be in the block. So multiple transaction will be grouped together and combined in the block. And that's how it will look like. So we have block 11, let's say. And this block has merkle tree of transactions. So it has like a hash of hashes of transactions, which are also hashes. And then what happens here is that all these block, this is the block header, all these block is hashed, and it exists in the header of the next block. And that's why we have the blockchain, that's why it's a chain, right? And that's why it's secure, because if I want to change and maliciously go and change something in history, right, these blocks will be invalid. Like I need to recompute all the blockchain, which is computational-wise is not really possible. So how does it work? Transaction requested, blockers created, nodes validate the transaction, then block is added to blockchain, nodes receive a reward for proof of work, and transaction is completed. We discussed that previously. So pretty much the same thing, I just added the block here.

So what is Guess? We've seen how I pay the guess. Whenever we send a transaction on the blockchain, we need to pay a guess, which is a fee that will get to the miner, and basically reading from the blockchain won't cost anything, but writing to a blockchain will cost because it will change the state of the blockchain, will cost computational resources. So less guess you pay, the longer transaction will take. The longer it will take to verify the transaction basically, to reach the proof of work.

So what are decentralized applications? Decentralized applications use the browser or any client that you want, in our case we were using the browser. Web3 interface on the front end, and then we basically connect to the blockchain. This is supposed to be here, actually. Sorry about that. So these are decentralized applications and sometimes they can be hybrid ones whenever we have a back end or a cloud, and then we interact to the blockchain from the server and maybe from the client. So smart contracts. What are smart contracts? We talked that Ethereum can run smart contracts, right? So it's a blockchain program basically, that's accessible to anyone on the network. And they look like that.

I mean, not physically look like that, but they're running on each node. So remember, I connect to the node, I can actually access, I can get the address of the smart contract, and I can run methods on the smart contract. So to write smart contracts, we'll use Solidity. So it is a language that looks pretty close to JavaScript actually, and we will use remix Web IDE to work with Solidity. So I had it somewhere here. Yeah, let's just open it like that. Okay, I got it here. So this is the remix IDE. And I have an example of contract that, as you can see, it looks pretty close to JavaScript. It just has different modifiers for slide types. And I can choose an environment. I can choose either injected web 3 provider, which is, in my case, a Metamask. Or I can just use JavaScript VM, basically its own blockchain for the remix IDE, which is it's nice. I don't need to worry about any extensions or anything. I can just play around with Solidity. So I encourage you after this talk to go and try that.

So I have this contract and I want to deploy that. So I deploy the contract and right now you can see the default value in the constructor is my value. So if I get that, yeah, I think because I had it already. Yeah, let's delete the contract, deploy it again, I can get the value and the value will be my value. Now if I want to change that, you see I have the value changed, right, and I can interact, that's how I interact with the smart contract. Now you can use smart contracts to build your own tokens, which is pretty nice because you don't need to create your own blockchain. You can just use ERC20 spec, which is basically a spec mentioning a list of functions that need to be in your smart contract. That will create a token that you can trade and exchange and you can use. In fact, lots of tokens are ERC20 tokens. Yeah, so that's the spec. These are the functions. After this talk, you'll have a link in the chat with the code for how you can create such token yourself. And to interact with smart contracts, you use Web3. And Web3 interface, it's used to connect to single Ethereum node.

Now, to connect to the node, you either run it locally or you use some sort of like Ethereum node provider. In our case, we'll use Ethereum. I used with MetaMask, I used here the Ganesh, which is our like dev environment that we will set up. And I'm talking to Ethereum client using JSON RPC. And Web3 JS gives a JavaScript way to interact with the blockchain basically. So it looks like that. I just require Web3, I put the URL of the Enfura node and you'll have link for that. So you can connect to the Ethereum mainnet basically. But for testing purposes, because like all the transactions costs way, which is basically Ethereum, which is basically Ether, which is basically money, crypto at least, you need to have some sort of like test accounts here or like at the local blockchain or different like testing networks.

So to set up the dev environment, we need node Python and personal blockchain for testing and it looks like that. Or if you want more interactivity, it looks like that. This is called Ganesh. And Ganesh comes up with the 10 accounts that you can use.

Also you need to set up the Truffle Framework. There is an alternative that I'll mention in that, but for these talks we'll be setting the Truffle Framework. So I installed the Truffle, using npm install truffle-g. It's a framework for small contract development basically with Solidity.

You also need to have a MetaMask. You've seen the MetaMask, I've used it multiple times. Here it's an extension that can connect to different test networks. To get started with the React app, you basically create a React app. I like it with TypeScript. I create a Truffle project, Truffle init. I set up my local environment for the portal 7.5.4.5. I need to test that it's working and run Truffle test. After I run that, everything is working, everything is fine. I need to change the compiler version from an older one to a newer one, so I can do it in Truffle config and in Smart Contracts itself.

This is the default contract that comes with Truffle init command. Then I like to move generated files by setting different directory moving that to source contracts or and source ABIs, because I want to be able to access them from JavaScript, from React. To compile my contracts, I need to run Truffle compile. That will compile everything. For testing, we'll use Chai and Mocha. It's nothing particular about testing. Just install a bunch of these dependencies. There is some math involved here with big numbers, because a blockchain uses a big number that JavaScript doesn't have. So I have this library that I import. There is the Solidity coverage for the linking and Web3 interface we discussed. To enable typing, I would use basically type-chains called type-chain. Now, in order to have types, I need to add a tsnode to my truffle config, install of all of these.

Then, it's a bunch of things to do actually. Then you need to set up your truffle.json, like so. With the truffle.json, ts.config.truffle.json doesn't have to be truffle. It can be different, but because React app overrides the default ts.config, then basically I need to set up my custom one. I want to include the ts files in the ts.config as well.

Then, I rename my Grations folder to migration-ts, change migration to typescript. A bunch of helper scripts that I need to run to generate these types actually. This is an example of smart contract and how it looks like. For testing, I mentioned that there's nothing particular except maybe this one. Altifax require token that actually brings the smart contract inside. And then, I can test different methods of it. So I create the token. And then I basically call the name to get a token name and so on. And here, the structure from this array on the contract contributes to these testing counts on Ganache. So deploying.

So how do I deploy? For that, I have migration files. There is an initial migration file that is written. And if I want to deploy my smart contracts, I need to write my own migration file. And this is the example migration file, how it looks like. I have the required token that will bring all like the my smart contract. And then I would use deploy or deploy to deploy it to the blockchain. For actually deploying, I will use migrate. And under the hood, it will just compile all my transmiles or all my migrations into JavaScript and then run truffle migrate. So how do you connect to things on the front end? So on the front end, we can use Web 3. If it's injected in the browser using MetaMask, we can just use ethereum.enable. Basically, you need to put some kind of check here. We can get networks, get accounts. So that's how the model will look like if you try to inject things. Yeah, we have the network, we have a bunch of accounts in the array here, and I believe this is balance. There is also ether.js which is another library that we can use.

It's a little bit different syntax, but the idea is the same. We're just getting the injected Web3 and using that. To work with contracts, we need to create an instance of contract using Web3. We can call different methods on these contracts. We need to provide the actual address. We can get this address from the token, so from API. That's the reason why we need APIs.

Now, that's for ether, for example, EtherJS. A little bit different syntax, but the idea is the same. Another way to use Web3 is using Web3 model. It enables you to use different Web3 providers. In that case, I, for example, have wallet connect. In addition to the injected one which is metamask. And I can load it. I can like log out, clear cache provider. That's how it will look like. And basically, yeah, if I log in with metamask, that's how it will look like. It will log in. What I can do, I can log out. I can go to metamask and say, okay, this is connected sites. Okay, sorry, this was not connected. I think, yeah, this is connected. Let's disconnect this one. And log in metamask will pop up this. And I need to select which account is connected. So I created the Use Web3 model hook for your convenience. So you can just check it out, play around with it, use it for loading Web3 model, log out provider. And so on. And interacting with it, basically, whenever you load everything, I can just get the token data. And you've seen this code, it's the same as a lot of ether code.

I basically get the token instance, connect to it. And then I call methods on the token or on smart contract. In this case, it's like on the token, but basically, it's on the smart contract. And the next step after this talk is to check the alternative to truffle, which is a hard hat. So it's like too much already to squeezing into the talk. Then you can check the GraphQL for blockchain, which is basically an ability to query public blockchain with GraphQL, Flick is for deploying on IPFS. And IPFS and Swarm are different blockchains that you can put things on them as well, not just on Ethereum.

So yeah, I hope it helped with a little bit understanding how blockchain works. I know it's a lot of things to cover, but I will post links in the chat with a bunch of resources, and you can check out my instructional videos on Anka.io, and on my website. You can reach out to me, you can watch videos on YouTube channel, and reach out on Twitter and say hi. Thanks, and enjoy the rest of the Conf. Bye-bye. Awesome. Well, that was a really, really cool talk, again, on a topic that I am a complete newbie on. Let's look at the results of the poll. So the number one answer was, I don't know where to start, which I think makes a lot of sense. But lots about different learning materials, not being there necessarily. We were talking backstage a little bit about how the ecosystem is decentralized, so maybe the documentation is a little decentralized as well.

Well, we've got some awesome questions from the audience. So let's just dive into those. So the first one is from CRS1138. Am I the only one thinking the blockchain world is a universe for itself with a very steep learning curve and high level entrance control? I'm still missing the answer to why. What advantage does this give me? It's a nice question actually. And yeah, I feel the same. The blockchain is sort of like a universe of itself. And that's actually the main reason why I came up with this talk to help people to kind of get into this universe, right? So to the question why and what it does and what advantage does it bring.

So we're talking about decentralization here. So in, for example, recent events of different social networks, having different policies on various things, right? Having one system that basically controls how you interact or basically controlling the servers and stuff like that, that is basically a centralized world, right? When we're talking about decentralized apps, we're talking about the apps that can't have downtime because you have like ethereum nodes, right? You have like different nodes and they have the copy of blockchain. We have the blockchain state, basically, the public ledger, which is really harder to kind of hack. Even though like cryptocurrencies were stolen before and it's way harder to do that.

And also like transparency, because if you put a smart contract on the blockchain, basically anyone can look into the code and look at this smart contract, right? So there is now, there is more like transparency and like having one like decentralized network that is shared in the world, right?

As far as use cases, Right now, most of the use case are like so-called DeFi, which is like decentralized finance. So lots of things on like financial side of things, mostly because we've seen like from the demo that I've shown, transactions on the blockchain, they cost gas. So there is like some monetary thing going when you interact with the blockchain. And yeah, by the way, someone wrote in the chat that they have 95 Ethereum. You can have it too because it's a test network and basically anyone can run a local blockchain or get like a test network and get dummy Ethereum to play around with and to develop smart contracts.

Another one from Vasilis Shchalkop. When did you learn about the blockchain and why did you learn it? Well, about blockchain, I learned when Bitcoin was, like when people were talking about Bitcoin. Now, I wish I had mined Bitcoin back then. Right, like we all probably wish that but if you mean like learning about like blockchain development, Ethereum in general. Learned about that some time ago, I believe like three years ago, something like that. But getting into that, I started mostly like mid last year. I was always fascinated about the topic or maybe like late to 20. I was always fascinated about the topic and I was like, okay, let's start getting into that and was like playing around with different, you know, projects and different types of setups. And yeah, that's why I basically suggested this talk for React Summit to have more explanation of how to get started. Cool. Cool. And then another one is, oh, this is a good quick one. Do you have any handles or links that people can follow so that they can view that upcoming content? Yeah, sure. They're in my slides actually, but yeah, I will share them on the chat after we finish the Q&A.

Right, like we all probably wish that but if you mean like learning about like blockchain development, Ethereum in general. Learned about that some time ago, I believe like three years ago, something like that. But getting into that, I started mostly like mid last year. I was always fascinated about the topic or maybe like late to 20. I was always fascinated about the topic and I was like, okay, let's start getting into that and was like playing around with different, you know, projects and different types of setups. And yeah, that's why I basically suggested this talk for React Summit to have more explanation of how to get started.

Cool. Cool. And then another one is, oh, this is a good quick one. Do you have any handles or links that people can follow so that they can view that upcoming content? Yeah, sure. They're in my slides actually, but yeah, I will share them on the chat after we finish the Q&A. So it will be on the summit Q&A chat. I won't just do it now, but yeah. Cool. Cool. So then they can just click and get there. Yep. Awesome.

And then another one from Chris Rojas. What specific sites do you recommend to get resources to learn about blockchain? What specific? I would start with understanding how blockchain works in terms of conceptually, because there's something to understand conceptually, how blocks are structured, more like academics of it, I would say. Understanding why it's so secure, why it's harder to hack things, and what is the public ledger. I think that's something I would focus on. Even though you can get started without understanding that, just like setting up HardHat or Truffle and start coding smart contracts. But I think it's important to understand the basics of it. And then getting into developing, having your local blockchain running, I would say that's the second step because then you can play around with it, transfer things from account, understand how gets works, and so on. And then you can start doing basic dApps without actually paying anything for transactions because you'll be running on test frameworks, test networks. Cool. That's important. Well, thank you so much. I know I learned a lot from this talk.