arrow-left Course Hub
Lesson 1: Begin coding with XRPL and React.js
Estimated reading time:

10 Minutes

Difficulty:

Beginner

Concepts covered:
  • Direct XRP Payments
  • React.js
  • Send Currency
  • Tokens

Key takeaway:

Use React components to create a test account and basic user interface for sending payments on the XRPL.

Lesson 1

Begin coding with XRPL and React.js

Building a basic interface for the XRPL with React.js

How developers interact with the XRPL

If you’re going to use the XRPL, there are two important things most developers have to do:

  1. Send a transaction (to change something on the ledger)
  2. Send a request (to look up something on the ledger)

For example, you may send a payment to your friend using a “Payment” transaction, then check how much XRP is in your account after using an “account_info” request.

This tutorial will show you how to set up a React app, making it easy to send transactions and then look up what’s happening on the ledger. It will utilize two key libraries: `nice-xrpl`, a React component library to make it easy to assemble simple interfaces, and `xrpl.js`, a client library that facilitates sending transactions and requests.

What you can expect from this course

Each of the following lessons in this course will show you how to use a basic application in a code sandbox built with React.js components. If you just want to see the final result, you can skip all the explanations and jump into the code sandbox in each lesson!

In the first lesson, you’ll start by learning how to:

  1. Create an account on the XRPL.
  2. Send a payment from your account to another account.
  3. And check your account balance afterward.

In the second lesson, you’ll learn how to:

  1. Configure your account to receive tokens beyond XRP.
  2. Send and receive tokens with other accounts.
  3. Display account balances for all tokens.

And in the third lesson, you’ll expand upon that by learning how to:

  1. Mint/create Non-Fungible Tokens (NFTs).
  2. Get a list of existing NFTs owned by an account.
  3. burn/delete an NFT you own.

 

After you finish these lessons, you should have a solid foundation for how to use the XRPL and quickly build your own React app to interact with the ledger.

END OF LESSON

Now that you've learned a bit about coding with React on the XRP Ledger, test your knowledge with a quiz.

What are the two fundamental ways developers interact with the XRPL?
What is the primary goal when making a request on the XRPL?