# An In-depth Guide To Getting Started With Starknet.js

By [Hamed Zanganeh](https://paragraph.com/@blaxpy) · 2022-11-16

---

### An In-depth Guide To Getting Started With Starknet.js

Sadly, things are not quite as polished yet, with **Starknet.js**, as you’d find with ethers.js or web3.js, owing to the Starknet ecosystem being relatively new, so it took me some days of struggle, to finally build a working UI, which you can find [here](https://starknet-ens.netlify.app/).

![](https://storage.googleapis.com/papyrus_images/b863daeb715a8207f299c9ffde76cbed6d25208a0ca28a5646ee53967d8d0c91.png)

**For this tutorial, we’d need:**

1.  The contract’s ABI
    
2.  The contract’s Address
    
3.  An Argent or Braavos wallet
    
4.  React.js \[front-end framework\]
    
5.  get-starknet \[dependency\]
    
6.  Starknet \[dependency\]
    
7.  Buffer \[dependency\]
    

For the sake of time, and as this tutorial is not targeted at learning Cairo, we’d be skipping the part of writing contracts and deploying to Starknet, and we’d just make use of the ABI and contract address of a contract i already deployed previously.

Here’s a peek at the contract, which consists of one storage variable **names**, one external function **storeName**, and one view function **getName**.

    %lang starknetfrom starkware.cairo.common.math import assert_nnfrom starkware.cairo.common.cairo_builtins import HashBuiltinfrom starkware.starknet.common.syscalls import get_caller_address@storage_varfunc names(address: felt) -> (name: felt):end
    @externalfunc storeName{syscall_ptr: felt*, pedersen_ptr: HashBuiltin*, range_check_ptr}(  _name: felt):  let (caller) = get_caller_address()  names.write(caller, _name)  return ()end
    @viewfunc getName{syscall_ptr: felt*, pedersen_ptr: HashBuiltin*, range_check_ptr}(  _address: felt) -> (name: felt): let (name) = names.read(_address) return (name)end
    
    Contract ABI
    
    [
    {
    "inputs": [
    {
    "name": "_name",
    "type": "felt"
    }
    ],
    "name": "storeName",
    "outputs": [],
    "type": "function"
    },
    {
    "inputs": [
    {
    "name": "_address",
    "type": "felt"
    }
    ],
    "name": "getName",
    "outputs": [
    {
    "name": "name",
    "type": "felt"
    }
    ],
    "stateMutability": "view",
    "type": "function"
    }
    ]
    
    Contract Address
    
    0x049e5c0e9fbb072d7f908e77e117c76d026b8daf9720fe1d74fa3309645eabce

---

*Originally published on [Hamed Zanganeh](https://paragraph.com/@blaxpy/an-in-depth-guide-to-getting-started-with-starknet-js)*