Chapter 1: Intro to Web3.js

Chapter 1: Intro to Web3.js

By completing Lesson 5, our zombie DApp is now complete. Now we're going to create a basic web page where your users can interact with it.
To do this, we're going to use a JavaScript library from the Ethereum Foundation called Web3.js.

What is Web3.js?

Remember, the Ethereum network is made up of nodes, with each containing a copy of the blockchain. When you want to call a function on a smart contract, you need to query one of these nodes and tell it:
1. The address of the smart contract
2. The function you want to call, and
3. The variables you want to pass to that function.
Ethereum nodes only speak a language called JSON-RPC, which isn't very human-readable. A query to tell the node you want to call a function on a contract looks something like this:

Luckily, Web3.js hides these nasty queries below the surface, so you only need to interact with a convenient and easily readable JavaScript interface.
Instead of needing to construct the above query, calling a function in your code will look something like this:

We'll explain the syntax in detail over the next few chapters, but first let's get your project set up with Web3.js.

Getting started

Depending on your project's workflow, you can add Web3.js to your project using most package tools:

Or you can simply download the minified .js file from github and include it in your project:

Since we don't want to make too many assumptions about your development environment and what package manager you use, for this tutorial we're going to simply include Web3 in our project using a script tag as above.

Put it to the Test

We've created a shell of an HTML project file for you, index.html. Let's assume we have a copy of web3.min.js in the same folder as index.html.
1. Go ahead and copy/paste the script tag above into our project so we can use web3.js