Web 3 React

Source: https://trufflesuite.com/boxes/react/

1. Buat directory baru kosong dulu lalu masuk ke folder tersebut.

2. Jalankan perintah di bawah:

$ npm install -g truffle@5.1.XX (for spesific version)

Kalo yang terbaru:

$ npm install -g truffle

$ truffle unbox react

Hapus semua yang ada di folder client

Masuk ke folder client

Bukan cmd di sana

lalu ketik npx create-react-app my-app

Pindahkan isi file ari folder my-app ke folder client

3. Buka ganache, buat workspace jika belum ada.

4. Buka metamask dan klik "add network".

5. Network name isi bebas, new rpc url ikutin yg di Ganache, untuk chain id isi '1337' lalu klik save

6. Import akun Ganache pada metamask dengan memasukkan private key-nya.

7. Kalo "unbox react" dah kelar. Buka setting pada Ganache lalu "add project". Cari "truffle-config.js" di folder truffle-nya lalu "open". Lalu "save & restart".

8. cd truffle

9. truffle develop (kalo pake ini nanti contractnya cuma bisa read tapi gak bisa write)

10. truffle compile

11. truffle migrate

12. cd..

13. cd client

14. npm start

15. Pada browser, buka metamask dan klik connect.

-------------------- use existing project -------------------------

Totorial pake project smart contract

1. extraxt zip

2. cd client

3. npm install

4. nmp start

5. import metamask account

6. cd ..

7. truffle complie

8. truffle migrate

9. cd client

10. npm start

Note React:

- Cara cepat cmd di floder, di address barnya langsung tulis cmd

- Kalo pake truffle develop, nanti bisa jadi value di storage gak bisa di read atau write

- Pake truffle init but initialisasi folder truffle-nya (tapi ini hasil foldernya kosong, dan gak lengkap, gak ada file migration dan dll)

NPM install kalo error pake run as admin

NVM untuk ganti versi node

Shortcut Open VSC

directory/code .

React Components

import React from "react";

import { Link } from 'react-router-dom';

function Navbar() {

   

    return (

        <h2>Halo Saya Manusia</h2>

    );

}

export default Navbar;

Problem Solve

kalo function nya udah pake .then, lalu dari luar await ().then() lagi nanti gak bisa.