Introduction to Web3 and MetaMask
Tags: javascript, webdev, node, react
Published: 2021-05-19 18:15:15

---
title: Introduction to Web3 and MetaMask
published: true
description: Introduction to Web3 and MetaMask, with javascript, nodejs, react.
tags: javascript, webdev, node, react
cover_image: https://bs-uploads.toptal.io/blackfish-uploads/blog/post/seo/og_image_file/og_image/15719/one-click-login-flows-a-metamask-tutorial-0a78ae88875ba9377c7e43a2fa3b81d8.png
---

# Web3 - Javascript - Resources

Web3.js is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.

MetaMask is a browser plugin that serves as an Ethereum wallet. Users can store Ether and other ERC-20 tokens in the MetaMask wallet. The wallet can also be used to interact with decentralized applications, or dapps.

This page is a collection of resources, tutorials, guides, articles, etc. for learning Web3 with Javascript.

Last update: 05/21/2021 - Bookmark and come back to this page for more updates later.

\_\_

### Tools / Requirements:

* NodeJs
* MetaMask (chrome extension) - connect to your test wallets.
* Golang - to run some geth commands.
* Ganache - local block chain for dev.
* VSCode and extensions.

##### Setups:

* Setting up Local block chain using Ganache and MetaMask
    * article: [https://docs.moralis.io/guides/setting-up-ganache](https://docs.moralis.io/guides/setting-up-ganache)

\_\_

### Articles

Intro to Web3.js · Ethereum Blockchain Developer Crash Course

* article: [https://www.dappuniversity.com/articles/web3-js-intro](https://www.dappuniversity.com/articles/web3-js-intro)

How to send transactions with Web3 and Node.JS?

* using web3, @truffle/hdwallet-provider, send transaction
* article: [https://morioh.com/p/d3ef8b16c770](https://morioh.com/p/d3ef8b16c770)

How to Connect Web3.js to MetaMask in 2021

* using window.ethereum.send('eth\_requestAccounts')
* medium: [https://medium.com/valist/how-to-connect-web3-js-to-metamask-in-2020-fee2b2edf58a](https://medium.com/valist/how-to-connect-web3-js-to-metamask-in-2020-fee2b2edf58a)

Hooks and components to use Moralis in a React app

* using react-moralis, useMoralis hook
* build A Simple Dap in 3 Mins - [https://docs.moralis.io/guides/build-a-simple-dap-in-3-mins-login-part-2](https://docs.moralis.io/guides/build-a-simple-dap-in-3-mins-login-part-2)
* github repo: [https://github.com/MoralisWeb3/react-moralis](https://github.com/MoralisWeb3/react-moralis)

\_\_

### Tutorial Videos

How to connect smartContract to UI with Metamask(web3 tutorial)

* web3.js - web js - metamask - getAccount eth\_requestAccounts - test with BNB token - send Eth button - eth\_sendTransaction from/to account
* youtube: [https://www.youtube.com/watch?v=NseL8v9EH\_Q](https://www.youtube.com/watch?v=NseL8v9EH_Q)

How to send transactions with Web3 and NodeJS? (Backend Blockchain Development)

* web3.js - nodejs - test nest rinkeby - eth smart contract - sendTransaction
* youtube: [https://www.youtube.com/watch?v=n9QLsSagUzE&t=423s](https://www.youtube.com/watch?v=n9QLsSagUzE&t=423s)

### Links

For latest updates, please follow and bookmark this page:
https://nnote.cc/s/zeiu8/web3-javascript-resources